canvas绘图基础

<canvas>元素是HTML5中的绘图元素，通过定义一个画布区域，然后使用javascript动态地在这个区域里面绘制图形，对于2D和3D图形都可以绘制，我们将其分成2D上下文和WebGL两大块内容来一起来学习，但是WebGL觉得比较少用到，而且难，所以不讲了！
一、了解canvas
<canvas id=‘draw’ width=‘200’ height=‘200' > nothing </canvas>，这是便是一个基本canvas元素的写法了，但是我们必须通过javascript来动态获得，那么需要这样：

 1 var draw = document.getElementById(‘draw’); 2 //确定是否支持canvas 3 if(draw.getContext){ 4 //这样就取得绘图上下文对象的引用，画图便可以开始了！ 5 var context = draw.getContext(‘2d’); 6 //取得图像的数据uri，显示图像 7 var imageuri = draw.toDataURL(‘image/png’); 8 var img = document.createElement(‘img’); 9 img.src='/images/loading.gif' data-original= imageuri;10 document.body.appendChild(img);11 }

View Code

二、2D上下文
对于2D上下文的坐标是开始于canvas元素的左上角的，原点的坐标为(0，0)，x轴越往右越大，y轴越往下越大就算但画布的原坐标发生translate也不例外，如下图：

填充（使用指定样式［颜色、渐变、图像、模式等］填充图形）和描边（图形的边缘画线）分别为fillStyle和strokeStyle，需要注意一点，fillStyle和strokeStyle会被延用至重新设置这两个值！

1 var draw = document.getElementById(‘draw’);2 if(draw.getContext){3 var context = draw.getContext(‘2d’);4 context.strokeStyle = “#000”;5 context.fillStyle = ‘#0000ff’;6 }

View Code

绘制矩形，有以下方法fillRect()、strokeRect()、clearRect()的方法，都是一样的，传入四个参数，矩形的x坐标、矩形的y坐标、矩形的宽度width、矩形的高度height，

 1 var draw = document.getElementById(‘draw’); 2 if(draw.getContext){ 3  4 var context = draw.getContext(‘2d’); 5 //绘制黑色矩形 6 context.strokeStyle = “#000”; 7 context.strokeRect(10,10,50,50); 8 //绘制黑色矩形 9 context.strokeStyle = “#000”;10 context.fillRect(30,30,50,50);11 12 //在两个填充矩形重叠的地方清除一个小矩形13 context.clearRect(40,40,10,10);14 15 //绘制描边矩形16 context.fillStyle = ‘#0000ff’;17 context.fillRect(30,30,50,50);18 19 }

View Code

绘制路径，2d上下文有很多在画布上绘制路径的方法，可以创造出复杂的形状和线条。要绘制路径，首先需要调用beginPath()方法，
arc(x,y,radius,startAngle,endAngle,counterclockwise)，意思是以(x,y)为圆心，radius为半径，counterclockwise的值为false的时候顺时针画圆（或圆弧），开始角度startAngle，结束角度endAngle，用弧度表示；
arcTo(x1,y1,x,y,radius)，意思是从(x1,y1)到(x,y)，以radius为半径，画一条弧线；
lineTo(x,y)，意思是从上一个点画一条直线至(x,y)；
moveTo(x,y)，意思是将绘图的游标移至(x,y)，也就是从此点开始绘制；
rect(x,y,width,height)，这是画个矩形，就不多说了；
bezierCurveTo(x1,y1,x2,y2,x,y)，意思从上一个点开始，是以(x1,y1)、(x2,y2)为控制点，(x,y)为终点的三次贝尔塞曲线；

quadraticCurveTo(cx,cy,x,y)，意思是从上一个点开始，是以(cx,cy)为控制点，(x,y)为终点的二次贝尔塞曲线。

那么接下来，创建路径之后，我们可以又怎么这几种选择：

使用closePath()，关闭路径，绘制一条连接至起点的线条；

使用fill()、stroke()，对路径进行填充或是描边，前提是设置了（fillStyle、strokeStyle）

使用clip()，创建一个剪切区域

如果我们想在路径关闭之前，判断某个点是否在路径上，可以这样来做

if(context.isPointInPath(100,100)){   alert("点击这里http://t.cn/RUbL4rP，就可以跳转，快来看看阿！");   }

 绘制文本，有图，就有文本，主要有两个方法，fillText()和strokeText(),传入四个参数，str（字符串）、x坐标、y坐标、最大像素宽度(超过此值，将会自动收缩)，当然这两个方法是以以下三个属性（font、textAlign、textBaseline）为基础的，当然要注意，这两个方法也是使用fillStyle和strokeStyle来做填充和描边滴，之后也有demo更新到github上面去!

context.font="blod 14px Arial";context.textAlign = "center";//"start" "end" "left" "right"context.textBaseline = "middle";//"top" "bottom" "hanging" "alphabetic" "ideographic"context.fillText("工资低，被迫下海，还望大家多多支持，多多棒槌，宣传一下下",100,20);

View Code

有时候，我们需要将我们的文本控制在某一个区域中的时候，那么会用到measureText()方法，传入一个参数（我们需要显示的字符串），得到的对象里面有个width属性，返回最佳的width，假如说我们现在想在width=150px的画布上显示合适的字体的话，可以这样

1 var font_size = 40px;2 context.font = font_size+''px arial";3 while(context.measureText("工资低，被迫下海，还望大家多多支持，多多棒槌，宣传一下下")>600px){4    font_size--;5    context.font = font_size+''px arial";     6 }7 context.fillText("工资低，被迫下海，还望大家多多支持，多多棒槌，宣传一下下",10,10);

View Code

绘制变换，即是如css3中transform变换，创建绘制上下文时，会以默认值初始化变换矩阵，在默认的变换矩阵中下，所有处理是直接绘制。有如下这些变化：

rotate(angle);//angle是弧度

scale(x1,y1);//放大缩小，在x方向乘以x1，在y方向乘以y1

translate(x,y);//将坐标原点移动到(x,y)，好了(x,y)它就变成原点了

transform(m1_1,m1_2,m2_1,m2_2,dx,dy);//直接改变矩阵

setTransform(m1_1,m1_2,m2_1,m2_2,dx,dy);//设置矩阵，对于矩阵详解：http://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-矩阵/

排列方式：，其对应的排列方式是这样的，与transform: matrix(a,b,c,d,e,f);还是不一样滴！

绘制图像，把一副图像绘制到画布上，，可以使用drawImage()方法，可以这样

1 var image = document.images[0]; //获取文档中第一张图像2 context.drawImge(image,x,y,width,height,rx,ry,rwidth,rheight);//各个参数分别是：image图像对象，源图像的x坐标、源图像的y坐标，源图像的宽度，源图像的高度，目标图像的x坐标，目标图像的y坐标，目标图像的宽度，目标图像的高度，一般只需要前五个参数，就可以画出一个图像出来了！3 4 //可以怎么理解，如context.drawImage(image,0,10,50,50,0,100,40,60);原始图像是以(0,10)为起点，高宽都为50px，但我们想要它实际显示在(0,100),宽40，高60，感觉实际上并没什么用

View Code

 阴影，有以下这几个属性:

var context = drawing.getContext('2d');context.shadowColor = "#000";//阴影颜色context.shadowOffsetX = 5;//阴影x的偏移量context.shadowOffsetX = 5;//阴影y的偏移量context.shadowBlur = 4;//阴影的模糊距离

View Code

 渐变，分为线性渐变和径祥渐变，分别是createLinearGradient()和createRadialGradient()，使用如下：

 1 var gradient = context.createLinearGradient(30,30,70,70);//创建一个线性渐变区域,矩形区域，要使渐变覆盖整个矩形，需要有时还需要匹配一下坐标 2  3 gradient.addColorStop(0,"white"); //创建色标的开始位置信息 4  5 gradient.addColorStop(1,"black");//创建色标的结束位置信息 6  7 context.fillStyle= gradient; 8  9 conetxt.fillRect(30,30,40,40);10 11 12 13 var gradient = context.createRadialGradient(50,50,10,50,50,30);//创建一个径向渐变区域，这里是由两个同心圆组成的，(50,50)为圆的中心点，一个半径为10，一个半径为30，便可以向外扩散，形成径向渐变了14 15 gradient.addColorStop(0,"white"); //创建色标的开始位置信息16 17 gradient.addColorStop(1,"black");//创建色标的结束位置信息18 19 context.fillStyle= gradient;20 21 conetxt.fillRect(30,30,40,40);

View Code

 模式，意思就是重复的图像来填充画布了，也可以叫做纹理填充，一般使用的方法createPattern，使用如下：

1 var image = document.images[0];2 3 var pattern= context.createPattern(image,'repeat');//对应有repeat、repeat-x、repeat-y、no-repeat4 5 context.fillStyle = pattern;6 7 conetext.fillRect(10,10,150,150);

View Code

对于canvas绘图的基础就差不多怎么多了，以后还需努力学习，将其用在实际项目上，而对于webGL这种3d上下文就暂时不去学习，这几天看得晕晕的，感觉目前对自己也没什么用处！

 

原标题：canvas绘图基础

关键词：