Javascript学习笔记10 Canvas绘图

基本用法

要使用<canvas>元素，必须先设置width和height属性，指定画布大小。注意width和height是不带单位的

<canvas id="drawing" width="200" height="200">drawing</canvas>

要在这块画布上绘图，需要使用getContext()方法取得绘图上下文,传入2d，就得到2d绘图上下文

var drawing = document.getElementById("drawing");
var context = drawing.getContext("2d");

使用toDataURL()方法可以导出绘制的图像（图像不能来自其他域），接受一个参数，即MIME类型，默认为png格式

var imgURI = drawing.toDataURL("img/png");

var img = document.createElement("img");
img.src = imgURL;
document.body.appendChild(img);

2D上下文

2d上下文的坐标开始于<canvas>元素的左上角，原点坐标为（0,0），x越大，越靠右，y越大，越靠下

设置描边和填充样式

context.strokeStyle = "red";   //设置描边颜色
context.fillStyle = "#0000ff";  //设置填充颜色

绘制矩形

fillRect()绘制有填充颜色的矩形、strokeRect()描边矩形、clearRect()清除矩形区域。他们都接受4个参数，矩形的x，y坐标以及宽度和高度

context.fillStyle = "#0000ff";  //设置填充颜色
context.fillRect(10,10,50,50)； //在坐标点（10,10）绘制宽50高50的矩形

context.strokeStyle = "red";   //设置描边颜色
context.strokeRect(30,30,50,50);  //描边矩形

context.clearRect(40,40,10,10);  //清除目标矩形区域中的绘图

绘制路径

首次绘制路径，必须调用beginPath()方法

• arc(x,y,radius,startAngle,endAngle,counterclockwise)：以(x,y)为圆心绘制一条弧线，radius为半径，startAngle和endAngle为起始和终止角度（用弧度表示），counterclockwise为绘制方向，false为顺时针。
• arcTo(x1,y1,x2,y2,radius)：从上一点开始绘制弧线到（x2,y2），并以给定半径穿过（x1,y1）
• lineTo(x,y)：从上一点开始绘制直线，到（x,y）为止
• moveTo(x,y)：将绘图图标移动到(x,y)，不画图
• rect(x,y,width,height)：从点(x,y)绘制一个指定宽高的矩形路径。其与fillRect()和strokeRect()不同，它是路径而不是独立的形状
• closePath()：闭合路径

context.beginPath();
context.arc(100,100,99,0,2*Math.PI,false);  //绘制圆路径

绘制完路径后，你需要对路径描边或填充等，否则其不会在画布上显示

context.stroke();  //以stokeStyle的样式描边
context.fill();   //以fillStyle的样式填充
context.clip();  //创建剪切区域

isPointInPath()：确认某点是否在路径上，接受x和y坐标，若在则返回true

绘制文本

fillText()和strokeText()，他们都接受4个参数：绘制的文本字符串、x和y坐标、可选的最大像素宽度

字体属性：

• font：文本样式、大小及字体，例如”10px Arial”
• textAlign：文本对齐方式，可取的值有start、end、left、right、center
• textBaseline：文本的基线，可能的值有top、middle、bottom等

context.font = "bold 10px Arial";
context.textAlign = "center";
context.textBaseline = "middle";
context.fillText("12",100,100);  //绘制文本

measureText()计算绘制文本的宽度，返回一个对象，其具有width属性，可用其测试文本宽度是否合适

var textWidth = context.measureText("Hello world").width;

变换

通过上下文的变换，可以把处理后的图像绘制到画布上

• rotate(angle)：围绕原点旋转图像angle弧度
• scale(scaleX,scaleY)：缩放图像，在x方向乘以scaleX，在Y方向乘以scaleY
• translate(x,y)：将坐标原点移动到(x,y)
• transform(m1_1,m1_2,m2_1,m2_2,dx,dy)：直接修改变换矩阵，方式是乘以如下矩阵

m1_1    m1_2    dx
m2_1    m2_2    dy
0       0       1

• setTransform(m1_1,m1_2,m2_1,m2_2,dx,dy)：将变换矩阵重置为默认状态，然后再调用transform()
• save()：将当前的上下文状态压栈保存，例如fillStyle和strokeStyle属性等
• restore()：将上次保存的上下文状态恢复，类似于出栈操作，与save()方法连用

绘制图像

最简单的调用方式就是传入一个<img>元素，以及绘制图像的起点x和y坐标

var image = document.images[0];
context.drawImage(image,10,10);

还可以传入绘制图像的宽度和高度进行缩放图像

context.drawImage(image,10,10,50,50);

可以将图像的某一区域绘制到上下文中

context.drawImage(image,0,10,50,50，0,100,40,60);
//将起点为（0,10），宽度为50，高度为50的图像部分绘制到起点（0,100），宽度为40，高度为60的区域内

阴影

设置以下属性，为形状和路径自动绘制出阴影

• shadowColor：用CSS颜色格式表示阴影颜色，默认为黑色
• shadowOffsetX：形状或路径x轴方向的阴影偏移量，默认为0
• shadowOffsetY：形状或路径y轴方向的阴影偏移量，默认为0
• shadowBlur：模糊的像素数，默认为0，即不模糊

渐变

渐变由CanvasGradient实例表示，创建线性渐变使用createLinearGradient()方法，其接受4个参数，起点的x，y坐标和终点的x，y坐标

var gradient = context.createLinearGradient(30,30,70,70);

接着使用addColorStop()方法来指定色标，接受两个参数，位置（0-1）及位置对应颜色，位置中间的颜色会渐变

gradient.addColorStop(0,"white");
gradient.addColorStop(1,"black");

将渐变实例赋给fillStyle或strokeStyle对象，进行画图

context.fillStyle = gradient;
context.fillRect(30,30,50,50);

创建径向渐变使用createRadialGradient()方法，接受6个参数，对应着两个圆的圆心和半径，前面3个参数为起点圆的圆心坐标和半径，后面则是终点圆的圆心坐标和半径

var gradient = createRadialGradient(55,55,10,55,55,30)

模式

模式即是用重复的图像来填充或描边图形
创建模式使用createPattern()方法，接受两个参数，一个<img>元素对象或另一个<canvas>元素，及定义重复方式的字符串（”repeat”,”repeat-x”,”repeat-y”,”no-repeat”）

var image = document.images[0];
var pattern = context.createPattern(image,"repeat");

context.fillStyle = pattern;
context.fillRect(10,10,150,150);

使用图像数据

使用getImageData()方法可以取得图像原始数据，其返回一个对象，该对象具有三个属性：width,height及保存图像像素的data数组

var imageData = context.getImageData();

在data数组中，每个像素由相邻的四个数组项组成，分别是红、绿、蓝和透明度值，因此第一个像素对应数组的前4项

var data = imageData.data;

var red = data[0],
    green = data[1],
    blue = data[2],
    alpha = data[3];

可以通过修改每个像素的红蓝绿及透明度值达到修改图像的目的

合成

globalAlpha属性用于设置全局透明度，设置以后，后续的所有绘图都基于此透明度，绘图完成后，可将全局透明度设置为默认值0

context.globalAlpha = 0.5;

globalCompositionOperation属性表示后绘制的图形怎样与先绘制的图形结合，及值为一个字符串(source-over,source-in等)，这个属性不同的浏览器之间可能存在较大差别

globalCompositionOpearation = "source-in";  //后绘制的图像与先绘制的图像重叠部分可见，其余部分透明