代码改变世界

HTML5 Canvas LED 时钟

2011-12-14 14:48 by LoujaDy, 1432 阅读, 收藏, 编辑
正文内容加载中...

速度向量之角速度

2011-12-12 13:09 by LoujaDy, 771 阅读, 收藏, 编辑
摘要: 角度速度是指物体设着某一个角动进行运动源码//获取到舞台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, 1945 阅读, 收藏, 编辑
摘要: 源码//获取到舞台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, 167 阅读, 收藏, 编辑
摘要: 源码//获取到舞台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, 123 阅读, 收藏, 编辑
摘要: 源码//获取到舞台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, 319 阅读, 收藏, 编辑
摘要: 应该叫啥?屏幕环绕//获取舞台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, 3157 阅读, 收藏, 编辑
摘要: 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, 1964 阅读, 收藏, 编辑
摘要: 角速度应用://获取到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, 913 阅读, 收藏, 编辑
摘要: 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, 520 阅读, 收藏, 编辑
摘要: 椭圆与椭圆运动: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阅读全文