动画的产生就是图片快速的连接,所以canvas的动画其实就是不断的刷新一张张图片,而这个刷新有3个过程:更新、清除、绘制。
就上面一句话的事情,我们来慢慢解析:
不断的刷新一张张图片:既然需要不断的刷新页面,那么就需要一个循环执行的函数。这个函数创建很简单。
function MainLoop()
{
//在这里更新数据、清除画布、绘制新画布
setTimeout(MainLoop,33);
};
MainLoop();
函数功能就是33ms的循环调用自己,33ms是因为1s产生动画效果的帧数是25-30,因此一帧大约1000/30=33ms
当然,为了可以控制开始停止,需要加按钮方便控制,很简单,定义一个控制的变量playMainLoop,而这个变量是可以通过开启/停止按钮来改变的;以上函数改为:
A、html需添加2个按钮 代码如下
<body>
<div ><button id="startMainLoop" style="background-color: red">Start</button></div>
<div><button id="stopMainLoop" style="background-color: sandybrown">Stop</button></div>
<canvas id="myCanvas" >
<!-- no no no no -->
</canvas>
</body>
-
B、按钮按下改变playMainLoop变量 代码如下
var playMainLoop = true;
var buttonStart = $("#startMainLoop");
var buttonStop = $("#stopMainLoop");
buttonStart.hide();
buttonStart.click(function(){
$(this).hide();
buttonStop.show();
playMainloop = true;
MainLoop();
});
buttonStop.click(function(){
$(this).hide();
buttonStart.show();
playMainloop = false;
});
C、playMainLoop变量控制循环函数,代码如下
function MainLoop()
{
// 在这里更新数据、清除画布、绘制新画布
if(playMainLoop)
{
setTimeout(MainLoop,33);
};
};
MainLoop();
D、更新、清除、绘制:
这里以一个正方形移动动画为例:
更新、清除、绘制:横坐标x不断改变,需定义一个变量x,每次循环加1。代码如下
var x = 0;
function MainLoop()
{
//在这里更新数据、清除画布、绘制新画布
x++; //更新数据
context.clearRect(0,0,canvas.width(),canvas.height()); //清除画布
context.fillRect(x,250,50,50); //绘制新画布
if(playMainLoop)
{
setTimeout(MainLoop,33);
};
};
这样就可以实现了
完整代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html5</title>
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript" >$(document).ready(function(){
var canvas = $("#myCanvas");
var context = canvas.get(0).getContext("2d");
canvas.attr("width",$(window).get(0).innerWidth);
canvas.attr("height",$(window).get(0).innerHeight);
context.fillStyle = "saddlebrown";
context.fillRect(0,0,canvas.width(),canvas.height());
var playMainloop = true;
var buttonStart = $("#startMainLoop");
var buttonStop = $("#stopMainLoop");
var x = 0;
buttonStart.hide();
buttonStart.click(function(){
$(this).hide();
buttonStop.show();
playMainloop = true;
MainLoop();
});
buttonStop.click(function(){
$(this).hide();
buttonStart.show();
playMainloop = false;
});
function MainLoop()
{
x++;
context.clearRect(0,0,canvas.width(),canvas.height());
context.fillRect(x,250,50,50);
if(playMainloop)
{
setTimeout(MainLoop,33);
};
};
MainLoop();
})</script>
</head>
<body>
<div ><button id="startMainLoop" style="background-color: red">Start</button></div>
<div><button id="stopMainLoop" style="background-color: sandybrown">Stop</button></div>
<canvas id="myCanvas" >
<!-- no no no no -->
</canvas>
</body>
</html>
效果图: