简单的canvas动画原理

痛定思痛。 2021-09-11 08:06 280阅读 0赞

简单的canvas动画原理一般就是如下步骤：

setInterval(  
   function()\{  
       draw(ctx);  
       update(canvas.width,canvas.height);  
   \},  
   50  
);

[深入了解setInterval][setInterval]

一. draw(ctx);  
1.清空 canvas  
除非接下来要画的内容会完全充满 canvas （例如背景图），否则你需要清空所有。最简单的做法就是用 clearRect 方法。  
2.保存 canvas 状态  
如果你要改变一些会改变 canvas 状态的设置（样式，变形之类的），又要在每画一帧之时都是原始状态的话，你需要先保存一下。ctx.save();  
3.绘制被动画的图形  
绘制要被动画的图形  
4.恢复 canvas 状态  
如果已经保存了 canvas 的状态，可以先恢复它（ctx.restore();），然后重绘下一帧。

![20170227132700546][]

二.update(canvas.width,canvas.height)

改变动画的原理是：位置的改变（运用物理学原理，初始化加速度vx(x轴的加速度)，vy（y轴的加速度））加速度可以是随机vx:Math.random()\*5+10,vy:Math.random()\*5+10

1.首先令图形的位置等于加速度

x +=vx;y+=vy;

2.根据你的需求进行判断

2.1图形在运动时不能超出canvas画布的宽

if(x-图形的半径<=0)\{

vx=-vx;

x=半径;

\}

if(x+图形的半径<=canvas.width)\{

vx=-vx;

x= canvas.width-半径;

\}

![20170227132730062][]

[setInterval]: http://www.jb51.net/article/84709.htm
[20170227132700546]: /images/20210813/f7e154edec204014abbd1ff6b2e65cdd.png
[20170227132730062]: /images/20210813/0488cbcdb26143449d93e18f9387cdd5.png

发表评论取消回复

表情：

评论列表（有 0 条评论，280人围观）

还没有评论，来说两句吧...

相关阅读

相关 Canvas 动画时钟

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8" />

川长思鸟来/ 2023年10月06日 19:34/ 0 赞/ 6 阅读

相关详解Canvas动画部分

基础篇： [Html5中Canvas绘制、样式详解（不包含动画部分）][Html5_Canvas] 此篇为后续目录 1. 状态的保存和恢复 2. translate移

我就是我/ 2023年02月21日 06:27/ 0 赞/ 93 阅读

相关 canvas 动画

canvas实现的动画效果图： ![在这里插入图片描述][20200904184921849.gif_pic_center] 代码： <!DOCTYPE

ゝ一纸荒年。/ 2022年12月04日 01:16/ 0 赞/ 168 阅读

相关 HTML5 Canvas动画效果实现原理

[![328298e5-6460-4029-a277-1cd702a54b46.jpg][]][328298e5-6460-4029-a277-1cd702a54b46.jpg

左手的ㄟ右手/ 2022年08月13日 11:58/ 0 赞/ 226 阅读

相关 HTML5 Canvas动画效果实现原理

使用[HTML5][]画布能够帮助我们快速实现简单的动画效果，基本原理如下： > 每隔一定时间绘制图形并且清除图形，用来模拟出一个动画过程，可以使用context.clear

小灰灰/ 2022年08月07日 09:57/ 0 赞/ 210 阅读

相关 html5的canvas旋转动画

<!DOCTYPE HTML> <html> <body> <canvas id="myCanv

以你之姓@/ 2022年07月13日 06:16/ 0 赞/ 217 阅读

相关 canvas浮动动画

大致效果 ![这里写图片描述][Image 1] ![这里写图片描述][Image 1] 总结：就是有很多的小球，当我们鼠标划过的时候小球就变大，当鼠标移走的时候小

电玩女神/ 2022年05月29日 04:53/ 0 赞/ 144 阅读

相关 Canvas箭头动画

先上效果图: ![20180606104834679][] 代码 <!DOCTYPE html> <html> <head>

忘是亡心i/ 2022年05月23日 02:18/ 0 赞/ 265 阅读

相关 canvas简单动画案例（圆圈闪烁渐变动画）

> canvas的第二篇博客，终于开始做动画了，不得不说，canvas是真的强，虽然写起来不是那么顺手，但是实现的东西真的让我很满意。实现效果： ![2019022309

傷城~/ 2022年03月17日 08:20/ 0 赞/ 875 阅读

相关简单的canvas动画原理

简单的canvas动画原理一般就是如下步骤： setInterval( function()\{ draw(ctx); upda

痛定思痛。/ 2021年09月11日 08:06/ 0 赞/ 281 阅读