首页 > 代码库 > canvas小练习
canvas小练习
以一个小球来回顾一下canvas的小知识吧，因为也有一段时间没怎么接触这玩意了。
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>来回跑动的小球</title></head><body> <div style="width:500px; height:500px; background:#CCC"> <canvas id=‘canvas‘ width="500" height="500"></canvas> </div> <script> var x = 0,y = 0; function init() { var context = document.getElementById(‘canvas‘); var ctx = context.getContext("2d");//获取上下文内容 ctx.clearRect(0, 0, 500, 500);//参数分别为x,y,宽度,高度 ctx.beginPath();//绘制开始 ctx.fillStyle = ‘#169008‘; ctx.arc(x++,y++,5,0,Math.PI*2,true); ctx.fill();//填充颜色 ctx.closePath();//结束绘画 } window.onload = function(){ setInterval(function(){ init() if(x >= 500){ x = 0, y = 0;} },10) } </script></body></html>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。