代码改变世界

随笔档案-2011年12月9日

HTM5 Canvas 会回弹的球

2011-12-09 18:18 by LoujaDy, 509 阅读, 收藏,
摘要： 应该叫啥？屏幕环绕//获取舞台varcanvas=document.getElementById("stage");//绘图接口varcontext=canvas.getContext("2d");//中心点位置varcenterX=canvas.width/2;varcenterY=canvas.height/2;//运动的球varball=function(x,y,vx,vy,radius,color){this.x=x;this.y=y;this.vx=vx;this.vy=vy;this.radius=radius;this.color=colo 阅读全文

HTML5 Canvas 向四面八方发射的"飞机"

2011-12-09 16:52 by LoujaDy, 432 阅读, 收藏,
摘要： 继上一回的旋转及多Canvas应用A：发射 左右键：旋转//获取到Canvasvarcanvas=document.getElementById("stage");//2d绘图版varcontext=canvas.getContext("2d");//获取到飞机varcanvasPlane=document.getElementById("plane");canvasPlane.style.left=(canvas.width-canvasPlane.width)/2+"px";canvasPlane.style. 阅读全文

HTML5 Canvas translate与rotate应用

2011-12-09 10:43 by LoujaDy, 3510 阅读, 收藏,
摘要： Translate：坐标转化默认Canvas的起启坐标0,0是在右上角,如果让中起启坐标放在中心点就可以这样做context.translate(centerX,centerY);Rotate:旋转的角度（确切的说是弧度）弧度=角度*PI/180角度=弧度*180/PI下面的一个例子就是使用到了坐标转化和旋转按左右键可以让方块转动//获取Canvas对象varcanvas=document.getElementById("stage");varcontext=canvas.getContext("2d");//矩形大小varwidth=100;varhe 阅读全文