2D 上下文的两种基本绘图操作是填充和描边。填充，就是用指定的样式（颜色、渐变或图像）填
充图形；描边，就是只在图形的边缘画线。

填充和描边以及绘制矩形：

首先要绘制矩形（见基本使用）

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

  1. //html 部分
  2. <canvas id="drawing" width=" 200" height="200">A drawing of something.</canvas>
  4. <script>
  5.   var drawing = document.getElementById("drawing");
  6.   if (drawing.getContext) {
  7.     var context = drawing.getContext("2d");
  9.     //1、fillRect()方法在画布上绘制的矩形会填充指定的颜色
  10.     //绘制红色矩形
  11.     context.fillStyle = "#ff0000";
  12.     context.fillRect(10, 10, 50, 50);
  13.     //绘制半透明的蓝色矩形
  14.     context.fillStyle = "rgba(0,0,255,0.5)";
  15.     context.fillRect(30, 30, 50, 50);
  17.     //2、strokeRect()方法在画布上绘制的矩形会使用指定的颜色描边
  18.     //绘制红色描边矩形
  19.     context.strokeStyle = "#ff0000"; 
  20.     context.strokeRect(10, 10, 50, 50); 
  21.     //绘制半透明的蓝色描边矩形
  22.     context.strokeStyle = "rgba(0,0,255,0.5)"; 
  23.     context.strokeRect(30, 30, 50, 50);
  26.     //3、clearRect()方法用于清除画布上的矩形区域
  27.     //绘制红色矩形
  28.     context.fillStyle = "#ff0000";
  29.     context.fillRect(10, 10, 50, 50);
  30.     //绘制半透明的蓝色矩形
  31.     context.fillStyle = "rgba(0,0,255,0.5)";
  32.     context.fillRect(30, 30, 50, 50);
  33.     //在两个矩形重叠的地方清除一个小矩形
  34.     context.clearRect(40, 40, 10, 10);
  36.   }
  37. </script>

结果：
canvas.3png.png

canvas4.png

canvas6.png

绘制路径：

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()，这个方法
可以在路径上创建一个剪切区域

实例：

  1. <canvas id="drawing" width=" 200" height="200">A drawing of something.</canvas>
  3. <script>
  4.   //下面看一个例子，即绘制一个不带数字的时钟表盘。
  5.   var drawing = document.getElementById("drawing");
  6.   //确定浏览器支持<canvas>元素
  7.   if (drawing.getContext) {
  8.     var context = drawing.getContext("2d");
  10.     //开始路径
  11.     context.beginPath();
  13.     //绘制外圆
  14.     context.arc(100, 100, 99, 0, 2 * Math.PI, false);
  15.     //绘制内圆
  16.     context.moveTo(194, 100);
  17.     context.arc(100, 100, 94, 0, 2 * Math.PI, false);
  19.     //绘制分针
  20.     context.moveTo(100, 100);
  21.     context.lineTo(100, 15);
  23.     //绘制时针
  24.     context.moveTo(100, 100);
  25.     context.lineTo(35, 100);
  27.     //描边路径（很重要）
  28.     context.stroke();
  29.   }
  30. </script>

结果：
canvasClock.png

绘制文本：

文本与图形总是如影随形。为此，2D 绘图上下文也提供了绘制文本的方法。绘制文本主要有两个
方法：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”

  1. //在表盘上绘制文本
  2. //只需在上一节代码的基础上增加以下代码：
  4. context.font = "bold 14px Arial";
  5. context.textAlign = "center";
  6. context.textBaseline = "middle";
  7. context.fillText("12", 100, 20);

结果：
canvas.textpng.png

变换：

通过上下文的变换，可以把处理后的图像绘制到画布上。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)：直接修改变换矩阵，方式是乘以如下

矩阵

  • setTransform(m1_1, m1_2, m2_1, m2_2, dx, dy)：将变换矩阵重置为默认状态，然后

再调用 transform()

绘制图像：

2D 绘图上下文内置了对图像的支持。如果你想把一幅图像绘制到画布上，可以使用 drawImage()方法，最简单的调用方式是传入一个 HTML 元素，以及绘制该图像的起点的 x 和 y 坐标。例如：

  1.  <p>Image to use:</p>
  2.  <img id="scream" src="./1.jpg" alt="The Scream" width="220" height="277" />
  3.  <p>Canvas:</p>
  4.  <canvas
  5.  id="myCanvas"
  6.  width="250"
  7.  height="300"
  8.  style="border:1px solid #d3d3d3;"
  9.  >
  10.  您的浏览器不支持 HTML5 canvas 标签。</canvas
  11.  >
  13. <script>
  14.   var c = document.getElementById("myCanvas");
  15.   var ctx = c.getContext("2d");
  16.   var img = document.getElementById("scream");
  18.   img.onload = function() {
  19.       ctx.drawImage(img, 10, 10);
  20.   };
  21. </script>

结果：
img.png

阴影：

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

  • shadowColor：用 CSS 颜色格式表示的阴影颜色，默认为黑色
  • shadowOffsetX：形状或路径 x 轴方向的阴影偏移量，默认为 0
  • shadowOffsetY：形状或路径 y 轴方向的阴影偏移量，默认为 0
  • shadowBlur：模糊的像素数，默认 0，即不模糊
  1. //html 部分
  2. <canvas id="drawing" width=" 200" height="200">A drawing of something.</canvas>
  4. <script>
  5.   var drawing = document.getElementById("drawing");
  6.   if (drawing.getContext) {
  7.     var context = drawing.getContext("2d");
  10.     //设置阴影
  11.     context.shadowOffsetX = 5;
  12.     context.shadowOffsetY = 5;
  13.     context.shadowBlur = 4;
  14.     context.shadowColor = "rgba(0, 0, 0, 0.5)";
  16.     //绘制红色矩形
  17.     context.fillStyle = "#ff0000";
  18.     context.fillRect(10, 10, 50, 50);
  19.     //绘制半透明的蓝色矩形
  20.     context.fillStyle = "rgba(0,0,255,0.5)";
  21.     context.fillRect(30, 30, 50, 50);
  22.     //在两个矩形重叠的地方清除一个小矩形
  23.     context.clearRect(40, 40, 10, 10);
  25.   }
  26. </script>

结果：

canvas.11png.png

渐变：

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

模式：

使用图像数据：

合成：