摘要：
源码 //获取到舞台varcanvas=document.getElementById("stage");//舞台2d绘图接口varcontext=canvas.getContext("2d");//获取中心点置varcenterX=canvas.width/2;varcenterY=canvas.height/2;/***Led灯*/varLight=function(x,y,radius,color){//灯中心点位置this.x=x;this.y=y;//灯的半径this.radius=radius;//灯的颜色this.color=color;/ 阅读全文
随笔分类 - HTML5 Canvas系列
html5 Canvas 拖拽
2011-12-10 14:02 by LoujaDy, 2350 阅读, 收藏, 编辑
摘要：
源码//获取到舞台varcanvas=document.getElementById("stage");//舞台2d绘图接口varcontext=canvas.getContext("2d");//获取中心点置varcenterX=canvas.width/2;varcenterY=canvas.height/2;/***球对象*/varBall=function(x,y,radius,color){//球的中心点位置this.x=x;this.y=y;//球的半径this.radius=radius;//球的颜色this.color=color;//球 阅读全文
HTM5 Canvas 会回弹的球
2011-12-09 18:18 by LoujaDy, 498 阅读, 收藏, 编辑
摘要：
应该叫啥？屏幕环绕//获取舞台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, 418 阅读, 收藏, 编辑
摘要：
继上一回的旋转及多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, 3491 阅读, 收藏, 编辑
摘要：
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 阅读全文
HTML5 Canvas绘制跟随鼠标移动的球
2011-12-08 18:35 by LoujaDy, 2863 阅读, 收藏, 编辑
摘要：
角速度应用://获取到Canvasvarcanvas=document.getElementById("stage");//2d绘图版varcontext=canvas.getContext("2d");//球运行的速度varballSpeed=4;//字弹对象varball=function(x,y,radius,color){this.x=x;this.y=y;this.radius=radius;this.color=color;//绘制字弹this.draw=function(){//清空画板context.save();context.begi 阅读全文
HTML5 Canvas 会射子弹的"飞机"
2011-12-08 15:39 by LoujaDy, 1413 阅读, 收藏, 编辑
摘要：
A：发射 左右键移动水平移动，并且会射子弹的假飞机A键：发射左右键：水平移动//获取到Canvasvarcanvas=document.getElementById("stage");//2d绘图版varcontext=canvas.getContext("2d");//子弹运行的速度varballSpeed=3;//飞机对象varplane=function(x,y,width,height,rotate,color){//位置this.x=x;this.y=y;//旋转的角度this.rotate=rotate;//飞机的颜色this.color=c 阅读全文
HTML5 椭圆（蛋）运动的小球
2011-12-07 11:57 by LoujaDy, 843 阅读, 收藏, 编辑
摘要：
椭圆与椭圆运动：varcanvas=document.getElementById("ballBroad");varcontext=canvas.getContext("2d");//角度varangle=0;//角度步长varspeedAngle=0.1;//刷新频率varframes=1000/60;//球对象varBall=function(radius,color,x,y){this.radius=radius;this.color=color;this.x=x;this.y=y;}//中心点varcenterX=canvas.width/2;v 阅读全文
HTML5 做波形运动的小球
2011-12-07 10:54 by LoujaDy, 568 阅读, 收藏, 编辑
摘要：
波形运动： varcanvas=document.getElementById("ballBroad");varcontext=canvas.getContext("2d");//角度varangle=0;//Y步长varspeedY=0.1;//x步长varspeedX=3;//刷新频率varframes=1000/60;//球对象varBall=function(radius,color,x,y){this.radius=radius;this.color=color;this.x=x;this.y=y;}//中心点varcenterX=canvas 阅读全文
HTML5 上下平稳移动的球
2011-12-07 10:05 by LoujaDy, 1039 阅读, 收藏, 编辑
摘要：
上下平稳运动 varcanvas=document.getElementById("ballBroad");varcontext=canvas.getContext("2d");//角度varangle=0;//步长varspeed=0.1;//刷新频率varframes=1000/60;//球对象varBall=function(radius,color,x,y){this.radius=radius;this.color=color;this.x=x;this.y=y;}//创建一个球varnewBall=newBall(20,"#ff00 阅读全文
HTML5 Canvas与localStorage简单应用
2011-12-06 12:59 by LoujaDy, 592 阅读, 收藏, 编辑
摘要：
Canvas 是HTML5的一大2d图形处理利器，localStorage是本地存储,它有一个很有意思的API，类似于观察者模型的事件storage事件，一者本地存储发生改变，它会响应注册了storage事件的所有窗口。这样当我们在其中一个窗口的Canvas中画东西是，其它窗口可以监听并重绘，这就是下面的这个例子。打开两个窗口，然后在其一个窗口画，另一个窗口则可以看到你画的东东 varcanvas=document.getElementById("drawbroad");canvas.addEventListener("mousemove",onMous 阅读全文