《JavaScript高级程序设计》笔记：使用Canvas绘图（15）

基本用法

要使用<canvas>元素，必须先设置其width和height属性，指定可以绘图的区域大小。出现在开始和结束标签中的内容是后备信息，如果浏览器不支持<canvas>元素，就会显示这些信息。如下例子：

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

与其它元素一样，<canvas>元素对应的DOM元素对象也有width和height属性，可以随意修改。而且，也可以通过CSS为该元素添加样式，如果不添加任何样式或者不绘制任何图形，在页面中是看不到该元素的。

要在这块画布（canvas）上绘图，需要取得绘图上下文。如下代码：

var drawing = document.getElementById('drawing');
//确定浏览器支持<canvas>元素
if(drawing.getContext){
    var context = drawing.getContext("2d");
    //更多代码
}

使用toDataURL()方法，可以导出在<canvas>元素上绘制的图像。这个方法接收一个参数，即图像的MIME类型格式，而且适合用于创建图像的任何上下文。比如，要取得画布中的一副PNG格式的图像，如下代码：

var drawing = document.getElementById('drawing');
//确定浏览器支持<canvas>元素
if(drawing.getContext){
    //取得图像数据的URI 
    var imgURI = drawing.toDataURL("image/png");
    
    //显示图像
    var image = document.createElement("img");
    image.src = imgURI;
    document.body.appendChild(image);    
}

2D上下文

使用2D绘图上下文提供的方法，可以绘制简单的2D图形，比如矩形、弧线和路径。2D上下文的坐标开始于<canvas>元素的左上角，原点坐标是（0,0）。所有坐标值都基于这个原点计算。x值越大越靠右，y值越大越靠下。

填充和描边

2D上下文的两种基本绘图操作是填充和描边。填充，就是用指定的样式（颜色、渐变或图像）填充图形；描边，就是只在图形的边缘画线。大多数2D上下文操作都会细分为填充和描边两个操作，而操作的结果取决于两个属性：fillStyle和strokeStyle。

这两个属性的值可以是字符串、渐变对象或模式对象。而且他们的默认值都是“#000000”。如果为他们指定表示颜色的字符串值，可以使用CSS中指定颜色值的任何格式，包括颜色名、十六进制码、rgb、rgba、hsl或hsla，如下例子：

var drawing = document.getElementById('drawing');
//确定浏览器支持<canvas>元素
if(drawing.getContext){
    var context = drawing.getContext("2d");
    context.strokeStyle = "red";
    context.fillStyle = "#0000ff";
}

绘制矩形

矩形是唯一一种可以直接在2D上下文中绘制的形状。与矩形有关的方法包括fillRect()、strokeRect()和clearRect()。这三个方法都能接收4个参数：矩形的x坐标、矩形的y坐标、矩形的宽度和高度。这些参数的单位都是像素。

首先fillRect()方法在画布上绘制的矩形会填充指定的颜色。填充的颜色通过fillStyle属性指定，比如：

var drawing = document.getElementById('drawing');
//确定浏览器支持<canvas>元素
if(drawing.getContext){
    var context = drawing.getContext("2d");
    
    //绘制红色矩形
    context.fillStyle = "#ff0000";
    context.fillRect(10,10,50,50);
    
    //绘制半透明的蓝色矩形
    context.fillStyle = "rgba(0,0,255,0.5)";
    context.fillRect(30,30,50,50);
}

strokeRect()方法在画布上绘制的矩形会使用指定的颜色描边。描边颜色通过strokeStyle属性指定。比如：

var drawing = document.getElementById('drawing');
//确定浏览器支持<canvas>元素
if(drawing.getContext){
    var context = drawing.getContext("2d");
    
    //绘制红色描边矩形
    context.strokeStyle = "#ff0000";
    context.strokeRect(10,10,50,50);
    
    //绘制半透明的蓝色描边矩形
    context.strokeStyle = "rgba(0,0,255,0.5)";
    context.strokeRect(30,30,50,50);
}

以上代码绘制了两个重叠的矩形。不过，这两个矩形都只有框线，内部并没有填充颜色。

最后，clearRect()方法用于清除画布上的矩形区域。本质上，这个方法可以把绘制上下文中的某一矩形区域变透明。通过绘制形状然后再清除指定区域，就可以生成有意思的效果，例如把某个形状切掉一块。如下例子：

var drawing = document.getElementById('drawing');
//确定浏览器支持<canvas>元素
if(drawing.getContext){
    var context = drawing.getContext("2d");
    
    //绘制红色矩形
    context.fillStyle = "#ff0000";
    context.fillRect(10,10,50,50);
    
    //绘制半透明的蓝色矩形
    context.fillStyle = "rgba(0,0,255,0.5)";
    context.fillRect(30,30,50,50);
    
    //在两个矩形重叠的地方清除一个小矩形
    context.clearRect(40,40,10,10);
}

绘制路径

2D绘制上下文支持很多在画布上绘制路径的方法。通过路径可以创造出复杂的形状和线条。要绘制路径，首先必须调用beginPath()方法，表示要开始绘制新路径。然后，在通过下列方法来实际的绘制路径。

arc(x,y,radius,startAngle,endAngle,counterclockwise)：以（x,y）为圆心绘制一条弧线，弧线半径为radius,起始和结束角度（用弧度表示）分别为startAngle和endAngle。最后一个参数表示startAngle和endAngle是否按逆时针方向计算，值为false表示按照顺时针方法计算。
arcTo(x1,y1,x2,y2,radius)：从上一点开始绘制一条弧线，到（x2,y2）为止，并且以给定的半径radius穿过（x1,y1）。
bezierCurveTo(c1x,c1y,c2x,c2y,x,y)：从上一点开始绘制一条曲线，到（x,y）为止，并且以（c1x,c1y）和（c2x,c2y）为控制点。
lineTo(x,y)：从上一点开始绘制一条直线，到（x,y）为止。
moveTo(x,y)：将绘图游标移动到（x,y）,不画线。
quadraticCurveTo(cx,cy,x,y)：从上一点开始绘制一条二次曲线，到（x,y）为止，并且以（cx,cy）为控制点。
rect(x,y,width,height)：以点（x,y）开始绘制一个矩形，宽度和高度分别为width和height指定。这个方法绘制的是矩形路径，而不是strokeRect()和fillRect()所绘制的独立的形状。

创建了路径后，接下来有几种可能的选择。如果想绘制一条想连接到路径起点的线条，可以调用closePath()。如果路径已经完成，你想用fillStyle填充它，可以调用fill()方法。另外，还可以调用stroke()方法对路径描边，描边使用的是strokeStyle。最后还可以调用clip()，这个方法可以在路径上创建一个剪切区域。

如下例子，绘制一个不带数字的时钟表盘。

var drawing = document.getElementById('drawing');
//确定浏览器支持<canvas>元素
if(drawing.getContext){
    var context = drawing.getContext("2d");
    
    //开始路径
    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.strokeStyle = "#ff0000";
    context.stroke();
}

由于路径的使用很频繁，所以就有了一个名为isPointInPath()的方法。这个方法接收x和y坐标作为参数，用于在路径被关闭之前确定画布上的某一点是否位于路径上，例如：

if(context.isPointInPath(100,100)){
        console.log("Point(100,100) is in the path")
    }

绘制文本

绘制文本主要有两个方法：fillText()和strokeText()。这两个方法都可以接收4个参数：要绘制的文本字符串、x坐标、y坐标和可选的最大像素宽度。而且，这两个方法都以下列3个属性为基础。

font：表示文本样式、大小及字体，用CSS指定字体的格式来指定，如“10px Arial”。
textAlign：表示文本对齐方式。可能的值有“start”、“end”、“left”、“right”和“center”。建议使用“start”和“end”,不要使用“left”和“right”,因为前两者的意思更稳妥，能同时适合从左到右和从右到左显示（阅读）的语言。
textBaseline：表示文本的基线。可能的值有“top”、“hanging”、“middle”、“alphabetic”、“ideographic”和“bottom”。

这几个属性都有默认值，因此没必要每次使用它们都重新设置一遍值。fillText()方法使用fillStyle属性绘制文本，而strokeText()方法使用strokeStyle属性为文本描边。相对来说，还是使用fillText()的时候更多，因为该方法模仿了在网页中正常显示文本。例如下面代码在前面创建的表盘上方绘制了数字12：

context.font = "bold 14px Arial";
context.textAlign = "center";
context.textBaseline = "middle";
context.fillText("12",100,20);

上面坐标（100,20）表示的是文本水平和垂直中点的坐标。

//正常    
context.font = "bold 14px Arial";
context.textAlign = "center";
context.textBaseline = "middle";
context.fillText("12",100,20);

//起点对齐
context.textAlign = "start";
context.fillText("12",100,40);

//终点对齐
context.textAlign = "end";
context.fillText("12",100,60);

由于绘制文本比较复杂，特别是需要把文本控制在某一区域中的时候，2D上下文提供了辅助确定文本大小的方法measureText()。这个方法接收一个参数，即要绘制的文本；返回一个TextMetrics对象。返回的对象目前只有一个width属性，但将来还会增加更多度量属性。

measureText()方法利用font、textAlign和textBaseline的当前值计算指定文本的大小。比如，假设你想在一个140像素宽的矩形区域中绘制文本 Hello world!，下面的代码从100像素的字体大小开始递减，最终会找到合适的字体大小。

var fontSize = 100;
context.font = fontSize + "px Arial";
while(context.measureText("Hello world!").width > 140){
    fontSize--;
    context.font = fontSize + "px Arial";
}
context.fillText("Hello world!",10,100);
context.fillText("Font size is" + fontSize + "px", 10,150);

变换

通过上下文的变换，可以把处理后的图像绘制到画布上。2D绘制上下文支持各种基本的绘制变换。创建绘制上下文时，会以默认值初始化变换矩阵，在默认的变换矩阵下，所有处理都按描述直接绘制。为绘制上下文应用变换，会导致不同的变换矩阵应用处理，从而产生不同的结果。

可以通过如下方法来修改变换矩阵。

rotate(angle)：围绕原点旋转图像angle弧度。
scale(scaleX,scaleY)：缩放图像，在x方向乘以scaleX，在y方向乘以scaleY。scaleX和scaleY的默认值都是1.0。
translate(x,y)：将坐标原点移动到(x,y)。执行这个变换后，坐标（0,0）会变成之前由（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()。

变换有可能很简单，也有可能很复杂，这都要视情况而定。比如，就那前面的绘制表针来说，如果把原点变换到变盘的中心，然后在绘制表针就容易多了，如下例子：

var drawing = document.getElementById('drawing');
//确定浏览器支持<canvas>元素
if(drawing.getContext){
    var context = drawing.getContext("2d");
    
    //开始路径
    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.translate(100,100);
    
    //绘制分针
    context.moveTo(0,0);
    context.lineTo(0,-85);
    
    //绘制时针
    context.moveTo(0,0);
    context.lineTo(-65,0);
    
    //绘制描边
    context.strokeStyle = "#ff0000";
    context.stroke();
}

把原点变换到时钟表盘的中心点（100,100）后，在同一方向上绘制线条就变成了简单的数学问题了。所有数学计算都基于（0,0），而不是（100,100）。还可以更进一步，像下面这样使用rotate()方法旋转时针的表针。

var drawing = document.getElementById('drawing');
//确定浏览器支持<canvas>元素
if(drawing.getContext){
    var context = drawing.getContext("2d");
    
    //开始路径
    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.translate(100,100);
    
    //旋转表针
    context.rotate(1);
    
    //绘制分针
    context.moveTo(0,0);
    context.lineTo(0,-85);
    
    //绘制时针
    context.moveTo(0,0);
    context.lineTo(-65,0);
    
    //绘制描边
    context.strokeStyle = "#ff0000";
    context.stroke();
}

虽然没有什么办法把上下文中的一切都重置回默认值，但有两个方法可以跟踪上下文的状态变化。如果你知道将来还要返回某组属性与变换的组合，可以调用save()方法。调用这个方法后，当时的所有设置都会进入一个栈结构，得以妥善保管。然后可以对上下文进行其它修改。等想要回到之前保存的设置时，可以调用restore()方法，在保存设置的栈结构中向前返回一级，恢复之前的状态。连续调用save()可以把更多设置保存到栈结构中，之后在连续调用restore()则可以一级一级返回，如下例子：

var drawing = document.getElementById('drawing');
//确定浏览器支持<canvas>元素
if(drawing.getContext){
    var context = drawing.getContext("2d");
    
    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()方法保存的只是对绘图上下文的设置和变换。不会保存绘图上下文的内容。

绘制图像

使用drawImage()方法可以把图像绘制到画布上。调用这个方法时，可以使用三种不同的参数组合。最简单的调用方式是传入一个HTML<img>元素，以及绘制该图像的起点的x和y坐标，如下：

window.onload = function(){
    var drawing = document.getElementById('drawing');
    //确定浏览器支持<canvas>元素
    if(drawing.getContext){
        var context = drawing.getContext("2d");
        var img = document.images[0];
        context.fillStyle = "#000000";
        context.fillRect(0,0,200,200);
        context.drawImage(img,10,10);
    }
}

如果你想改变绘制后的图像大小，可以多传两个参数，分别表示目标宽度和目标高度。如下：

window.onload = function(){
    var drawing = document.getElementById('drawing');
    //确定浏览器支持<canvas>元素
    if(drawing.getContext){
        var context = drawing.getContext("2d");
        var img = document.images[0];
        context.fillStyle = "#000000";
        context.fillRect(0,0,200,200);
        context.drawImage(img,10,10,100,200);
    }
}

执行后图像的大小变成了100*200。

除了上述两种方式，还可以选择把图像中的某个区域绘制到上下文中。drawImage()方法的这种调用方式总共需要传入9个参数：要绘制的图像、源图像的x坐标、源图像的y坐标、源图像的宽度、源图像的高度、目标图像的x坐标、目标图像的y坐标、目标图像的宽度、目标图像的高度。如下：

context.drawImage(img,0,10,50,50,0,100,40,60);

这行代码只把原始图像的一部分绘制到画布上。原始图像的这一部分起点为（0,10）,宽和高都是50像素。最终绘制到上下文中的图像的起点为（0,100），而大小变成了40*60像素。

阴影

2D上下文会根据以下几个属性的值，自动为形状或路径绘制出阴影。

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

这些属性都可以通过context对象来修改。

var drawing = document.getElementById('drawing');
//确定浏览器支持<canvas>元素
if(drawing.getContext){
    var context = drawing.getContext("2d");
    
    //设置阴影
    context.shadowOffsetX = 5;
    context.shadowOffsetY = 5;
    context.shadowBlur = 4;
    context.shadowColor = "rgba(0,0,0,0.5)";
    
    //绘制红色矩形
    context.fillStyle = "#ff0000";
    context.fillRect(10,10,50,50);
    
    //绘制蓝色矩形
    context.fillStyle ="rgba(0,0,255,1)";
    context.fillRect(30,30,50,50);
}

渐变

渐变由CanvasGradient实例表示，很容易通过2D上下文来创建和修改。要创建一个新的线性渐变，可以调用createLinearGradient()方法。这个方法接收4个参数：起点的x坐标、起点的y坐标、终点的x坐标、终点的y坐标。调用这个方法后，它就会创建一个指定大小的渐变，并返回CanvasGradient对象的实例。

创建了渐变对象后，下一步就是使用addColorStop()方法来指定色标。这个方法接收2个参数：色标位置和CSS颜色值。色标位置是一个0（开始的颜色）到1（结束的颜色）之间的数字。如下：

var drawing = document.getElementById('drawing');
//确定浏览器支持<canvas>元素
if(drawing.getContext){
    var context = drawing.getContext("2d");
    
    var gradient = context.createLinearGradient(30,30,70,70);
    gradient.addColorStop(0,"white");
    gradient.addColorStop(1,"black");
    
    //绘制红色矩形
    context.fillStyle = "#ff0000";
    context.fillRect(10,10,50,50);
    
    //绘制渐变矩形
    context.fillStyle =gradient;
    context.fillRect(30,30,50,50);
}

确保渐变也形状对齐，如下代码：

function createRectLinearGradient(context,x,y,width,height){
    return context.createLinearGradient(x,y,x+width,y+height);
}

这个函数基于起点的x和y坐标以及宽度和高度值来创建渐变对象，从而让我们可以在fillRect()中使用相同的值，如下：

function createRectLinearGradient(context,x,y,width,height){
    return context.createLinearGradient(x,y,x+width,y+height);
}

var drawing = document.getElementById('drawing');
//确定浏览器支持<canvas>元素
if(drawing.getContext){
    var context = drawing.getContext("2d");
    
    var gradient = createRectLinearGradient(context,30,30,50,50);
    gradient.addColorStop(0,"white");
    gradient.addColorStop(1,"black");
    
    //绘制红色矩形
    context.fillStyle = "#ff0000";
    context.fillRect(10,10,50,50);
    
    //绘制渐变矩形
    context.fillStyle =gradient;
    context.fillRect(30,30,50,50);
}

要创建径向渐变（或放射渐变），可以使用createRadialGradient()方法。这个方法接收6个参数，对应这两个圆的圆心和半径。前三个参数指定的是起点圆的原心（x和y）以及半径，后三个参数指定的是终点圆的原心（x和y）以及半径。

如果想从某个形状的中心点开始创建一个向外扩散的径向渐变效果，就要将两个圆定义为同心圆。比如，拿前面创建的矩形来说，径向渐变的两个圆的圆心都应该在（55,55），因为矩形的区域是从（30,30）到（80,80），看下面代码：

var drawing = document.getElementById('drawing');
//确定浏览器支持<canvas>元素
if(drawing.getContext){
    var context = drawing.getContext("2d");
    
    var gradient = context.createRadialGradient(55,55,10,55,55,30);
    gradient.addColorStop(0,"white");
    gradient.addColorStop(1,"black");
    
    //绘制红色矩形
    context.fillStyle = "#ff0000";
    context.fillRect(10,10,50,50);
    
    //绘制渐变矩形
    context.fillStyle =gradient;
    context.fillRect(30,30,50,50);
}

效果如下所示：

模式

模式其实就是重复的图像，可以用来填充或描边图形。要创建一新模式，可以调用createPattern()方法并传入两个参数：一个THML<img>元素和一个表示如何重复图像的字符串。其中，第二个参数的值与CSS的background-repeat的属性值相同，包括“repeat”、“repeat-x”、“repeat-y”和“no-repeat”。如下例子：

window.onload = function(){
    var drawing = document.getElementById('drawing');
    //确定浏览器支持<canvas>元素
    if(drawing.getContext){
        var context = drawing.getContext("2d");
        
        var image = document.images[0],
            pattern = context.createPattern(image,"repeat");
        
        //绘制矩形
        context.fillStyle =pattern;
        context.fillRect(10,10,150,150);
    }
}

效果如图：

createPattern()方法的第一个参数也可以是一个<video>元素，或者另一个<canvas>元素。

使用图像数据

2D上下文的一个明显长处就是，可以通过getImageData()取得原生图像数据。这个方法接收4个参数：要取得其数据的画面区域的x和y坐标以及该区域的像素宽度和高度。例如要取得左上角坐标为（10,5）、大小为50*50像素区域的图像数据，如下代码：

var imageData = context.getImageData(10,5,50,50);

这里返回的对象是imageData的实例。每个imageData对象都有三个属性：width、height和data。其中data属性是一个数组，保存着图像中每一个像素的数据。在data数组中，每一个像素用4个元素来保存，分别表示红、绿、蓝和透明度值。因此，第一个像素的数据就保存在数组的第0到第3个元素中，例如：

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

数组中每个元素的值都介于0到255之间（包括0和255）。能够直接访问到原始图像数据，就能够以各种方式来操作这些数据。例如，通过修改图像数据，可以像下面这样创建一个简单的灰阶过滤器。

window.onload = function(){
    var drawing = document.getElementById('drawing');
    //确定浏览器支持<canvas>元素
    if(drawing.getContext){
        var context = drawing.getContext("2d"),
            image = document.images[0],
            imageData,data,
            i,len,average,
            red,green,blue,alpha;
            
        //绘制原始图像
        context.drawImage(image,0,0);
        
        //取得图像数据
        imageData = context.getImageData(0,0,image.width,image.height);
        data = imageData.data;
        
        for( i = 0, len = data.length; i < len; i+=4){
            red = data[i];
            green = data[i+1];
            blue = data[i+2];
            alpha = data[i+3];
            
            //求得rgb平均值
            average = Math.floor((red + green + blue) / 3);
            
            //设置颜色值,透明度不变
            data[i] = average;
            data[i+1] = average;
            data[i+2] = average;
        }
        
        //回写图像数据并显示结果
        imageData.data = data;
        context.putImageData(imageData,0,0);
    }        
}

如上代码，在把data数组回写到imageData对象后，调用putImageData()方法把图像数据绘制到画布上。最终得到了图像的黑白版。

效果如下：

合成

还有两个会应用到2D上下文中所有绘制操作的属性：globalAlpha和globalCompositionOperation。其中globalAlpha是一个介于0到1之间的值（包括0和1），用于指定所有绘制的透明度。默认值为0。如果所有后续操作都要基于相同的透明度，就可以先把globalAlpha设置为适当的值，然后绘制，最后再把它设置为默认值0。如下例子：

var drawing = document.getElementById('drawing');
//确定浏览器支持<canvas>元素
if(drawing.getContext){
    var context = drawing.getContext("2d");
    
    //绘制红色矩形
    context.fillStyle = "#ff0000";
    context.fillRect(10,10,50,50);
    
    //修改全局透明度
    context.globalAlpha = 0.5;
    
    //绘制蓝色矩形
    context.fillStyle = "rgba(0,0,255,1)";
    context.fillRect(30,30,50,50);
    
    //重置全局透明度
    context.globalAlpha = 0;    
}

在上面例子中，我们把蓝色矩形绘制到了红色矩形上面，因为在绘制蓝色矩形前，globalAlpha设置为了0.5，所以蓝色矩形会呈现半透明效果，透过它可以看到下面的红色矩形。

第二个属性globalCompositionOperation表示后绘制的图形怎样与先绘制的图形结合。这个属性的值是字符串，可能的值如下：

source-over（默认值）：后绘制的图形位于先绘制的图形上方。
source-in：后绘制的图形与先绘制的图形重叠的部分可见，两者其它部分完全透明。
source-out：后绘制的图形与先绘制的图形不重叠的部分可见，先绘制的图形完全透明。
source-atop：后绘制的图形与先绘制的图形重叠的部分可见，先绘制图形不受影响。
destination-over：后绘制的图形位于先绘制的图形下方，只有之前透明像素下的部分才可见。
destination-in：后绘制的图形位于先绘制的图形下方，两者不重叠的部分完全透明。
destination-out：后绘制的图形擦除与先绘制的图形重叠的部分。
destination-atop：后绘制的图形位于先绘制的图形下方，在两者不重叠的地方，先绘制的图形会变透明。
lighter：后绘制的图形与先绘制的图形重叠部分的值相加，使该部分变亮。
copy：后绘制的图形完全替代与之重叠的先绘制图形。
xor：后绘制的图形与先绘制的图形重叠的部分执行“异或”操作。

var drawing = document.getElementById('drawing');
//确定浏览器支持<canvas>元素
if(drawing.getContext){
    var context = drawing.getContext("2d");
    
    //绘制红色矩形
    context.fillStyle = "#ff0000";
    context.fillRect(10,10,50,50);
    
    //设置合成操作
    context.globalCompositeOperation = "xor";
    
    //绘制蓝色矩形
    context.fillStyle = "rgba(0,0,255,1)";
    context.fillRect(30,30,50,50);
}

webGL

webGL是针对Canvas的3D上下文。与其它web技术不同，webGL并不是W3C指定的标准。而是由Khronos Group制定的。Khronos Group也设计了其他图像处理API，比如openGL ES2.0。浏览器使用的webGL就是基于openGL ES2.0制定的。

类型化数组

webGL涉及的复杂计算需要提前知道数值的精度，而标准的JavaScript数值无法满足需要。为此，webGL引入了一个概念，叫类型化数组（typed arrays）。类型化数组也是数组，只不过其元素被设置为特定类型的值。

类型化数组的核心就是一个名为ArrayBuffer的类型。每个ArrayBuffer对象表示的只是内存中指定的字节数，但不会指定这些字节用于保存什么类型的数据。通过ArrayBuffer所能做的，就是为了将来使用而分配一定数量的字节。例如，下面这行代码会在内存中分配20B。

var buffer = new ArrayBuffer(20);

创建了ArrayBuffer对象后，能够通过该对象获得的信息只有它包含的字节数，方法是访问其byteLength属性：

var bytes = buffer.byteLength;

虽然ArrayBuffer对象本身没有什么可说的，但对webGL而言，使用它是极其重要的。而且，在涉及视图的时候，你才会发现它原来还是很有意思的。

1.视图

使用ArrayBuffer（数组缓冲器类型）的一种特别的方式就是用它来创建数组缓冲器视图。其中，最常见的视图是DataView,通过它可以选择ArrayBuffer的一小段字节。为此，可以在创建DataView实例的时候传入一个ArrayBuffer、一个可选的字节偏移量（从该字节开始选择）和一个可选的要选择的字节数。例如：

var buffer = new ArrayBuffer(20);

//基于整个缓冲器创建一个新视图
var view = new DataView(buffer);

//创建一个开始于字节9的新视图
var view = new DataView(buffer,9);

//创建一个从字节9开始到字节18的新视图
var view = new DataView(buffer,9,10);

实例化后，DataView对象会把字节偏移量以及字节长度信息分别保存在byteOffset和byteLength属性中。

console.log(view.byteOffset); //9
console.log(view.byteLength); //10

读取和写入DataView的时候，要根据实际操作的数据类型，选择相应的getter和setter方法。下表列出了DataView支持的数据类型以及相应的读写方法。

数据类型	getter	setter
有符号8位整数	getInt8(byteOffset)	setInt8(byteOffset,value)
无符号8位整数	getUint8(byteOffset)	setUint8(byteOffset,value)
有符号16位整数	getInt16(byteOffset,littleEndian)	setInt16(byteOffset,value,littleEndian)
无符号16位整数	getUint16(byteOffset,littleEndian)	setUint16(byteOffset,value,littleEndian)
有符号32位整数	getInt32(byteOffset,littleEndian)	setInt32(byteOffset,value,littleEndian)
无符号32位整数	getUint32(byteOffset,littleEndian)	setUint32(byteOffset,value,littleEndian)
32位浮点数	getFloat32(byteOffset,littleEndian)	setFloat32(byteOffset,value,littleEndian)
64位浮点数	getFloat64(byteOffset,littleEndian)	setFloat64(byteOffset,value,littleEndian)

littleEndian：可选。如果为 false 或未定义，则应写入 big-endian 值；否则应写入 little-endian 值。详细了解《MSDN：DataView对象》

所有这些方法的第一个参数都是一个字节偏移量，表示要从哪个字节开始读取或者写入。不要忘了，要保存有些数据类型的数据，可能需要不止1B。比如，无符号8位整数要用1B，而32为浮点数则要用4B。使用DataView，就需要你自己来管理这些细节，即要明确自己的数据需要多少字节，并选择正确的读写方法。例如：

var buffer = new ArrayBuffer(20),
    view = new DataView(buffer),
    value;
    
view.setUint16(0,25);
view.setUint16(2,50); //不能从字节1开始,因为16位整数要用2B
value = view.getUint16(0);

以上代码把两个无符号16位整数保存到了数组缓冲器中。因为每个16位整数要用2B，所以保存第一个数的字节偏移量为0，而保存第二个数的字节偏离量为2。

可以通过几种不同的方式来访问同一字节。例如：

var buffer = new ArrayBuffer(20),
    view = new DataView(buffer),
    value;
    
view.setUint16(0,25);
value = view.getInt8(0);
console.log(value); //0

在这个例子中，数值25以16位无符号整数的形式被写入，字节偏移量为0。然后，再以8位有符号整数的方式读取该数据，得到的结果为0。这是因为25的二进制形式的前8位（第一个字节）全是0，如图所示：

可见，虽然DataView能让我们在字节级别上读写数组缓冲器中的数据，但我们必须自己记住要将数据保存到哪里，需要占用多少字节。这样一来，就会带来很多工作量，因此，类型化视图也就应运而生。

2.类型化视图

类型化视图一般也被称为类型化数组，因为他们除了元素必须是某种特定的数据类型外，与常规的数组无异。类型化视图也分为几种，而且它们都继承了DataView。

Int8Array：表示8位二补整数。
Uint8Array：表示8位无符号整数。
Int16Array：表示16位二补整数。
Uint16Array：表示16位无符号整数。
Int32Array：表示32位二补整数。
Uint32Array：表示32位无符号整数。
Float32Array：表示32位IEEE浮点值。
Float64Array：表示64位IEEE浮点值。

每种视图类型都以不同的方式表示数据，而同一数据视选择的类型不同有可能占用一或多字节。例如，20B的ArrayBuffer可以保存20个Int8Array或Uint8Array，或者10个Int16Array或Uint16Array，或者5个Int32Array、Uint32Array或Float32Array，或者2个Float64Array。

由于这些视图都继承自DataView，因而可以使用相同的构造函数参数来实例化。第一个参数是要使用ArrayBuffer对象，第二个参数是作为起点的字节偏移量（默认为0），第三个参数是要包含的字节数。三个参数只有第一个是必须的。如下例子：

var buffer = new ArrayBuffer(200);
//创建一个新数组,使用整个缓冲器
var int8s = new Int8Array(buffer);

//只使用从字节10开始的缓冲器
var int16s = new Int16Array(buffer,10);

//只使用从字节10到字节19的的缓冲器
var uint16s = new Uint16Array(buffer,10,10);

能够指定缓冲器中可用的字节段，意味着能在同一个缓冲器中保存不同类型的数值。比如，下面的代码就是在缓冲器的开头保存8位整数，而在其它字节中保存16位整数。

var buffer = new ArrayBuffer(32);

//使用缓冲器的一部分保存8位整数另一部分保存在16位整数
var int8s = new Int8Array(buffer,0,11);
var uint16s = new Uint16Array(buffer,12,10);

每个视图构造函数都有一个名为BYTES_PER_ELEMENT的属性，表示类型化数组的每个元素需要多少字节。因此，Uint8Array.BYTES_PER_ELEMENT就是1，而Float32Array.BYTES_PER_ELEMENT则为4。可以利用这个属性来辅助初始化。

var buffer = new ArrayBuffer(32);

//需要11个元素空间
var int8s = new Int8Array(buffer,0,11*Int8Array.BYTES_PER_ELEMENT);

//需要5个元素空间
var uint16s = new Uint16Array(buffer,int8s.byteOffset + int8s.byteLength + 1,5*Uint16Array.BYTES_PER_ELEMENT);

类型化视图的目的在于简化对二进制数据的操作。除了前面看到的优点之外，创建类型化视图还可以不用首先创建ArrayBuffer对象。只要传入希望数组保存的元素数，相应的构造函数就可以自动创建一个包含足够字节数的ArrayBuffer对象，例如：

//创建一个数组保存10个8位整数(10字节)
var int8s = new Int8Array(10);

//创建一个数组保存10个16位整数(20字节)
var int16s = new Int16Array(10);

另外，也可以把常规数组转换为类型化视图，只要把常规数组传入到类型化视图的构造函数即可：

//创建一个数组保存5个8位整数(10字节)
var int8s = new Int8Array([10,20,30,40,50]);

这是用默认值来初始化类型化视图的最佳方式，也是webGL项目中最常用的方式。

使用类型化视图时，可以通过length属性确定数组中有多少元素，如下：

//创建一个数组保存5个8位整数(10字节)
var int8s = new Int8Array([10,20,30,40,50]);
for(var i = 0,len = int8s.length; i < len; i++){
    console.log("value at position" + i + " is " + int8s[i]);
}

当然也可以使用方括号语法为类型化视图的元素赋值。如果为相应的元素指定字节数放不下相应的值，则实际保存的值是最大可能值的模。例如，无符号16位整数所能表示的最大数值是65535，如果你想保存65536，那实际保存的值是0；如果你想保存65537，那实际保存的值是1，依次类推。

var uint16s = new Uint16Array(10);
uint16s[0] = 65537;
console.log(uint16s[0]);  //1

类型化视图还有一个方法subarray()，使用这个方法可以基于底层数组缓冲器的子集创建一个新视图。这个方法接收两个参数：开始元素的索引和可选的结束元素的索引。返回的类型与与调用该方法的视图类型相同。例如：

var uint16s = new Uint16Array(10),
    sub = uint16s.subarray(2,5);
console.log(sub);  //[0, 0, 0]

在以上代码中，sub也是Uint16Array的一个实例，而且底层与uint16s都基于同一个ArrayBuffer。

webGL上下文

目前，在支持的浏览器中，webGL的名字叫“experimental-webgl”，这是因为webGL的规范仍然未制定完成。制定完成后，这个名字就会变成简单的“webgl”。如果浏览器不支持webGL，取得上下文时会返回null。在使用webGL时，务必先检测一下返回值：

var drawing = document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if(drawing.getContext){
    var gl = drawing.getContext("experimental-webgl");
    if(gl){
        //使用webGL 
    }
}

通过给getContext()传递第二个参数，可以为webGL上下文设置一些选项。这个参数本身是一个对象，可以包含下列属性。

alpha：值为true，表示为上下文创建一个Alpha通道缓冲区；默认值为true。
depth：值为true，表示可以使用16位深缓冲区；默认值为true。
stencil：值为true，表示可以使用8位模板缓冲区；默认值为false。
antialias：值为true，表示将使用默认机制执行抗锯齿操作；默认值为true。
premultipliedAlpha：值为true，表示绘图缓冲区有预乘Alpha值；默认值为true。
preserveDrawingBuffer：值为true，表示在绘图完成后保留绘图缓冲区；默认值为false。建议确实有必要的情况下再开启这个值，因为可能影响性能。

传递这个选项对象的方式如下：

var drawing = document.getElementById("drawing");
//确定浏览器支持<canvas>元素
if(drawing.getContext){
    var gl = drawing.getContext("experimental-webgl",{alpha:false});
    if(gl){
        //使用webGL 
    }
}

大多数上下文选项只在高级技巧中使用。很多时候，各个选项的默认值就能满足我们的需求。

如果getContext()无法创建webGL上下文，最好把调用封装在try-catch块中，如下：

var drawing = document.getElementById("drawing"),
    gl;
//确定浏览器支持<canvas>元素
if(drawing.getContext){
    try{
        gl = drawing.getContext("experimental-webgl");
    }catch(ex){
        //什么也不做
    }

    if(gl){
        //使用webGL 
    }else{
        alert("webGL context could not be created");
    }
}

1.常量

如果你属性openGL，那肯定会对各种操作中使用非常多的常量印象深刻。这些常量在openGL中都带前缀GL_。在webGL中，保存在上下文对象中的这些常量都没有GL_前缀。比如，GL_COLOR_BUFFER_BIT常量在webGL上下文就是gl.COLOR_BUFFER_BIT。webGL以这种方式支持大多数openGL常量（有一部分常量是不支持的）。

2.方法命名

openGL（以及webGL）中的很多方法都视图通过名字传达有关数据类型的信息。如果某种方法可以接收不同类型以及不同数量的参数，看方法名的后缀就可以知道。方法名的后缀会包含参数个数（1到4）和接收的数据类型（f表示浮点数，i表示整数）。例如，gl.uniform4f()意味着要接收4个浮点数，而gl.uniform3i()则表示要接收3个整数。

也有很多方法接收数组参数而非一个个单独的参数。这样的方法其名字中会包含字母v（即vector，矢量）。因此，gl.uniform3iv()可以接收一个包含3个值的整数数组。请大家记住以上命名约定，这样对理解后面关于webGL的讨论很有帮助。

3.准备绘图

在实际操作webGL上下文之前，一般都要使用某种实色清除<canvas>，为绘图做好准备。为此，首先必须使用clearColor()方法来指定要使用的颜色值，该方法接收4个参数：红、绿、蓝和透明度。每个参数必须是一个0到1之间的数值，表示每种分量在最终颜色中的强度，如下代码：

gl.clearColor(0,0,0,1); //black
gl.clear(gl_COLOR_BUFFER_BIT);

以上代码把清理颜色缓冲区的值设置为黑色，然后调用clear()方法，这个方法与openGL中的glClear()等价。传入的参数gl_COLOR_BUFFER_BIT告诉webGL使用之前定义的颜色来填充相应区域。一般来说，都要先清理缓冲区，然后再执行其他绘图操作。

4.视口与坐标

开始绘图之前，通常要先定义webGL的视口(viewport)。默认情况下视图可以使用整个<canvas>区域。要改变视口大小，可以调用viewport()方法并传入4个参数：（视口相对于<canvas>元素的）x坐标、y坐标、宽度和高度。例如，下面的调用就使用了<canvas>元素：

gl.viewport(0,0,drawing.width,drawing.height);

视口坐标与我们熟悉的网页坐标不一样。视口坐标的原点（0,0）在<canvas>元素的左下角，x轴和y轴的正方向分别是向右和向上，可以定义为（width-1,height-1）,如下图所示：

知道怎么定义视口大小，就可以只在<canvas>元素的部分区域中绘图。如下例子：

//视口是<canvas>左下角的四分之一区域
gl.viewport(0,0,drawing.width/2,drawing.height/2);

//视口是<canvas>左上角的四分之一区域
gl.viewport(0,drawing.height/2,drawing.width/2,drawing.height/2);

//视口是<canvas>右下角的四分之一区域
gl.viewport(drawing.width/2,0,drawing.width/2,drawing.height/2);

另外，视图内部的坐标系与定义视口的坐标系也不一样。在视口内部，坐标原点（0,0）是视口的中心点，因此，视口左下角坐标为（-1,-1）,而右上角坐标为（1,1）。如下图所示：

如果在视口内部绘图时使用视口外部的坐标，结果可能被视口剪切。比如，要绘制的形状有一个顶点在（1,2）,那么该形状在视口右侧的部分会被剪切掉。

5.缓冲区

创建缓冲区：gl.createBuffer()，使用gl.bindBuffer()绑定到webGL上下文，gl.deleteBuffer()释放内存。

6.错误

webGL操作一般不会抛出错误，手工调用gl.getError()方法。

7.着色器

webGL有两种着色器：顶点着色器和片段（或像素）着色器。

posted @ 2019-02-27 09:25 风雨后见彩虹阅读(1122) 评论(0) 编辑收藏举报

刷新页面返回顶部

风雨后见彩虹

无论什么时候开始，重要的是不要停止