HTML5 canvas动画基础自学分享(2)_H5之家 - 中国HTML5教程资源分享第一站

下面是小球运动改变大小的代码: 希望能想到更多的东西.

<!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>

热门搜索： HTML5 canvas