什么是画布

Canvas是HTML的2D绘图API，并且大多数浏览器都支持它。简单理解，就是浏览器在屏幕上为您提供了一个矩形区域，您可以在该区域画图。包括绘制线条，形状，图像，文本等。

创建一个画布

<!DOCTYPE html>
<html lang="en">
  <body>
    <canvas width="500" height="500" id="canvas"></canvas>
    <script>
      var canvas = document.getElementById("canvas");
      var c = canvas.getContext("2d");
      c.fillStyle = "black";
      c.fillRect(50, 50, 400, 300);
    </script>
  </body>
</html>

对比页面其余绘图部分

SVG： SVG是绘制可缩放的矢量图形。每个形状都有一个对象，您可以将事件处理程序附加到该对象。放大缩小形状都会保持平滑。而 "画布" 是将图形像素化。
CSS： CSS是通过样式化DOM元素来实现图形。由于在Canvas中绘制的东西没有DOM对象，所以不能对其设置CSS样式。CSS仅会影响Canvas本身的矩形区域，因此您可以设置边框和背景色。
DOM动画： 使用 DOM或文档对象模型在屏幕上绘制图形。通过使用CSS或JavaScript来移动对象的DOM动画在某些情况下比使用Canvas进行动画更平滑，但这取决于您的浏览器实现。

什么时候使用画布

当你只需要在屏幕上渲染现有形状时，可以直接使用SVG。
当页面上大多数动画都有静态原型DOM时，或者要使用3D变换时，可以直接CSS或DOM动画。
对于展示图表，图形，动态图，还有视频游戏，可以直接使用Canvas。

示例

绘图

<!DOCTYPE html>
<html lang="en">
  <body>
    <canvas width="800" height="600" id="canvas"></canvas>
    <script>
      var canvas = document.getElementById("canvas");
      var c = canvas.getContext("2d");
      c.fillStyle = "rgb(0,0,0)";
      c.beginPath();
      c.moveTo(300, 20);
      c.lineTo(100, 50);
      c.lineTo(150, 80);
      c.closePath();
      c.fill();
      c.strokeStyle = "rgb(0,128,0)";
      c.lineWidth = 5;
      c.stroke();
    </script>
  </body>
</html>

var c = canvas.getContext("2d") 先创建画布上下文。
c.fillStyle = "rgb(0,0,0)" 设置填充颜色。填充颜色和笔触颜色设置后就不会自动改变，要修改后续绘图颜色，需要重新设置。格式可以是任何有效的CSS颜色表示法，如"#000000"，名称或rgb()函数。
.beginPath() 表示开始一条路径，或重置当前的路径。
.moveTo(300, 20) 移动绘制点的位置。
.lineTo(100, 50) 添加一个新点，然后创建从该点到画布中最后指定点的线条（该方法并不会创建线条）。可以理解为上一个点到这个点绘制一条连接线段。
.closePath() 进行设置从当前点到开始点的路径。
.fill() 填充当前的图像（路径）。使用定义好的填充颜色填充图像背景。
c.strokeStyle = "rgb(0,128,0)" 设置笔触颜色。简单理解为画画时使用笔的颜色。
c.lineWidth = 5 设置线条宽度。
.stroke() 开始在画布上绘制之前设置的图形。

路径

画布仅直接支持矩形形状。要绘制任何其他形状，您必须使用路径自己绘制。

<!DOCTYPE html>
<html lang="en">
  <body>
    <canvas width="800" height="600" id="canvas"></canvas>
    <script>
      var canvas = document.getElementById("canvas");
      var c = canvas.getContext("2d");
      c.fillStyle = "red";
      c.beginPath();
      c.moveTo(10, 30);
      c.bezierCurveTo(50, 90, 150, -30, 170, 30);
      c.lineTo(200, 90);
      c.lineTo(10, 90);
      c.closePath();
      c.fill();
      c.lineWidth = 4;
      c.strokeStyle = "黑色";
      c.stroke();
    </script>
  </body>
</html>

.bezierCurveTo(50, 90, 150, -30, 170, 30) 绘制一条三次贝塞尔曲线。三次贝塞尔曲线需要三个点。前两个点是用于三次贝塞尔计算中的控制点，第三个点是曲线的结束点。

文本

画布也可以绘制文本。font属性与CSS中font属性等效的。

<!DOCTYPE html>
<html lang="en">
  <body>
    <canvas width="800" height="600" id="canvas"></canvas>
    <script>
      var canvas = document.getElementById("canvas");
      var c = canvas.getContext("2d");
      var grad = c.createLinearGradient(0, 0, 300, 0);
      grad.addColorStop(0, "white");
      grad.addColorStop(0.5, "red");
      grad.addColorStop(1, "black");
      c.fillStyle = grad;
      c.font = "96px Arial";
      c.fillText("添加文本", 20, 150);
    </script>
  </body>
</html>

createLinearGradient(0, 0, 300, 0) 创建线性的渐变对象。主要用于设置渐变背景色。
addColorStop(0, "white") 规定 gradient 对象中的颜色和位置。可以设置多个来展示不同位置的渐变色。
font 设置字体样式。与 CSS font 属性相同

学习 canvas （一） 基础信息

什么是画布

创建一个画布

对比页面其余绘图部分

什么时候使用画布

示例

绘图

路径

文本

学习 canvas （一）基础信息