wjy397的专栏

转载 html中offsetTop、clientTop、scrollTop、offsetTop各属性介绍

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 scrollWidth:获取对象的滚动宽度 offs

转载 关于base64编码的原理及实现

转载地址：http://www.cnblogs.com/hongru/archive/2012/01/14/2321397.html#3092699我们的图片大部分都是可以转换成base64编码的data：image。 这个在将canvas保存为img的时候尤其有用。虽然除ie外，大部分现代浏览器都已经支持原生的基于base64的encode和decode，例如btoa和atob。（将

原创 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）

转载 JS - caller,callee,call,apply 概念[转载]

js的arguments,callee,caller,length,prototype属性 我用几个例子简单的介绍下这几个函数  [html] view plaincopy>  html xmlns="http://www.w3.org/1999/xhtml">  head>  meta http-equiv="Conte

转载 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

转载 粒子波浪和颤动效果！

效果图：颤动：波浪：原理：都是利用了加速度效果，一开始给粒子加x，y的加速度，逐渐递减速度，就是粒子损耗率，波浪效果是一开始粒子速度太大，逐渐递减产生波浪效果。颤动效果是粒子加速度还未减到0，一直加速度正负交替产生波浪效果。伪代码：  // 粒子总共有两种状态，一种是自由落体，一种就是受到吸力。            if(!this.globleDow

原创 canvas.toDataUrl 画布导出功能（将canvas画板保存为图片格式）！

html伪代码：------------------------------------------------------------------------------------------------------------------------------------script伪代码：------------------------------------

转载 canvas transform用法！

转载 矩阵相乘！

矩阵乘法转载地址：http://www.cnblogs.com/DreamUp/archive/2010/07/27/1786225.html    矩阵乘法是一种高效的算法可以把一些一维递推优化到log（ n )，还可以求路径方案等，所以更是是一种应用性极强的算法。矩阵，是线性代数中的基本概念之一。一个m×n的矩阵就是m×n个数排成m行n列的一个数阵。由于它把许多数据

转载 js类，静态类，方法属性继承！

转载 图形碰撞反射！

公式2：/*     bounce(mtv, shapeMoving, shape);*/function bounce(mtv, collider, collidee) {   var dotProductRatio, vdotl, ldotl, point,       velocityVector = new Vector(new Point(velocity.x,

转载 圆形与多边形之间的碰撞检验！

Circle.prototype.project = function (axis) {   var scalars = [],       point = new Point(this.x, this.y);       dotProduct = new Vector(point).dotProduct(axis);/*根据圆心投影计算出园两边投影*/   scalars.p

原创 碰撞图像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 =

转载 canvas game API

转载 js call()方法！

obj1.method1.call(obj2,argument1,argument2) 如上，call的作用就是把obj1的方法放到obj2上使用，后面的argument1..这些做为参数传入． 举一个具体的例子 function add(a,b) {     alert(a+b); } function sub(a,b) {     alert(a-b);

原创 圆弧角度计算

钟表显示数字和原始弧度的差异是:原始弧度加上90度（PI/2）的倒数。所以指定钟表初始化角度的公式是：initialAngle = -（Math.PI/2 +(Math.PI / 180) * (timerSetting / 60 * 360)）,

转载 fps-动画以相同速度播放！

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------《《等同于：      deltaX = disc.v

转载 深入理解requestAnimationFrame

前言本文主要参考w3c资料，从底层实现原理的角度介绍了requestAnimationFrame、cancelAnimationFrame，给出了相关的示例代码以及我对实现原理的理解和讨论。本文介绍浏览器中动画有两种实现形式：通过申明元素实现（如SVG中的元素）和脚本实现。可以通过setTimeout和setInterval方法来在脚本中实现动画，但是这样效

转载 canvas 滤镜

负面滤镜会从255中减去每个像素的红绿蓝分量值，再将差值设置回去。等同于翻转了该像素的颜色。   var imagedata = context.getImageData(0, 0, canvas.width, canvas.height),       data = imagedata.data;   for(i=0; i       data[i]   = 255 - da

原创 canvas putImageData() 方法和drawImage()方法

JavaScript 语法：context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);参数值参数描述imgData规定要放回画布的 ImageData 对象。xImageData 对象左上角的 x 坐标，以像素计。

转载 textAlign和textBaseline属性集合

转载 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

原创 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;

转载 canvas里画曲线之quadraticCurveTo方法

ctx.quadraticCurveTo(x1,y1,x,y); 其中x,y是终点的坐标，而x1,y1是曲线控制点的坐标？什么？你问我起点在哪里？起点在此之前用moveTo确定。 我之所以把控制点的坐标带上序号1，是因为后面讲的某个画曲线的函数有两个控制点，也就有x2,y2了，所以这里先打个预防针。 我们由moveTo确定的起点和quadraticCurveTo自身确定的终点，可以

转载 canvas.save() canvas.restore() 作用

这里canvas.save();和canvas.restore();是两个相互匹配出现的，作用是用来保存画布的状态和取出保存的状态的。这里稍微解释一下，  当我们对画布进行旋转，缩放，平移等操作的时候其实我们是想对特定的元素进行操作，比如图片，一个矩形等，但是当你用canvas的方法来进行这些操作的时候，其实是对整个画布进行了操作，那么之后在画布上的元素都会受到影响，所以我们在操作之前调用ca