我正在完成我的任务,但找不到解决方案。 这是一个从左到右的球的js画布画,一旦到达特定的x坐标,球就会再次从左开始,一遍又一遍。 一旦它再次开始循环,我要使其从黄色变为蓝色。 这是我的代码:

/* --- HTML --- */

<!DOCTYPE html>
<html>
<head>

<title>CANVAS</title>
    <script src="main.js"></script>
</head>
<body id="contenido">

<section id="tres">
    <p>3</p>
    <canvas id="lienzoTres" width="500" height="300"></canvas>
</section>

</body>
</html>

/* --- JS --- */

function animar() {
    var elemento=document.getElementById('lienzoTres');
    lienzo3=elemento.getContext('2d');
    x=70;
    y=130;
    radio=70;
    lienzo3.fillStyle="yellow";
    intervalo=setInterval(circuloAmarillo, 5);
    }
    window.addEventListener("load", animar, false);

function circuloAmarillo(){
    lienzo3.clearRect(x - radio, y - radio, radio * 2, radio * 2);
    x++;
    lienzo3.beginPath();
    lienzo3.arc(x,y,radio,0,Math.PI*2, false);
    lienzo3.fill();
    if(x>=430){
    lienzo3.clearRect(0, 0, 550, 300);
    x=70;
    cambiacolor();
    } 
}

function cambiacolor() {
    if (lienzo3.fillStyle=="yellow") {
    lienzo3.fillStyle="blue";
    } else if (lienzo3.fillStyle=="blue") {
    lienzo3.fillStyle="yellow";
    }
}

我没有包括CSS,因为这似乎不是问题。 关于如何使它在每次完成从左到右的运行时从黄色变为蓝色的任何想法?

谢谢!

#1楼 票数:0 已采纳

正如Anami所指出的,您必须按以下方式更改cambiacolor方法

 function cambiacolor() { if (lienzo3.fillStyle == "#ffff00") { lienzo3.fillStyle = "blue"; } else if (lienzo3.fillStyle == "#0000ff") { lienzo3.fillStyle = "yellow"; } } 

  ask by Franco Gargiulo translate from so

未解决问题?本站智能推荐:

1回复

在循环中更改 Rect html Canvas 的颜色

我想创建一个程序来显示排序算法的步骤,如下所示: https://visualgo.net/bn/sorting https://www.youtube.com/watch?v=kPRA0W1kECg 现在,我不知道如何更改正在比较的矩形的颜色 例如,当array[i]与array[i+1
2回复

在JavaScript中使用for循环绘制Canvas的问题

我无法在JavaScript中的for循环内的画布中绘制矩形。 有时它们可​​见的时间只有一秒钟,但它们会立即消失。 开发人员控制台中没有错误-在Firefox和Chrome上进行了测试,因此问题与浏览器无关。 似乎只有我在班上遇到了这个问题,尽管代码完全相同(或根据我的需要进行了稍微调整
1回复

如何使用javascript更改画布的颜色?

我知道如何在 CSS 中轻松完成此操作,但我想知道如何使用 Javascript 将默认的白色画布设为黑色。 我在背景上得到了我想要的圆圈总数,但是我每次尝试更改背景颜色都会摆脱我的圆圈。 Javascript:
1回复

更改 JavaScript 画布动画的背景颜色

我在网上发现了这个奇妙的 HTML5 火焰动画 [来源:YouTube 上的 iBasskung],我正在尝试弄清楚如何使黑色背景透明。 我是一名中级 JS 编码员,但似乎背景是火的一部分,需要 0 的不透明度。 我检查了颜色数组和火焰渲染器,但在任何地方都没有看到任何十六进制或 rgba 值。
2回复

html 5 canvas - 获取图像的颜色,然后使用该颜色更改像素

我不知道这是否可能,我从未真正使用过 html canvas,但我知道 但是我如何使用它来获取例如具有某种颜色的所有像素并将这些像素更改为白色? 所以假设我有一个红色的像素: 这是我想要的简单版本,但不知道该怎么做...... 有人有什么想法吗?
1回复

在 for 循环显示空白后导出画布

我在画布上绘图时遇到问题。 我可以看到正在绘制图像,但看起来它是异步进行的。 在画布和绘图方面,我有点新手,所以我一直在学习一些教程。 现在我正在使用 for 循环在特定位置绘制图像以创建纹理页面,因此 for 循环获取精确的 x 和 y 位置,然后导出/下载。 图像全部显示,但完成后,datau
2回复

HTML Canvas 未绘制

我正在尝试制作一个可以在画布上绘制方块的脚本,但是当我运行我的代码时,画布只是白色的,我错过了什么吗?。 这是我的代码。 控制台中没有错误, 谢谢你的时间!
2回复

绘图到画布代理越野车

我最近开始从事一个副项目,并在进行过程中尝试使用画布。 所以让我解释一下我想要发生的事情: 在我的 JS 中, main()函数被设置为一个区间。 在main()期间调用drawStep()函数。 这可以做几件事,或者应该做。 对不起,很长的解释。 清除画布,以便绘制的内容不会粘连。 使