canvas
手艺人123
知识改变命运
展开
-
canvas game API
转载 2015-01-09 09:36:17 · 408 阅读 · 0 评论 -
fps-动画以相同速度播放!
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------《《等同于: deltaX = disc.v转载 2015-01-05 16:56:42 · 487 阅读 · 0 评论 -
深入理解requestAnimationFrame
前言本文主要参考w3c资料,从底层实现原理的角度介绍了requestAnimationFrame、cancelAnimationFrame,给出了相关的示例代码以及我对实现原理的理解和讨论。本文介绍浏览器中动画有两种实现形式:通过申明元素实现(如SVG中的元素)和脚本实现。可以通过setTimeout和setInterval方法来在脚本中实现动画,但是这样效转载 2015-01-05 10:38:28 · 540 阅读 · 0 评论 -
textAlign和textBaseline属性集合
转载 2015-01-04 12:27:36 · 533 阅读 · 0 评论 -
3d旋转点坐标计算公式
3d旋转点坐标计算公式绕Z轴旋转a度x1=x*cos(a)-y*sin(a); y1=y*cos(a)+x*sin(a);z1=z;绕X轴旋转a度x1=x;y1=y*cos(a)-z*sin(a);z1=z*cos(a)+y*sin(a);绕Y轴旋转a度x1=x*cos(a)-z*sin(a);y1=y;z1=z*cos(a)+x*sin(a)原创 2015-01-21 22:00:45 · 3598 阅读 · 0 评论 -
canvas putImageData() 方法和drawImage()方法
JavaScript 语法:context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);参数值参数描述imgData规定要放回画布的 ImageData 对象。xImageData 对象左上角的 x 坐标,以像素计。原创 2015-01-04 19:34:21 · 8705 阅读 · 2 评论 -
HTML5 canvas createPattern() 方法,createLinearGradient()方法
在水平和垂直方向重复图像:JavaScript:var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");var img=document.getElementById("lamp");var pat=ctx.createPattern(img,"repeat");ctx.rect(0,0,15转载 2015-01-04 11:52:20 · 1098 阅读 · 0 评论 -
canvas tansform()与setTransform()方法
tansform()与setTransform()方法所用6个参数。tansform(a,b,c,d,e,f)与setTransform(a,b,c,d,e,f);用于坐标变换的通用方程式x'=ax+cy+e y'=bx+dy+f;原创 2015-01-03 11:10:16 · 752 阅读 · 0 评论 -
canvas里画曲线之quadraticCurveTo方法
ctx.quadraticCurveTo(x1,y1,x,y); 其中x,y是终点的坐标,而x1,y1是曲线控制点的坐标?什么?你问我起点在哪里?起点在此之前用moveTo确定。 我之所以把控制点的坐标带上序号1,是因为后面讲的某个画曲线的函数有两个控制点,也就有x2,y2了,所以这里先打个预防针。 我们由moveTo确定的起点和quadraticCurveTo自身确定的终点,可以转载 2015-01-02 20:37:12 · 1896 阅读 · 0 评论 -
canvas.save() canvas.restore() 作用
这里canvas.save();和canvas.restore();是两个相互匹配出现的,作用是用来保存画布的状态和取出保存的状态的。这里稍微解释一下, 当我们对画布进行旋转,缩放,平移等操作的时候其实我们是想对特定的元素进行操作,比如图片,一个矩形等,但是当你用canvas的方法来进行这些操作的时候,其实是对整个画布进行了操作,那么之后在画布上的元素都会受到影响,所以我们在操作之前调用ca转载 2015-01-02 18:33:11 · 344 阅读 · 0 评论 -
lufylegend引擎俄罗斯方块js代码!
Box.js:----------------------------------------------------function Box(){var self = this;self.box1=[[0,0,0,0],//设置其中不同的方块图案 [0,0,0,0], [1,1,1,1], [0,0,0,0]];self.box2=[[0,0,0,0], [0转载 2015-01-15 22:55:49 · 1152 阅读 · 0 评论 -
粒子波浪和颤动效果!
效果图:颤动:波浪:原理:都是利用了加速度效果,一开始给粒子加x,y的加速度,逐渐递减速度,就是粒子损耗率,波浪效果是一开始粒子速度太大,逐渐递减产生波浪效果。颤动效果是粒子加速度还未减到0,一直加速度正负交替产生波浪效果。伪代码: // 粒子总共有两种状态,一种是自由落体,一种就是受到吸力。 if(!this.globleDow转载 2015-01-15 12:45:20 · 758 阅读 · 0 评论 -
canvas.toDataUrl 画布导出功能(将canvas画板保存为图片格式)!
html伪代码:------------------------------------------------------------------------------------------------------------------------------------script伪代码:------------------------------------原创 2015-01-15 00:10:44 · 6192 阅读 · 0 评论 -
canvs 实现进度条效果(烟火效果)
新手试一下canvas:先贴出效果(自己运行试一下)贴出源码: body{padding:0px;margin:0px;overflow: hidden;} #cas{display: block;border:1px solid;margin:auto;} progressBar原创 2015-02-02 15:43:08 · 666 阅读 · 0 评论 -
图形碰撞反射!
公式2:/* bounce(mtv, shapeMoving, shape);*/function bounce(mtv, collider, collidee) { var dotProductRatio, vdotl, ldotl, point, velocityVector = new Vector(new Point(velocity.x,转载 2015-01-12 10:50:46 · 781 阅读 · 0 评论 -
圆形与多边形之间的碰撞检验!
Circle.prototype.project = function (axis) { var scalars = [], point = new Point(this.x, this.y); dotProduct = new Vector(point).dotProduct(axis);/*根据圆心投影计算出园两边投影*/ scalars.p转载 2015-01-11 18:48:11 · 892 阅读 · 0 评论 -
碰撞图像shapes和polygon!
var Shape = function () { this.x = undefined; this.y = undefined; this.strokeStyle = 'rgba(255, 253, 208, 0.9)'; this.fillStyle = 'rgba(147, 197, 114, 0.8)';};Shape.prototype =原创 2015-01-11 09:35:31 · 501 阅读 · 0 评论 -
圆弧角度计算
钟表显示数字和原始弧度的差异是:原始弧度加上90度(PI/2)的倒数。所以指定钟表初始化角度的公式是:initialAngle = -(Math.PI/2 +(Math.PI / 180) * (timerSetting / 60 * 360)),原创 2015-01-06 09:55:50 · 2766 阅读 · 0 评论