html5 canvas 代码 求最简单的动画效果 一个圆在左边移动到右边

 我来答
xinyu11290124
2014-02-17 · TA获得超过281个赞
知道小有建树答主
回答量:110
采纳率:0%
帮助的人:74.8万
展开全部

代码如下:

<!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,效果图如下:

推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式