JavaScript Canvas 绘图

Canvas 绘图

基本语法

要使用 Canvas绘图 必须要定义宽度和高度，指定绘图区域的大小

<canvas id="drawing" width="200" height="200">A drawing of something .</canvas>

要在Canvas这块画布上画图，需要先获取绘图的上下文

var drawing = document.getElementById("drawing");
if(drawing.getContext){
    var context = drawing.getContext("2d");
    //更多的绘图代码
}

使用 toDataURL()方法，可以导出在canvas 元素上绘图的图像

if(drawing.getContext){
   var imgURI = drawing.toDataURL("image/png");
   var image = document.createElement("img");
   image.src = imgURL;
   document.body.appendChild(image);
}

2D上下文

大多数2D上下文操作都会细分为填充和描边两个操作，而操作的结果取决于两个属性：fillStyle 和 strokeStyle
+ fillStyle:填充样式
+ strokeStyle：描边样式

绘制矩形

矩形是唯一一种可以直接在2D上下文中绘制的形式，与矩形有关的方法和属性包括：
+ 方法：
- fillRect(): 在画布上绘制的矩形会填充指定的颜色
- strokeRect():在画布上绘制的矩形会使用指定的颜色描边
- clearRect();清除画布上的矩形区域
+ 属性
- lineGap属性：可以控制线条末端的形状是平头、圆头还是方头（”butt”,”round”,”square”)
- lineJoin属性：可以控制线条相交的方式是圆交、斜交、还是斜接（”round”,”bevel”,”miter”)

绘制路径

• beginPath()方法：表示开始绘制新的路径
  
  • arc(x,y,radius,startAngle,endAngle,counterclockwise)
  • arcTo(x1,y1,x2,y2,radius)
  • bezierCurveTo(c1x,c1y,c2x,c2y,x,y)
  • lineTo(x,y)
  • moveTo(x,y)
  • quadraticCurveTo(cx,cy,x,y)
  • rect(x,y,width,height)
• closePath()
• fillStyle,fill()
• strokeStyle,stroke()

var drawing = document.getElementById("drawing");
if(drawing.getContext){
    context.beginPath();
    context.arc(100,100,99,0,2*Math.PI,false)
    context.moveTo(194,100);
    context.arc(100,100,94,0,2*Math.PI,false);
    context.moveTo(100,100);
    context.lineTo(100,15);
    context.moveTo(100,100);
    context.lineTo(35,100);
    context.stroke();
}

在2D绘图中，路径是一种主流的绘图方式，因为路径能为要绘制的图形提供更多的控制，由于路径的使用很频繁，所以就有一个名为 isPointInPath() 的方法，这个方法接收x,y两个参数，用于在路径被关闭前确定上画布上的某个点是否在路径之上。

if(context.isPointInPath(100,100)){
    alert("point(100,100) is in the path");
}

绘制文本

• 两个方法：这两个方法都接收4个参数：要绘制的文本字符串，x,y,可选的最大像素宽度
  
  • fillText()
  • strokeText()
• 三个属性：
  font：表示文本样式、字体及大小。
  
  • textAlign：表示文本的对齐方式（start end left right center）建议使用start 和end ，不要使用left和right
  • textBaseline：表示文本的基线（top hanging middle alphabetic ideographic bottom

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

• measureText()方法利用font textAlign 和 textBaseline 当前值计算指定文本的大小。

变换

• 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();保存设置，使得设置进入到一个栈结构中
• restore();恢复设置

context.fillStyle = "#ff0000";
context.save();
context.fillStyle = "#00ff00";
context.translate(100,100);
context.save();

context.fillStyle = "#0000ff";
context.fillRect(0,0,100,200);//从起点（100,100）开始绘制蓝色矩形

context.restore();
context.fillRect(10,10,100,200);//从起点（110,110）开始绘制绿色矩形
context.restore();
context.fillRect(0,0,100,200);//从起点（0,0）绘制红色矩形

上述我们用save保存了颜色的设置，但是注意translate平移变换仍然起作用。即save方法保存的只是对绘图上下文的设置和变换，不会保存绘图上下文的内容。

绘制图像

var image = document.images[0];
context.drawImage(image,10,10);//image x y
context.drawImage(image,50,10,20,30);//image x y width height
context.drawImage(image,0,10,50,50,0,100,40,60);//image 源图像的x y width height 目标图像的 x y width height；绘制源图像的一部分到目标图像上。

阴影

2D上下文会根据以下几个属性的值，自动为形状或路径绘制出阴影。
+ shadowColor：用CSS颜色格式表示的阴影颜色，默认为黑色
+ shadowOffsetX：形状或路径x轴方向的阴影偏移量，默认为0
+ shadowOffsetY:形状或路径y轴方向的阴影偏移量，默认为0
+ shadowBlur:模糊的像素数，默认为0 ，不模糊

渐变

var gradient = context.createLinearGradient(30,30,70,70);//x1,y1,x2,y2
gradient.addColorStop(0,"white");
gradient.addColorStop(1,"black");
context.fillStyle = gradient;
var gradient2 = context.createRadialGradient(55,55,10,55,55,30);起点的圆心（x,y)和半径，终点的圆心x,y和半径

模式

模式其实就是重复的图像，可以用来填充或描边图形。调用createPattern()方法并传入两个参数

var image = document.images[0];
var pattern = context.createPattern(image,"repeat");
//绘制矩形
context.fillStyle = pattern;
context.fillRect(10,10,150,150);

注意：模式与渐变一样，都是从画布的原点（0,0）开始的，将填充样式设置为模式对象，只表示在某个特定的区域内显示重复的图像，而不是要从某个位置开始绘制重复的图像。

使用图像数据

2D上下文的一个明显的长处就是可以通过 getImageData（）取得原始图像数据，这个函数接收四个参数

var imageData = context.getImageData(10,5,50,50);//x y width height
var data = imageData.data,
    red = data[0],
    green = data[1],
    blue = data[2],
    alpha = data[3];

WebGL

WebGL是针对Canvas的3D上下文，与其他Web技术不同，WebGL并不是W3C的标准，而是有Khronos Group制定的。其他官方网站是这样介绍的：Khronos Group 是一个非盈利的由会员资助的协会，专注于为并行计算以及各种平台和设备上的图形及动态媒体制定无版税的开发标准.