开发者社区> 问答> 正文

html <canvas>标签的使用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
无标题文档 body{ background:black; } #c1{ background:white; } span{ color:white; } window.onload=function() { var oC = document.getElementById("c1") ; var oGC = oC.getContext('2d') ; var num = 0; oGC.translate(100,100); setInterval(function(){ num++; oGC.save(); oGC.clearRect(0,0,oC.width,oC.height); oGC.rotate(num*Math.PI/180); oGC.fillRect(0,0,100,100); oGC.restore(); },30); }

不支持canvas浏览器

做了一个以坐标(100,100)为中心点旋转的小方块,显示效果不正常,请各位老师指教哪里有错误,谢谢!

展开
收起
小旋风柴进 2016-03-13 14:01:53 1970 0
1 条回答
写回答
取消 提交回答
  • 因为你translate移动画布中心,clearRect时以移动过的中心开始计算,不再是右上角,导致无法清空右上角的内容。

    改这样,反向一下

    oGC.clearRect(-100, -100, oC.width, oC.height);

    2019-07-17 19:02:31
    赞同 展开评论 打赏
问答分类:
问答标签:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
《零基础HTML入门教程》 立即下载
天猫 HTML5 互动技术实践 立即下载
天猫HTML5互动技术实践 立即下载