canvas制造2d环境:
var txt = cvs.grtContext(‘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-overdestination-oversource-atop
destination-atopsource-indestination-in
source-outdestination-outlighter
copyxor
导出图片
-toDataURL("image/png")
事件操作
isPointInPath
是否在点击范围内
jCanvaScript(canvas中的jquery):
http://jcscript.com/
网友评论