html5 canvas 代码 求最简单的动画效果 一个圆在左边移动到右边_百度知 ...
发布网友
发布时间：2022-05-07 16:58
共1个回答
热心网友
时间：2022-04-20 00:13
代码如下：
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="700" height="550" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var x = 0;
var ss = setInterval(function(){
ctx.clearRect(0,0,700,550);
//ctx.translate(x,0);
ctx.beginPath();
ctx.arc(x,200,50,0,Math.PI*2,true);
ctx.stroke();
//ctx.fillRect(x,10,100,50);
if (x > 700 ) {
clearInterval(ss);
}
x += 20;
},100);
</script>
</body>
</html>
试试看，只是简单一个demo，效果图如下：
