canvas制作动画效果

最新推荐文章于 2025-05-21 07:30:58 发布

奶油牛轧糖

最新推荐文章于 2025-05-21 07:30:58 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_42859796/article/details/86660869

本文介绍了如何使用canvas结合setInterval方法制作动画效果。通过不断变换fillRect方法中图形的x和y坐标，并在每次绘制前使用clearRect清除画布，从而实现平滑的动画过渡。核心代码和实际效果也在文中展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

步骤

使用setInterval方法设置动画的间隔时间
setInterval(code,millisec)
第一个参数表示执行动画的函数，第二个参数为间隔时间（单位是毫秒）
用来绘图的函数
context.fillRect(x,y,width,height);
（1）通过不断的变换X和Y的坐标来实现动画效果
（2）在该函数中先用clearRect方法将画布整体或是局部擦除
x,y是指起点的横坐标和纵坐标;width,height是擦子的长度和高度

核心代码

var i ;
var context;
var width,height;
function draw(id){
	var canvas = document.getElementById(id);//获取元素
	context = canvas.getContext('2d');//获取上下文
	width = canvas.width;
	height = canvas.height;
	setInterval(paintingg,100);
	i = 0;

}
function painting(){
	context.fillStyle="red";//填充颜色
	context.fillRect(i,0,10,10);
	i = i + 20;//可以改变得到不同效果
}
function paintingg(){
	context.fillStyle="red";//填充颜色
	context.clearRect(0,0,width,height);
	context.fillStyle="green";
	context.fillRect(i,20,10,10);
	i=i+20;
}