canvas运动

canvas的运动,是一个不断清除画布内容,不断重绘,因为canvas类似一张图片,所以它的重绘一部分和重绘整个画布的效率是一样的。
如下,简单的运动

var oC = document.getElementById('c1');
var gd = oC.getContext('2d');
var x = 100;
setInterval(function(){
    gd.clearRect(0,0,oC.width,oC.height);//清除画布,从0,0开始,清除到oC.width,oC.height
    gd.strokeRect(x+=5,100,100,100);//不断重绘整个矩形
},16);

这样一个div就运动起来了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一:canvas简介 1.1什么是canvas? ①:canvas是HTML5提供的一种新标签 ②:HTML5 ...
    GreenHand1阅读 4,730评论 2 32
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,726评论 25 709
  • 一、canvas简介 1.1 什么是canvas?(了解) 是HTML5提供的一种新标签 Canvas是一个矩形区...
    Looog阅读 3,974评论 3 40
  • 说到采访,直接的反应应该是记者采访某某人物才出现的场合事件,因而此次活动本人内心是抗拒的。因为以前没有想过,感觉来...
    AskYp阅读 487评论 4 6
  • 更换Ruby镜像 (1)检查当前镜像 gem sources -l(2)移除当前镜像 ...
    XLsn0w阅读 281评论 0 0