[英]How to animate the canvas with js
我正在尝试使用html canvas制作动画,但是我不知道我是否有最好的方法。
我正在尝试制作一个<canvas id="canvas"></canvas>
并使用fillRect()
在其上绘制一个矩形。
然后我要执行一个函数onload,它的超时时间为500毫秒。
该函数基本上是通过更改矩形的x或y将矩形1px绘制到我想要的位置,然后使用clearRect()
在从起点开始并在另一个矩形之后再绘制矩形。
我这样做对吗? 还是有更好的方法来解决它?
您可以使用此结构
const canvas = document.getElementById('can');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
canvas.style.backgroundColor = 'white';
var someconstructorName = function(paramA,paramB,...){
"Initialisation of variables and other things"
this.draw = function(){
"your logic"
}
this.update = function(){
"your update logic"
this.draw();
}
}
function animate(){
requestAnimationFrame(animate)
}
animate();
在这里查看此笔会给您一个好主意: https : //codepen.io/khanChacha/pen/YgpBxM
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.