本系列致力于简单的动画特效,或者游戏特效.我会将我的思考一步一步讲述出来.可能会很基础.但是一定能带你走进这个新奇的元素. 希望与君共学习. Let us begin!
今天是第一天,我开始学习了canvas中的API.知道这是一个画布元素,要想在里面画东西,就要得到它的上下文(有的也叫绘图环境).利用这个上下文,用JS调用API.从而在画布上显示图像.例如这样:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>初识 canvas</title> </head> <body> <canvas id="myCanvas" width="800px" height="600px" style="border:1px solid #9C3;"> your browser is not support canvas. </canvas> <!----------------------------------------------------------------------------> <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); //得到canvas var canvas2D = canvas.getContext("2d"); //得到上下文 </script> </body> </html>
可以看到页面上有一个小方块,这就是canvas元素,可以在里面进行绘图了.canvas默认的大小是300*150.可以看出canvas元素就和其他的元素是一样的,是页面描述的一部分而已.
那么先来画一个图形吧.恩! 看看下面的代码.
这些API都可以在W3C中找到,由于这不是本文的重点,就不累述了.只是要注意的几点(也是在下在学习的过程中遇到的问题).
1.要fill(),stroke()是把路径填充显示出来的.用的路径的话,一定要记得清除路径,就是beginPath().
2.刷新canvas有2中方法,一个是clearRect(),这个不仅可以清除canvas中所以的图像,还可以清除一部分,从而创造出复杂的图像,但是它不会清除画笔.还有一个是改变canvas的大小,默认改变canvas的大小后,canvas中的图像清除,还有画笔也会被清除,就是默认的黑色.
下面是我写的小球碰撞试验,虽然这种代码很多,但是这是基础.有了这个基础,就离我的目标进了一步,要问我的目标是什么,就是用canvas写游戏啦.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>初识 canvas</title> <!------------------------------------------------------------------------------> <style type="text/css"> body{margin:0px;} #myCanvas{ border:1px #0000FF solid;} </style> <!------------------------------------------------------------------------------> </head> <body> <canvas id="myCanvas"> your browser is not support canvas. </canvas> <!----------------------------------------------------------------------------> <script type="text/javascript"> function ballMove(canvasID) { var canvas = document.getElementById(canvasID); //得到canvas canvas.width = 800; canvas.height = 600; var canvas2D = canvas.getContext("2d"); var refreshRate = ~~(1000/24); //刷新速率 var radius = 100; //园的半径 var ballColor = "rgba(255,0,0,0.5)" //圆的颜色 var x = 100; //圆心的起始位置 var y = 100; var x_off = 5; //x方向移动速度 var y_off = 10; //y方向移动速度 var flagx = 1; //标志变量 var flagy = 1; var carshRight = canvas.width - radius; //碰撞的实际宽度 var carshButtom = canvas.height - radius; //碰撞的实际高度 var carshLeft = 0 + radius; var carshTop = 0 +radius; setInterval( function() { //判断 if(x < carshLeft) { x = carshLeft; //补帧操作 flagx = 1; } if(x > carshRight) { x = carshRight; flagx = -1; } if(y > carshButtom) { y = carshButtom; flagy = -1; } if(y < carshTop) { y = carshTop; flagy = 1; } //画图 canvas2D.beginPath(); //下面两句是清除画布 canvas2D.clearRect(0,0,canvas.width,canvas.height); canvas2D.arc(x,y,radius,0,Math.PI*2,false); canvas2D.fillStyle = ballColor; canvas2D.fill(); //下一帧 x = x + flagx * x_off; y = y + flagy * y_off; } ,refreshRate); } ballMove("myCanvas"); </script> </body> </html>
动画: 由帧构成, 所以叫补帧动画.
每一帧就是一附图片,人的眼睛有视觉停留的功能,大约每秒能看24附图片.然后这些图片经过大脑的加工,就让人感觉到物体在移动了.所以,动画就是图片,在这样就是canvas中的内容,只要canvas中的内容改变,就能形成动画了.
这种写法不是很科学,但是,能够实现我想要的效果,记得一位大师说过,写代码不一定要多么的复杂,只要是你想要的结果,那什么代码都行.在这个基础上,可以实现碰撞后改变球的颜色,大小等.
也可以碰撞后减小速度.这不就是一个台球吗?虽然不是很完善,但有了这种思想,就一定OK的了.附上小球改变大小的实例. 还可以改变更多东西,你能想到的,就去实现吧.
初学者大多都是这样写的吧,我也不例外,但是在以后的代码中,这种就会很少出现了.应为JS是面向对象的,那就用面向对象的来写吧. 明天继续 今天就到这里吧
相关文章
精彩导读
热门资讯
关注我们
