首先要注意: <canvas>
元素不被一些老的浏览器所支持, 但被支持于Firefox 1.5+, Opera 9+, 新版本的Safari, Chrome, 以及Internet Explorer 9.
需要先获得2D渲染上下文才能绘制<canvas>元素
var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d');
Canvas是基于状态绘制图像的。
基本使用:
1.使用下面两个方法就可以定义一个路径
context.moveTo(x,y); //起点 context.lineTo(x,y); //连线到终点
2.对于多个路径,如果想要分开处理,需要在路径定义的首尾加上下面两个方法,把他们分隔开
context.beginPath();
context.closePath();
3.路径样式
context.lineWidth //定义线条宽度 context.strokeStyle //定义线条颜色 context.fillStyle //填充颜色 context.stroke(); //绘制线条 context.fill(); //绘制填充的颜色块
4.绘制弧线
context.arc( centerx, centery, radius, //圆心坐标(x,y)以及半径r startingAngle, endingAngle, //开始的弧度值,和结束的弧度值 anticlockwise = false //可选参数,(false顺时针绘制)还是(true逆时针绘制) )
5.绘制矩形
context.rect(x, y, width, height); //设置矩形状态 context.fill(); context.stroke(); //或者 context.fillRect(x, y, width, height); //绘制填充的矩形 context.strokeRect(x, y, width, height); //绘制边框的矩形
6.fillStyle、strokeStyle的属性值的格式
#FFF #333 rgb(255,128,0) rgba(100,100,100,0.8) hsl(20,62%,28%) hsla(40,83%,33%,0.6) red
7.线条的帽子:lineCap
用于设置线条两端的形状,有以下三种值:
butt(default) //默认缺省 round //圆头 square //方头 context.lineCap = "round";
8.线条与线条相交的形态:lineJoin
三种属性值:
miter(default) //尖角 bevel //斜接 round //圆角 context.lineJoin = "round"; //当尖角很尖锐时,会出现lineJoin为bevel //此时跟另外一个属性有关:miterLimit,默认值是10 //当在lineJoin为miter情况下,miterLimit大于10时,lineJoin会自动变成bevel
9.图像变换和状态保存
图像变换:
位移:translate(x,y); 旋转:rotate(deg); 缩放:scale(sx,sy); //保存当前图形状态: context.save(); //恢复图形的所有状态: context.restore(); //使用: context.save(); context.translate(x,y); context.restore();
10.变换矩阵
a c e b d f 0 0 1 a水平缩放(1) b水平倾斜(0) c垂直倾斜(0) d垂直缩放(1) e水平位移(0) f垂直位移(0) 即:默认时,该变换矩阵为单位阵 //设置变换矩阵 transform(a,b,c,d,e,f); //重置变换矩阵 setTransform(a,b,c,d,e,f);
11.线性渐变
var grd = context.createLinearGradient(xstart,ystart,xend,yend);//开始坐标到结束坐标 grd.addColorStop(stop,color);//stop为浮点数,开始坐标点到结束坐标点直线上,某个位置(0.0~1.0之间) //例: var skyStyle = context.createLinearGradient(0,0,800,800); skyStyle.addColorStop(0.0, 'black'); skyStyle.addColorStop(1.0, 'blue'); context.fillStyle = skyStyle;
12.径向渐变
var grd = context.createRadialGradient(x0,y0,r0,x1,y1,r1);//开始圆心坐标到结束圆心坐标,以及半径 grd.addColorStop(stop,color);//stop为浮点数,开始坐标点到结束坐标点直线上,某个位置(0.0~1.0之间)
13.图片填充
createPattern(img,repeat-style) //img为图片对象,repeat-style填充格式 //其中repeat-style: no-repeat/repeat-x/repeat-y/repeat //例: var backgroundImage = new Image(); backgroundImage.src = "bg.jpg"; backgroundImage.onload = function(){ var pattern = context.createPattern(backgroundImage,"repeat"); context.fillStyle = pattern; context.fillRect(0,0,800,800); }
14.canvas填充
createPattern(canvas,repeat-style) //canvas对象,repeat-style填充格式
例:
window.onload=function(){ var canvas=document.getElementById("canvas"); canvas.width=800; canvas.height=800; var context=canvas.getContext("2d"); var backCanvas=createBackgroundCanvas(); var pattern=context.createPattern(backCanvas,"repeat"); context.fillStyle=pattern; context.fillRect(0,0,800,800); } function createBackgroundCanvas(){ var backCanvas=document.createElement("canvas"); backCanvas.width=100; backCanvas.height=100; var backContext=backCanvas.getContext("2d"); backContext.beginPath(); backContext.moveTo(15,15); backContext.lineTo(50,50); backContext.lineWidth=10; backContext.strokeStyle="green"; backContext.stroke(); return backCanvas; }
15.video填充
createPattern(video,repeat-style) //video视频对象
16.另一种弧线绘制方法
context.arcTo( x1,y1,x2,y2, //x1,y1,x2,y2两个坐标与起始点x0,y0组成一个角 radius //半径 )
例:
context.moveTo(x0,y0); context.arcTo(x1,y1,x2,y2,R); //起始点为(x0,y0),该弧线与01线以及12线相切
17.贝塞尔曲线
贝塞尔二次曲线
context.moveTo(x0, y0); //起始点 context.quadraticCurveTo( x1, y1, //控制点坐标 x2, y2 //终点坐标 )
参考:http://tinyurl.com/html5quadratic
贝塞尔三次曲线
context.moveTo(x0, y0); //起始点 context.bezierCurveTo( x1, y1, //控制点坐标 x2, y2, //控制点坐标 x3, y3 //终点坐标 )
参考:http://tinyurl.com/html5bezier
18.文字渲染
context.font = "font-style font-variant font-weight font-size font-family"; //css字体样式,默认值:"20px sans-serif" context.fillText(String, x, y, [maxlen]); //String字符串,和坐标位置,第四个为可选参数,这行文字的最长宽度 context.strokeText(String, x, y, [maxlen]); font-style: normal (Default) italics (斜体字) oblique (倾斜字体) font-variant: normal (Default) small-caps (小写英文字母变成小的大写字母) font-weight: normal (Default) lighter bold bolder 100,200,300,400(normal) 500,600,700(bold) 800,900 font-size: 20px (Default) 2em 150% font-family: 设置多种字体备选,支持@font-face
文本水平对齐:
context.textAlign = left
right
center
文本垂直对齐:
context.textBaseline = top
middle
bottom
alphabetic (Default)
ideographic
hanging
文本的度量:
context.measureText(String).width //获取渲染的字符串的宽度
19.阴影
context.shadowColor //阴影颜色 context.shadowOffsetX //阴影的位移值 context.shadowOffsetY context.shadowBlur //阴影模糊度
20.全局方法:
context.globalAlpha = 1 (Default) //全局透明度,默认不透明 context.globalCompositeOperation = "source-over" (Default) //绘制的图像在重叠的时候的效果,默认是(source-over)后面绘制的图像覆盖前面绘制的图像 "source-atop" //后面绘制的图像覆盖前面绘制的图像,但后面的图像只显示重叠部分 "source-in" //后面绘制的图像覆盖前面绘制的图像,但只显示重叠部分 "source-out" //只显示后绘制的图像,而且重叠部分被切掉 "destination-over" //前面绘制的图像覆盖后面绘制的图像 "destination-atop" //前面绘制的图像覆盖后面绘制的图像,但前绘制的图像只显示重叠部分 "destination-in" //前面绘制的图像覆盖后面绘制的图像,但只显示重叠部分 "destination-out" //只显示前绘制的图像,而且重叠部分被切掉 "lighter" //重叠部分颜色叠加融合 "copy" //只显示后绘制图像 "xor" //异或,重叠部分被挖空
21.剪辑区域
将当前创建的路径设置为当前剪切路径的方法
void ctx.clip(); void ctx.clip(fillRule); void ctx.clip(path, fillRule);
fillRule
这个算法判断一个点是在路径内还是在路径外。
path
需要剪切的 Path2D 路径。
例:
ctx.arc(100, 100, 75, 0, Math.PI*2, false); ctx.clip(); ctx.fillRect(0, 0, 100,100);
22.非零环绕原则
路径方向
应用:镂空剪纸效果
23.canvas交互
context.clearRect(x,y,width,height) //清空指定的区域 context.isPointInPath(x,y) //点击检测函数,该点是否在当前规划路径内,当检测点包含在当前或指定的路径内,返回 true;否则返回 false //以下两个是获取鼠标点击在canvas坐标 var x = event.clientX - canvas.getBoundingClientRect().left; var y = event.clientY - canvas.getBoundingClientRect().top;
24.扩展Canvas的context
将drawStar方法扩展到context:
CanvasRenderingContext2D.prototype.drawStar = function(){}
25.Canvas兼容性
检测
<canvas id="canvas">当前浏览器不支持Canvas,请更换浏览器再试</canvas>
Canvas与IE6、7、8浏览器的兼容性问题
引入explorecanvas库:
https://code.google.com/p/explorecanvas/ <!--[if IE]><script type="text/javascript" src="../excanvas.js"></script><![endif]-->
26.canvas图形库:canvasplus || artisanJS || RGraph
http://code.google.com/p/canvasplus
http://artisanjs.com
http://roopons.com.au/wp-content/plugins/viral-optins/js/rgraph
27.Canvas 的 API 接口文档:
https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D