[js高手之路] html5 canvas动画教程 - 匀速运动
匀速运动：指的是物体在一条直线上运动，并且物体在任何相等时间间隔内通过的位移都是相等的。其实就是匀速直线运动，它的特点是加速度为0，从定义可知，在任何相等的时间间隔内，速度大小和方向是相同的。
1 <head>
2 <meta charset='utf-8' />
3 <style>
4 #canvas {
5 border: 1px dashed #aaa;
6 }
7 </style>
8 <script>
9 window.onload = function () {
10 var oCanvas = document.querySelector("#canvas"),
11 oGc = oCanvas.getContext('2d'),
12 width = oCanvas.width, height = oCanvas.height,
13 x = 0;
14 function drawBall( x, y, cxt ){
15 cxt.fillStyle = '#09f';
16 cxt.beginPath();
17 cxt.arc( x, y, 20, 0, 2 * Math.PI );
18 cxt.closePath();
19 cxt.fill();
20 }
21 ( function linear(){
22 oGc.clearRect( 0, 0, width, height );
23 drawBall( x, height / 2, oGc );
24 x = 2;
25 console.log( x );
26 requestAnimationFrame( linear );
27 } )();
28 }
29 </script>
30 </head>
31 <body>
32 <canvas id="canvas" width="1200" height="600"></canvas>
33 </body>上述实例让一个半径20px的小球 从x=0, y=canvas高度的一半，以每帧2px的速度向右匀速运动.
我们可以把小球封装成一个对象:
ball.js文件：
1 function Ball( x, y, r, color ){
2 this.x = x || 0;
3 this.y = y || 0;
4 this.radius = r || 20;
5 this.color = color || '#09f';
6 }
7 Ball.prototype = {
8 constructor : Ball,
9 stroke : function( cxt ){
10 cxt.strokeStyle = this.color;
11 cxt.beginPath();
12 cxt.arc( this.x, this.y, this.radius, 0, 2 * Math.PI );
13 cxt.closePath();
14 cxt.stroke();
15 },
16 fill : function( cxt ){
17 cxt.fillStyle = this.color;
18 cxt.beginPath();
19 cxt.arc( this.x, this.y, this.radius, 0, 2 * Math.PI );
20 cxt.closePath();
21 cxt.fill();
22 }
23 }该小球对象，可以定制位置半径和颜色，支持两种渲染方式（描边和填充）
1 <head>
2 <meta charset='utf-8' />
3 <style>
4 #canvas {
5 border: 1px dashed #aaa;
6 }
7 </style>
8 <script src="./ball.js"></script>
9 <script>
10 window.onload = function () {
11 var oCanvas = document.querySelector("#canvas"),
12 oGc = oCanvas.getContext('2d'),
13 width = oCanvas.width, height = oCanvas.height,
14 ball = new Ball( 0, height / 2 );
15 (function linear() {
16 oGc.clearRect(0, 0, width, height);
17 ball.fill( oGc );
18 ball.x = 2;
19 requestAnimationFrame(linear);
20 })();
21 }
22 </script>
23 </head>
24
25 <body>
26 <canvas id="canvas" width="1200" height="600"></canvas>
27 </body>斜线匀速运动：
1 <head>
2 <meta charset='utf-8' />
3 <style>
4 #canvas {
5 border: 1px dashed #aaa;
6 }
7 </style>
8 <script src="./ball.js"></script>
9 <script>
10 window.onload = function () {
11 var oCanvas = document.querySelector("#canvas"),
12 oGc = oCanvas.getContext('2d'),
13 width = oCanvas.width, height = oCanvas.height,
14 ball = new Ball( 0, height );
15 (function linear() {
16 oGc.clearRect(0, 0, width, height);
17 ball.fill( oGc );
18 ball.x = 2;
19 ball.y -= 1;
20 requestAnimationFrame(linear);
21 })();
22 }
23 </script>
24 </head>
25
26 <body>
27 <canvas id="canvas" width="1200" height="600"></canvas>
28 </body>任意方向的匀速运动（速度分解）
1 <head>
2 <meta charset='utf-8' />
3 <style>
4 #canvas {
5 border: 1px dashed #aaa;
6 }
7 </style>
8 <script src="./ball.js"></script>
9 <script>
10 window.onload = function () {
11 var oCanvas = document.querySelector("#canvas"),
12 oGc = oCanvas.getContext('2d'),
13 width = oCanvas.width, height = oCanvas.height,
14 ball = new Ball( 0, 0 ),
15 speed = 5,
16 vx = speed * Math.cos( 10 * Math.PI / 180 ),
17 vy = speed * Math.sin( 10 * Math.PI / 180 );
18
19 (function linear() {
20 oGc.clearRect(0, 0, width, height);
21 ball.fill( oGc );
22 ball.x = vx;
23 ball.y = vy;
24 requestAnimationFrame(linear);
25 })();
26 }
27 </script>
28 </head>
29 <body>
30 <canvas id="canvas" width="1200" height="600"></canvas>
31 </body>[js高手之路] html5 canvas动画教程 - 匀速运动相关推荐
- [js高手之路]html5 canvas动画教程 - 下雪效果
利用canvas,实现一个下雪的效果,我们先预览下效果: 我们先分析下这个效果: 1,随机产生雪花 2,雪花的产生不是同时产生,而是有先后顺序的 3,雪花怎么表示 4,怎么源源不断的下雪 5,雪花有大 ...
- HTML弧度文本,[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)...
canvas提供两种输出文本的方式: strokeText:描边文本 fillText:填充文本 fillStyle配合fillText使用,strokeStyle配合strokeText使用 str ...
- [js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)
上文,写完弧度与贝塞尔曲线[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具),本文主要是关于线条的样式设置 lineWidth: 设置线条的宽 ...
- [js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API
我们接着上文[js高手之路] html5 canvas系列教程 - 认识canvas以及基本使用方法继续. 一.直线的绘制 cxt.moveTo( x1, y1 ): 将画笔移动到x1, y1这个点 ...
- 前端画圆弧html弧线的像素,[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线，弧线，圆形)...
arc:画弧度 cxt.arc( x, y, 半径, 开始角度,结束角度,是否逆时针 ); x, y: 为弧度的中心横坐标和纵坐标,如果这是画一个圆.那么x,y就是圆的圆心. 开始角度与结束角度都是以 ...
- [js高手之路] html5 canvas教程 - 绘制七巧板
七巧板长什么样? 用canvas把他画出来,其实就是把这7个区域的图形,每个点的坐标找出来,再用moveTo, lineTo连线,设置不同的颜色即可. 1 <head> 2 <met ...
- 分享8款令人惊叹的HTML5 Canvas动画特效
HTML5的确可以制作出非常绚丽的网页动画效果,尤其是利用HTML5 Canvas特性和HTML5 3D特性,我们更加可以欣赏到超酷的动画特效.今天我从html5tricks网站上整理了8款令人惊叹的 ...
- [js高手之路]深入浅出webpack教程系列9-打包图片(file-loader)用法
[js高手之路]深入浅出webpack教程系列索引目录: [js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数 [js高手之路]深入浅出webpack教程系列2-配置文件we ...
- html5常用动画效果教程,HTML5教程 8个经典HTML5 Canvas动画学习
本篇教程探讨了HTML5教程 8个经典HTML5 Canvas动画学习,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < HTML5非常强大,尤其是Canvas ...
最新文章
- 阿里大神分享API网关在微服务架构中的应用！
- 2017云计算及工业物联网论坛即将于广州开幕
- Java开发SVM之Eclipse集成LibSVM示例
- Oracle中nolog干什么用的,在oracle中，sqlplus / nolog是做什么用的
- 几个主流的Java连接池整理
- Boost：双图bimap与lambda表达式的测试程序
- 阿里云天池 Python训练营Task1：从变量到异常处理
- Bzoj3262 陌上花开
- 研究解决CLOB字段IO问题的方法
- 树枝学术 | 论文翻译全攻略
- 随机森林-科比生涯数据集分析与预测
- （二）VISIO 中间带箭头的弧线怎么画
- 化工、食品外贸行业管理难点
- matlab PID学习
- 百度cdn几时能入币_影响汇率的因素有哪些
- matlab2016 wavread,matlabwavread用法
- 用html计算长方形的面积公式,长方形面积公式是什么
- 原子互换：一统公链江湖的神来之笔
- WebPack 学习：从阮神的15个DEMO开始
- mac c语言 新手,第1次买Mac必看，新手买Mac全攻略！