canvas学习案例之简单的物理运动
这次主要写2种简单的运动效果,包括匀速直线运动、匀加速直线运动。在码代码之前先了解下canvas动画效果的基本实现原理,其核心思想是先定义一个初始状态,然后定义一个定时器,定时器内执行一个方法,在这个方法中要清除当前的画面,然后重新绘制需要变化的效果。由于人眼存在残影,所以短时间内的中断的变化可以看成是连续的变化。
以下代码都是基于下面的html结构
1 2 3 | < canvas id = "canvas" width = "728" height = "400" > 你的浏览器不支持canvas,请跟换其他浏览器试一试 </ canvas > |
匀速直线运动
首先了解下概念:是指运动快慢不变(即速度不变)、沿着直线的运动。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | var canvas = document.getElementById( 'canvas' ), ctx = canvas.getContext( '2d' ), canWid = canvas.width, canHei = canvas.height; ctx.fillStyle = '#0c0' ; setInterval( function () { if (startPoint < (-30)) { speed = 0; startPoint = canWid + 30; } run(ctx); }, 80) var speed = 0, //定义速度为0 startPoint = canWid + 30; //小球开始的起点 function run(ctx) { speed = -6; ctx.clearRect(0, 0, canWid, canHei); //清除画布 startPoint += speed; //关键点重新计算坐标,每次都减少6 ctx.beginPath(); ctx.arc(startPoint, canHei / 2, 30, 0, 2 * Math.PI); ctx.closePath(); ctx.fill(); } |
匀加速直线运动
匀变速直线运动的定义:在直线运动中,把加速度的大小和方向都不改变的运动(加速度为正时),称之为匀加速直线运动。
2个基本的公式:
速度公式: 速度 = 初始速度 + 加速度x时间
位移公式: 位移 = 初始速度x时间 + 0.5x加速度x时间x时间
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | var canvas = document.getElementById( 'canvas' ), ctx = canvas.getContext( '2d' ), canWid = canvas.width, canHei = canvas.height, ballRadius = 30; ctx.fillStyle = '#0c0' ; setInterval( function () { if (startPoint < (-1)*ballRadius) { v0 = 0; v = 0; a = 10; time = 0; s = 0; startPoint = canWid + 30; } run(ctx); }, 70) var v0 = 0, v = 0, a = 10, time = 0, s = 0, startPoint = canWid + ballRadius; function run(ctx) { time += 0.1; //控制时间的变化 s = -(0.5 * a * (time * time)); //根据公式计算位移 startPoint += s; ctx.clearRect(0, 0, canWid, canHei); ctx.beginPath(); ctx.arc(startPoint, canHei / 2, ballRadius, 0, 2 * Math.PI); ctx.closePath(); ctx.fill(); } |
其中setInterval定时器可以用requestAnimationFrame来代替。
关于requestAnimationFrame的用法可以参考这篇文章http://feg.netease.com/archives/451.html
手机阅读请扫描下方二维码:
上一篇:我写的代码真的规范吗
下一篇:屏幕尺寸、分辨率、倍率到底是什么鬼
12345678

12345678

12345678
1
12345678
12345678

12345678
12345678
12345678
12345678
12345678
555
555
555
555
1
555
12345678
12345678
12345678
12345678

1
1
1
1
1
1
1
1
1
1
1
12345678

12345678
12345678

12345678
12345678
12345678
12345678

ughueuqsisfghlnlwlzw
12345678

12345678

12345678

1
12345678

12345678

12345678

12345678

12345678

12345678

1

1

1

1

1

555
1

1

555
1

1

1
1
555
1
1
1
1
1
1
555
1
1
555
1
555
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1