canvas的一些学习笔记>>>

canvas

<canvas width=“200” height=“200” id=“cvs”></canvas>

制造2d环境:

var txt = cvs.getContext(‘2d’);

绘制矩形:

fillRect(x,y,width,height) : 绘制填满的矩形 

strokeRect(x,y,width,height) : 绘制矩形的边框 

clearRect(x,y,width,height) : 清除指定的区块，使该区块完全透明

设置绘图

fillStyle  :  填充颜色(绘制canvas是有顺序的)

lineWidth  :  线宽度，是一个数值

strokeStyle : 边线颜色

绘制方块

fillRect(L,T,W,H) :   默认颜色是黑色

strokeRect(L,T,W,H) :  带边框的方块

默认一像素黑色边框，显示出来的不一样原因

设置绘图

fillStyle  :  填充颜色(绘制canvas是有顺序的)

lineWidth  :  线宽度，是一个数值

strokeStyle : 边线颜色

边界绘制

lineJoin  :   边界连接点样式

miter(默认) 、round(圆角)、bevel(斜角)

lineCap  :   端点样式

butt(默认)、round(圆角)、square (高度多出为宽一半的值)

绘制路径

beginPath :  开始绘制路径

closePath  :  结束绘制路径

moveTo  :  移动到绘制的新目标点

lineTo  :  新的目标点

绘制路径_2

stroke  :  画线，默认黑色

fill  :  填充，默认黑色

rect  :  矩形区域

clearRect  :   删除一个画布的矩形区域

save  : 保存路径

restore  :  恢复路径

小例子  :  手指画板

绘制圆

arc(x, y, 半径, 起始弧度, 结束弧度, 旋转方向)

x ,  y  :   起始位置

弧度与角度的关系：弧度 = 角度*Math.PI/180

旋转方向：顺时针(默认：false)、逆时针(true)

例子：用arc去画个钟表

绘制其他曲线

arcTo(x1,y1,x2,y2,r)

第一组坐标、第二组坐标、半径

quadraticCurveTo(dx,dy,x1,y1)

贝塞尔曲线：第一组控制点、第二组结束坐标

bezierCurveTo(dx1,dy1,dx2,dy2,x1,y1)

贝塞尔曲线：第一组控制点、第二组控制点、第三组结束坐标

变换

translate

偏移：从起始点为基准点，移动当前坐标位置

rotate

旋转：参数为弧度

例子：旋转的小方块

scale

缩放例子：旋转加缩放的小方块

插入图片

等图片加载完，再执行canvas操作

图片预加载：在onload中调用方法

drawImage(oImg,x,y,w,h)

oImg : 当前图片 x,y : 坐标 w,h :  宽高

例子 :  微博的图片旋转效果

添加图片填充

createPattern(img,repeat)

repeat、repeat-x、repeat-y、no-repeat

渐变

createLinearGradient(x1,y1,x2,x2) 线性渐变

createRadialGradient(x1,y1,r1,x2,y2,r2) 径向渐变

addColorStop(stop,color);

stop取值 （0-1）

文本

strokeText(文字,x,y)

文字边框

fillText(文字,x,y)

文字填充

font

文字大小 :  '60px impact‘

textAlign

默认是start 跟left一样的效果 end right center

textBaseline

文字上下的位置的方式 默认 : alphabetic 

文本_2

measureText()

measureText(str).width :  只有宽度，没有高度

例子 :  文字居中

阴影

shadowOffsetX、shadowOffsetY

X轴偏移、Y轴偏移

shadowBlur

模糊半径

shadowColor

阴影颜色

像素

getImageData(x,y,w,h)

获取图像数据

putImageData(获取图像,x,y)

设置新的图像数据 

属性

width  : 一行的像素个数

height : 一列的像素个数

data  :  一个数组，包含每个像素的rgba四个值，注意每个值都在0~255之间的整数

像素_2

createImageData(w,h)

生成新的像素矩阵，初始值是全透明的黑色，即(0,0,0,0)

像素显字

获取和设置指定坐标

封装 :  getXY、setXY

图片的像素操作

必须是同源下

例子：反色、倒影、渐变等

例子：马赛克效果

合成

全局阿尔法值

globalAlpha

取值0-1

覆盖合成

源 ：新的图形

目标  ：已经绘制过的图形

globalCompositeOperation属性

source-over     destination-over     source-atop

destination-atop    source-in     destination-in

source-out    destination-out    lighter

copy    xor

导出图片

-toDataURL("image/png")

事件操作

isPointInPath

是否在点击范围内

jCanvaScript(canvas中的jquery):

http://jcscript.com/