从画布的左侧到右侧以直线移动圆圈 [英] Moving circle in a straight line from left to the right of canvas

问题描述

我正在尝试使用此代码在一条直线上绘制一个移动的圆圈。但是我提出了一个语法错误。帮我修正一下这段代码。

 < script> 
 
 var canvas = document.getElementById（myCanvas）; 
 var context = canvas.getContext（2d）; 
 
函数draw_circle（circleX，circleY，radius，fill）{
 context.fillStyle =black; 
 context.fillRect（0,0,800,300）; 
 
 context.strokeStyle =red; 
 context.strokeRect（5,5,790,290）; 
 
 var speed = 5 
 
 context.fillStyle = fill; 
 context.arc（circleX，circleY，radius，0，Math.PI * 2）; 
 context.fill（）; 
} 
 
 setInterval（draw_circle（100,100,30，cyan），33）; 
 
< / script> 
  

解决方案

您必须清除画布（使用 canvas.width = canvas.width 或 clearRect（） ）

请注意，您必须添加 context.beginPath（）为了让 clearRect（）完成他的工作。

完成后你只需增加弧线的x位置。

  var canvas = document.getElementById（myCanvas）; var context = canvas.getContext（2d）; function draw_circle（circleX，circleY，radius，fill）{ //清除画布context.clearRect（0,0，canvas.width，canvas.height）; context.beginPath（）; context.fillStyle =black; context.fillRect（0,0,800,300）; context.strokeStyle =red; context.strokeRect（5,5,790,290）; var speed = 5; //只是一个循环，如果你不想让它只使用`i + = speed;`（i> canvas.width + radius）？i =（radius * -2）：i + = speed; context.fillStyle = fill; context.arc（circleX，circleY，radius，0，Math.PI * 2）; context.fill（）;} var i = 0; setInterval（function（）{draw_circle（i，100,30，cyan）}，33）;  

< pre class =snippet-code-html lang-html prettyprint-override> < canvas id =myCanvas>< / canvas>

I am here trying to draw a moving circle in a straight line with this code. But im wrong to put a syntax. Help me to correct this code.

<script>

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

function draw_circle (circleX, circleY, radius, fill) { 
    context.fillStyle = "black";
    context.fillRect(0, 0, 800, 300);

    context.strokeStyle = "red";
    context.strokeRect(5, 5, 790, 290);

    var speed = 5

    context.fillStyle = fill;
    context.arc(circleX, circleY, radius, 0, Math.PI*2);
    context.fill();
}

setInterval(draw_circle(100,100, 30 , "cyan"), 33);

</script>

解决方案

You will have to clear your canvas (using canvas.width = canvas.width or clearRect())

Note that you will have to add context.beginPath() in order to have clearRect() do his job.

Once done you just have to increment the x position of your arc.

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

function draw_circle (circleX, circleY, radius, fill) { 
    //clear the canvas
    context.clearRect(0,0,canvas.width, canvas.height);

    context.beginPath();
    context.fillStyle = "black";
    context.fillRect(0, 0, 800, 300);

    context.strokeStyle = "red";
    context.strokeRect(5, 5, 790, 290);
    var speed = 5;
    //just a loop if you don't want it simply use `i+=speed;`
    (i>canvas.width+radius)?i=(radius*-2):i+=speed;
    context.fillStyle = fill;
    context.arc(circleX, circleY, radius, 0, Math.PI*2);
    context.fill();
}

var i=0;

setInterval(function(){draw_circle(i,100, 30 , "cyan")}, 33);

<canvas id = "myCanvas"></canvas>

这篇关于从画布的左侧到右侧以直线移动圆圈的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！