以一个小球来回顾一下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>
canvas小练习
时间： 2025-01-15 13:55:50