线条
var convas = document.getElementById('canvas');
var context = canvas.getContext('2d');
canvas.width = document.body.clientWidth;
canvas.height = document.body.clientHeight;
canvas.width
canvas.height
canvas.getContext('2d');
lineWidth //线条宽度
strokeStyle //边框色
fillStyle //填充色
stroke() //边框、线条绘制
fill() //填充绘制
rect(x,y,width,height) //绘制矩形
fillrect(x,y,widht,height) //绘制填充矩形
strokeRect(x,y,width,height) //绘制边框矩形
==============================================
线条属性
lineWidth
//线条两端的冒子样式
lineCap = 'butt' (default)
'round' //圆形冒子
'square' //方形冒子
//线条相接的样式
lineJoin = 'miter' (default) //尖角
'bevel' //斜街的形式
'round' //圆角的形式
miterLimit
==============================================
图像变换
save() //保存绘图状态
restore() //恢复绘图状态
translate(x,y) //位移
rotate(deg) //旋转
scale(sx,sy) //缩放
变换矩阵：
a c e
b d f
0 0 1
a,d 水平 垂直缩放
b,c 水平 垂直倾斜
e,f 水平 垂直位移
transform(a,b,c,d,e,f) //叠加在之前的变换效果之上
setTransform(a,b,c,d,e,f) //之前的变换效果都失效，重新设置变换效果
==============================================
填充样式 fillStyle strokeStyle适应fillStyle所有的值
线性渐变 Linear Gradient
var grd = context.createLinearGradient(xstar,ystar,xend,yend); //创建渐变线条
grd.addColorStop(stop,color); //关键颜色
线性渐变 Radial Gradient
var grd = context.createRadialGradient(x0,y0,r0,x1,y1,r1); //创建渐变线条 在两个圆点与半径之间
grd.addColorStop(stop,color); //关键颜色
createPattern(img,repeat-style); //图片填充
createPattern(canvas,repeat-style); //画布填充
createPattern(video,repeat-style); //音频填充
==============================================
曲线绘制
圆
context.arc(centerx,centery,radius,startingAngle,endingAngle,anticlockwise=false);
圆弧
context.moveTo(x0,y0);
context.arcTo(x1,y1,x2,y2,radius);
贝塞尔二次曲线 http://tinyurl.com/html5quadratic
context.moveTo(x0,y0);
context.quadraticCurveTo(x1,y1,x2,y2);
贝塞尔三次曲线 http://tinyurl.com/html5bezier
context.moveTo(x0,y0);
context.bezierCurveTo(x1,y1,x2,y2,x3,y3);
==============================================
文字渲染
context.font = 'bold 40px Arial'
context.fillText(string,x,y,[maxlen]);
context.strokeText(string,x,y,[maxlen]);
font
默认值：'20px sans-serif'
context.font =
font-style font-variant font-weight font-size font-family
font-style = bold / italic (斜体字) / oblique (倾斜字体)
font-variant = normal / small-caps (小型的大写字母)
font-weight = lighter / normal / bold / bolder
context.textAlign = left / center / right
context.textBaseline = top / middle / bottom (中文字)
alphabetic / ideographic / hanging (英文字)
文本的度量
context.measureText(string).width;
==============================================
阴影
context.shadowColor
context.shadowOffsetX
context.shadowOffsetY
context.shadowBlur
globalAlpha = 1 (default)
globalCompositeOperation = 'source-over' (defalut0
source-atop
source-in
source-out
destination-over
destination-atop
destination-in
destination-out
lighter / copy / xor
剪辑区域
context.clip();
非零环绕原则 制作剪纸效果
context.cleatRect(x,y,width,height); //清空canvas屏幕
context.isPointInPath(x,y); //检测坐标点是否在路劲内
==============================================
canvas 标准
W3C http://www.w3.org/TR/2dcontext/
WHATWG http://html.spec.whatwg.org/
context.ellipse(x,y,radiusX,radiusY,rotation,startAngle,endAngle,false); //椭圆
==============================================
Canvas与IE6、7、8等浏览器的兼容问题
exploercanvas http://code.google.com/p/exploercanvas/
==============================================
Canvas图形库
canvasplus
http://code.google.com/p/canvasplus/
Artisan JS
http://artisanjs.com/
Rgraph
http://roopons.com.au/wp-content/plugins/viral-optins/js/rgraph/
网友评论