说说如何使用 canvas 进行 2D 绘图

canvas 的 2D context 可以绘制简单的 2D 图形。它的 2D context 坐标开始于 <canvas> 元素的左上角，原点坐标是（0,0）。所有的坐标值都基于这个原点，x 值越大表示越靠右，y 值越大表示越靠下。width 和 height 表示水平和垂直方向上可用的像素数。

1 填充和描边

填充就是用指定的样式填充图形；而描边就是给图形的边缘画线。它们分别对应两个属性：fillStyle 和 strokeStyle。这两个属性的值可以是字符串、渐变对象或者模式对象。默认值都是 “#00000”。如果为它们指定表示颜色的字符串值，可以使用 CSS 中指定颜色值的任何格式（颜色名、十六进制码、rgb、rgba、hsl 或 hsla）：

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

2 绘制矩形

矩形是唯一一种直接可以在 2D context 中绘制的图形。它有 3 种方法：fillRect()、strokeRect() 和 clearRect()。它们都接收 4 个 参数：矩形的 x 坐标、y 坐标、矩形的宽度以及高度，这些参数的单位都是像素。

fillRect() 会为矩形填充指定的颜色，颜色是通过 fillStyle 属性进行设置的：

<canvas id="drawing" width="200" height="200">A drawing of something.</canvas><script type="text/javascript">    var drawing = document.getElementById("drawing");    if (drawing.getContext) {//确定浏览器支持 canvas        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);    }</script>

因为第二个矩形是半透明的，所以你可以透过上面的蓝色矩形看到下面的红色矩形：

strokeRect() 会使用指定的颜色为矩形描边，描边的颜色是通过 strokeStyle 指定的：

<script type="text/javascript">    var drawing = document.getElementById("drawing");    if (drawing.getContext) {//确定浏览器支持 canvas        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);    }</script>

---

注意： lineWidth 属性控制着描边线条的宽度，它可以是任意整数。lineCap 属性可以控制线条末端的形状（平头【butt】、圆头【round】或方头【squre】）。lineJoin 控制线条相交的方式（圆交【round】、斜角【bevel】或斜接【miter】）。

---

clearRect() 可以清除画布上的矩形区域。它是通过把某一矩形区域变透明来实现的。通过绘制形状然后在清除指定区域后，会生成很有意思的效果：

<script type="text/javascript">    var drawing = document.getElementById("drawing");    if (drawing.getContext) {//确定浏览器支持 canvas        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);    }</script>

3 绘制路径

使用路径可以绘制出很复杂的形状和线条。必须先调用 beginPath() 方法，然后再通过以下方法来绘制路径：

方法 说明 arc(x, y, radius, startAngle, endAngle, counterclockwise) 以 (x,y) 为圆心绘制一条弧线，它的半径是 radius。startAngle 是起始角度，endAngle 是结束角度，它们的单位都是弧度。counterclockwise 表示起始和结束角度是否按逆时针方向计算。 arcTo(x1, y1, x2, y2, radius) 从上一点开始绘制弧线，以给定的半径（radius）穿过 （x1, y1)，直到 (x2, y2) 为止。 bezierCurveTo(c1x, c1y, c2x, c2y, x, y) 从上一点开始绘制曲线，以 (c1x, c1y) 和 (c2x, c2y) 为控制点，开始绘制曲线。 lineTo(x, y) 从上一点开始绘制直线，到 (x, y) 为止。 moveTo(x, y) 将绘图的游标移动到 (x, y) ，只是移动不画线。 quadraticCurveTo(cx, cy, x, y) 从上一点开始绘制二次曲线，以 （cx, cy）作为控制点，到 (x, y) 为止。 rect(x, y, width, height) 从点（x, y） 开始绘制矩形，width 和 height 分别代表宽和高，它绘制的是矩形路径，而不是我们之前说过的矩形形状。

---

创建路径后，有这些选择：

• 调用 closePath() 可以绘制一条连接到路径起点的线条。
• 调用 fill() 可以填充路径（fillStyle 指定的值）。
• 调用 stroke() 对路径进行描边（strokeStyle 指定的值）。
• 调用 clip() 在路径上创建一个剪贴区域。

现在我们绘制一个不带数字的钟：

<script type="text/javascript">    var drawing = document.getElementById("drawing");    if (drawing.getContext) {//确定浏览器支持 canvas        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.stroke();//实际画出路径    }</script>

路径是一种主要的绘图方式，因为它能为要绘制的图形进行更多的控制。

isPointInPath() 接收 x 和 y 坐标作为参数，可以用来判断某一点是否位于路径上。

可以利用路径的 API 绘制出非常复杂的图形。

4 绘制文本

绘制文本 有 fillText() 和 strokeText() 这两个方法，它们可以接收 4 个参数：要绘制的文本字符串、x 坐标、y 坐标和最大像素宽度（可选），它们都有以下这些属性：

属性 说明 font 文本样式、大小以及字体（CSS 的字体格式） textAlign 文本对齐方式，有这些值：start、end、left、right 和 center。建议使用 start（从左到右） 和 end（从右到左）。 textBaseline 文本的基线，有这些值：top、hanging、middle、alphabetic、ideographic 和 bottom。

---

这些属性都有默认值。fillText() 使用 fillStyle 来绘制文本，strokeText() 使用 strokeStyle 来为文本描边。fillText() 的频率会更多，因为它模仿了在网页中显示的文本方式。现在我们在之前的钟上绘制数字：

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

如果把 textAlign 设置为 start，表示 x 坐标是在文本左端的位置；如果设置为 end，则表示 x 坐标是在文本右端的位置：

/** * 绘制文本 *///正常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);

meansureText() 可以确定文本的大小，它接受一个参数，即要绘制的文本，它会返回 TextMetrics 对象。这个对象有一个 width 属性。

meansureText() 会根据 font、textAlign 和 textBaseline 的值来计算指定文本的合适大小：

<script type="text/javascript">    var drawing = document.getElementById("drawing");    if (drawing.getContext) {//确定浏览器支持 canvas        var context = drawing.getContext("2d"),fontSize=50, i,len;        //draw a white rectangle        context.strokeWidth=1;        context.strokeStyle="#000000";        context.strokeRect(10,10,150,30);        //default font setting        context.font = fontSize + "px Arial";        context.textBaseline="top";        while (context.measureText("Hello world!").width > 140) {            fontSize--;            context.font = fontSize + "px Arial";        }        context.fillText("Hello world!", 10, 10);        context.fillText("Font size is " + fontSize + "px", 10, 50);    }</script>

5 变换

通过变换，可以把变换后的图像绘制到画布上。创建绘制上下文时，会以默认值初始化变换矩阵。有这些方法：

方法 说明 rotate(angle) 围绕原点旋转图像 angle 弧度。 scale(scaleX, scaleY) 缩放图像，x 方向上乘以 scaleX，y 方向上乘以 scaleY。参数的默认值都是 1.0。 translate(x, y) 坐标原点（0,0）移动到(x,y)。 setTransform(m1_1, m1_2, m2_1, m2_2, dx, dy) 将矩阵重置为默认状态，然后再调用 transform()。 transform(m1_1, m1_2, m2_1, m2_2, dx, dy) 修改变换矩阵，即乘上底下这样的矩阵：

---

现在我们把原点变换到表盘的中心，然后再绘制表针，这样在同一方向上绘制线条就变成了一个简单的数学问题咯（因为所有的的计算都是基于 (0,0)）：

<script type="text/javascript">    var drawing = document.getElementById("drawing");    if (drawing.getContext) {//确定浏览器支持 canvas        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.stroke();//实际画出路径    }</script>

还可以使用 rotate() 来旋转时钟的表针：

<script type="text/javascript">    var drawing = document.getElementById("drawing");    if (drawing.getContext) {//确定浏览器支持 canvas        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.stroke();//实际画出路径    }</script>

有两种方法可以跟踪状态变化。一个是 save() 方法，它会把当时的所有设置放入一个栈结构。如果想要回到之前的设置，可以调用另一个方法 restore() ,它会恢复之前的状态（在栈结构中返回一级）。多次调用 save() 会把多个设置都保存到栈结构中，如果这时再连续调用 restore() 方法，则会一级一级地返回设置：

<script type="text/javascript">    var drawing = document.getElementById("drawing");    if (drawing.getContext) {//确定浏览器支持 canvas        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,200）开始绘制蓝色矩形        context.restore();        context.fillRect(10, 10, 100, 200);//从点（110,110）开始绘制绿色矩形        context.restore();        context.fillRect(0, 0, 100, 200);//从点（0,0）开始绘制红色矩形    }</script>

注意：save() 只会保存绘图上下文的设置和变换，但不会保存绘图上下文的内容。

6 绘制图像

使用 drawImage() 可以把图像绘制到画布中。可以传入 HTML 的 <img> 元素，以及绘制该图像的起点的 x 和 y 坐标；还可以再加上两个参数（目标宽度和目标高度），这可以改变绘制后的图像大小；实际上还可以把图像的某个区域绘制到上下文中，这需要传入 9 个参数：要绘制的图像、源图像的 x、y 坐标、源图像的宽度和高度、目标图像的 x、y 坐标、目标图像的宽度和高度：

<canvas id="drawing" width="200" height="200">A drawing of something.</canvas><img id="smiley" src="smile.gif" border="1" title="Image tag"/><script type="text/javascript">    window.onload = function () {//必须在 onload 内运行才有效        var drawing = document.getElementById("drawing");        if (drawing.getContext) {//确定浏览器支持 canvas            var context = drawing.getContext("2d");            var image = document.getElementById("smiley");            //draw regular size            context.drawImage(image, 10, 10);            //draw smaller size            context.drawImage(image, 50, 10, 20, 30);            //draw just part of the image            context.drawImage(image, 0, 10, 50, 50, 0, 100, 40, 60);        }    };</script>

还可以传入另一个 <canvas> 元素作为 drawImage() 方法的第一个参数，这样就可以把另一个画布内容绘制到当前的画布上。

drawImage() 的操作结果可以通过 toDataURL() 得到，但这个图像不能来自其他域。还有，这个 toDataURL() 是 Canvas 对象上的方法！

# 7 阴影

有这些方法可以为形状或路径绘制阴影：

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

---

它们都可以通过 context 对象进行修改，只要在绘制前为它们设置值，就能生成阴影：

“`
A drawing of something.

var drawing = document.getElementById("drawing"); if (drawing.getContext) {//确定浏览器支持 canvas 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,0.5)"; context.fillRect(30, 30, 50, 50); }

“`

8 渐变

使用 CanvasGradient 实例可以创建一个新的线性渐变，然后调用 createLinearGradient() ，它接收 4 个参数：起点的 x、y 坐标、终点的 x、y 坐标，它会创建一个指定大小的渐变，然后返回 CanvasGradient 实例。

创建渐变对象后，可以使用 addColorStop() 来指定色标。它接受 2 个参数：色标的位置（0 ~ 1）以及 CSS 颜色值。接着可以把 fillStyle 或 strokeStyle 设置为这个对象，使用渐变来绘制形状或者描边：

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

如果渐变矩形没有绘制到恰当的位置，那就只会显示部分渐变效果：

...//绘制渐变矩形context.fillStyle = gradient;context.fillRect(50, 50, 50, 50);...

所以要确保渐变一定要与形状对齐，因此可以可以使用函数来确定坐标处于合适的位置：

<script type="text/javascript">    function createRectLinearGradient(context, x, y, width, height) {        return context.createLinearGradient(x, y, x + width, y + height);    }    var drawing = document.getElementById("drawing");    if (drawing.getContext) {//确定浏览器支持 canvas        var context = drawing.getContext("2d");        //绘制红色矩形        context.fillStyle = "#ff0000";        context.fillRect(10, 10, 50, 50);        //创建渐变对象        var gradient = createRectLinearGradient(context,30, 30, 50, 50);        gradient.addColorStop(0, "white");        gradient.addColorStop(1, "black");        //绘制渐变矩形        context.fillStyle = gradient;        context.fillRect(30, 30, 50, 50);    }</script>

createRectLinearGradient() 函数是基于起点的 x 和 y 坐标以及宽度和高度来创建渐变对象的，这样就可以在 fillRect() 中使用相同的值。

createRadialGradient() 可以创建径向渐变，即放射渐变。它接受 6 个参数：对应两个圆的圆心和半径，即起点圆的圆心（x、y）和半径，以及终点圆的圆心（x、y）和半径。

如果要从某个形状的中心点创建一个向外扩散的径向渐变，就必须把这两个圆定义为同心圆：

<script type="text/javascript">    var drawing = document.getElementById("drawing");    if (drawing.getContext) {//确定浏览器支持 canvas        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);    }</script>

9 模式

模式就是重复的图像，可以利用模式来填充或者描边图形。createPattern() 会创建一个模式，它接受 2 个参数：一个 HTML 的 <img> 元素以及如何重复图像（与 CSS 的 background-repeat 属性值一致，即 repeat\repeat-x\repeat-y\no-repeat）：

<script type="text/javascript">    window.onload = function () {//放在这里，才有效        var drawing = document.getElementById("drawing");        if (drawing.getContext) {//确定浏览器支持 canvas            var context = drawing.getContext("2d");            var image = document.images[0], pattern = context.createPattern(image, "repeat");            //绘制矩形            context.fillStyle = pattern;            context.fillRect(10, 10, 150, 150);        }    };</script>

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

10 使用图像数据

使用 getImageData() 可以取得原始的图像数据。它接受 4 个参数：图像区域的 x、y 坐标以及该区域的像素高度与宽度。它返回 ImageData 实例。

ImageData 实例有三个属性：width、height 和 data。data 是数组，它保存着图像中每一个像素的数据。每一个像素的数据包含 4 个元素它们是红、绿、蓝和透明度值。这些值都介于 0 到 255 之间。

可以修改图像的数据，创建一个简单的灰阶过滤器：

<canvas id="drawing" width="200" height="200">A drawing of something.</canvas><img id="smiley" src="smile2.gif" border="1"     title="Image tag"><script type="text/javascript">    window.onload = function () {        var drawing = document.getElementById("drawing");        if (drawing.getContext) {//确定浏览器支持 canvas            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);        }    };</script>

注意上面的代码必须运行于 web 服务器（如果是 chrome），而且只对 gif 图像有效！

---

* 注意：* 只有在画布中的图像都是来源于同一个域时，才可以取得图像数据！否则会报 JavaScript 错误。

---

11 合成

globalAlpha 属性可以指定透明度，它的值介于 0 到 1，默认是 0.如果所有后续的操作都要基于同样的透明度，那就可以先设置 globalAlpha 属性，然后再绘制，最后再设置为默认值：

<script type="text/javascript">    window.onload = function () {        var drawing = document.getElementById("drawing");        if (drawing.getContext) {//确定浏览器支持 canvas            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;        }    };</script>

globalCompositionOperation 属性用于指定后绘制的图形与新绘制的图形的结合方式，值是字符串，有这些：

属性值 说明 source-over 后绘制的图形在先绘制的图形的上方，默认。 source-in 后绘制的图形与先绘制的图形重叠的部分可见，其他部分透明。 source-out 后绘制的图形与先绘制的图形不重叠的部分可见，先绘制的图形透明。 source-atop 后绘制的图形与先绘制的图形重叠的部分可见，先绘制的图形不受影响。 destination-over 后绘制的图形在先绘制的图形的下方，只有先绘制的图形的透明下的部分才可见。 destination-in 后绘制的图形在先绘制的图形的下方，不重叠的部分透明。 destination-out 后绘制的图形擦除先绘制图形的重叠部分。 destination-atop 后绘制的图形在先绘制的图形的下方，不重叠的部分，先绘制的图形透明。 lighter 后绘制的图形与先绘制的图形的重叠部分值相加，即变亮。 copy 后绘制的图形完全代替先绘制的图形的重叠部分。 xor 后绘制的图形与先绘制的图形在重叠部分执行“异或”操作。

---

<script type="text/javascript">    window.onload = function () {        var drawing = document.getElementById("drawing");        if (drawing.getContext) {//确定浏览器支持 canvas            var context = drawing.getContext("2d");            //绘制红色矩形            context.fillStyle = "#ff0000";            context.fillRect(10, 10, 50, 50);            //设置合成操作            context.globalCompositeOperation="destination-over";            //绘制蓝色矩形            context.fillStyle = "rgba(0,0,255,1)";            context.fillRect(30, 30, 50, 50);            //重置全局透明度            context.globalAlpha = 0;        }    };</script>

使用 globalCompositionOperation 属性时，请一定要多测试一些浏览器，因为不同的浏览器可能在实现这个属性时存在较大的差异！