摘要：源码 //获取到舞台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;/ 阅读全文
速度向量之角速度
2011-12-12 13:09 by LoujaDy, 1489 阅读, 0 推荐, 收藏, 编辑
摘要：角度速度是指物体设着某一个角动进行运动源码//获取到舞台varcanvas=document.getElementById("stage");//舞台2d绘图接口varcontext=canvas.getContext("2d");//获取中心点置varcenterX=canvas.width/2;varcenterY=canvas.height/2;//当前度varangle=45;//角速度varangleSpeed=1;//将中心点作为0,0点坐标context.translate(centerX,centerY);/***球对象*/varBall 阅读全文
html5 Canvas 拖拽
2011-12-10 14:02 by LoujaDy, 2346 阅读, 0 推荐, 收藏, 编辑
摘要：源码//获取到舞台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;//球 阅读全文
速度向量之双轴速度
2011-12-10 13:25 by LoujaDy, 323 阅读, 0 推荐, 收藏, 编辑
摘要：源码//获取到舞台varcanvas=document.getElementById("stage");//舞台2d绘图接口varcontext=canvas.getContext("2d");//获取中心点置varcenterX=canvas.width/2;varcenterY=canvas.height/2;//在舞台上画一条马路context.lineWidth=2;context.strokeStyle="#ff0000";context.beginPath();context.moveTo(0,centerY+2);con 阅读全文
速度向量之单轴速度
2011-12-10 13:11 by LoujaDy, 305 阅读, 0 推荐, 收藏, 编辑
摘要：源码//获取到舞台varcanvas=document.getElementById("stage");//舞台2d绘图接口varcontext=canvas.getContext("2d");//获取中心点置varcenterX=canvas.width/2;varcenterY=canvas.height/2;//在舞台上画一条马路context.lineWidth=2;context.strokeStyle="#ff0000";context.beginPath();context.moveTo(0,centerY+2);con 阅读全文
HTM5 Canvas 会回弹的球
2011-12-09 18:18 by LoujaDy, 498 阅读, 0 推荐, 收藏, 编辑
摘要：应该叫啥？屏幕环绕//获取舞台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 translate与rotate应用
2011-12-09 10:43 by LoujaDy, 3487 阅读, 1 推荐, 收藏, 编辑
摘要：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, 2860 阅读, 0 推荐, 收藏, 编辑
摘要：角速度应用://获取到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, 1410 阅读, 0 推荐, 收藏, 编辑
摘要：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, 841 阅读, 0 推荐, 收藏, 编辑
摘要：椭圆与椭圆运动：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 阅读全文