canvas-绘制

第一次接触 canvas 是做毕设的时候，在实现登录页时候用了 canvas 增添一些样式，那时候学的很浅显，是时候来认真了解一下这个 canvas。（相关知识来源于 MDN）

canvas 初了解

canvas 是个 HTML5 新增的标签，<canvas> 标签很像 <img> 标签，而 <canvas> 标签只有两个属性—— width 和 height。当没有设置宽度和高度的时候，canvas 会初始化宽度为 300 像素和高度为 150 像素。需要注意的是，canvas 的高宽不可以用 css 设置，那会扭曲的，而且一些老的浏览器版本都不支持 canvas。

不支持咋么办？这非常简单：只需要在 <canvas> 标签中提供替换内容。不支持 <canvas> 的浏览器将会忽略容器并在其中渲染后备内容。而支持 <canvas> 的浏览器将会忽略在容器中包含的内容，并且只是正常渲染 canvas。

你可以这样

<canvas id="canvas">alternative content for browsers without canvas support</canvas>

也可以这样

<canvas id="clock" width="150" height="150">
  <img src="替换内容.png" width="150" height="150" alt="替换图片"/>
</canvas>

这里可以发现，以上两段代码中 canvas 的宽高属性设置，可以直接在标签中设置属性值，也可以在 JS 中设置，没错，canvas 是基于 JS 绘制的。

基本用法
先来代码，有个宏观了解

<canvas id="canvas">
    alternative content for browsers without canvas support
</canvas>

<script>
    var canvas = document.getElementById("canvas");
             
    canvas.width = 1024;
    canvas.height = 500;
        
    var context = canvas.getContext("2d");
    ...
</script>

<canvas> 元素创造了一个固定大小的画布，它公开了一个或多个渲染上下文，其可以用来绘制和处理要展示的内容。我们将会将注意力放在 2D 渲染上下文中。其他种类的上下文也许提供了不同种类的渲染方式；比如，WebGL 使用了基于 OpenGL ES 的 3D 上下文。canvas 起初是空白的。为了展示，首先脚本需要找到渲染上下文，然后在它的上面绘制。<canvas> 元素有一个叫做 getContext()的方法，这个方法是用来获得渲染上下文和它的绘画功能。getContext()只有一个参数，上下文的格式。

JS 部分代码的第一行通过使用 document.getElementById() 方法来为 <canvas> 元素得到 DOM 对象。一旦有了元素对象，你可以通过使用它的 getContext() 方法来访问绘画上下文。

至此，全都是一些前期准备工作，我们获取了 DOM 节点，获取到执行的上下文环境，现在就开始绘制图形。然而绘制之前还需要了解一个知识点，因为 canvas 的绘制都是基于坐标的，那就需要了解什么是画布栅格以及坐标空间。

canvas 元素默认被网格所覆盖。通常来说网格中的一个单元相当于 canvas 元素中的一像素。栅格的起点为左上角（坐标为（0,0））。所有元素的位置都相对于原点定位。所以图中蓝色方形左上角的坐标为距离左边（X 轴）x 像素，距离上边（Y 轴）y 像素（坐标为（x,y））。具体如下图

好，让我们来绘制一个三角形，老样子先来 JS 代码，再具体分析

var canvas=document.getElementById("canvas");
canvas.width=1024;
canvas.height=500;
var context=canvas.getContext("2d");

context.moveTo(100,100);   
context.lineTo(400,400);   
context.lineTo(100,400);
context.lineTo(100,100);

context.lineWidth=2;     
context.strokeStyle="#058";

context.fillStyle="rgb(2,100,30)"; 

context.stroke();
context.fill();

代码前四行是准备工作，就不赘述了。图形的绘制都是基于执行的上下文，我们绘制的三角形的起点使用了 moveTo 方法，定在（100,100）这个位置，lineTo()方法是绘制直线，也接受坐标值两个参数。例子中的意思就是从（100,100）到（400,400）画一条直线，再从（400,400）到（100,400），最终再回到（100,100），这样就形成一个回路构成一个三角形。

其实，说已经构成了三角形是不严谨的，我们只是先确定了坐标，还没有真正的完整绘制。这里可以设置线条的宽度和颜色，使用 stroke() 方法实现图形轮廓的绘制，代码中还有一个 fill() 方法，它是用于填充所绘制的图形，当然需要先设置一下填充的颜色。

通过 canvas 的简单操作，我们就很轻易的绘制了一个三角形。这就是 canvas 很基础的知识了，掌握这些就可以尝试着画一些矩形、多边形、不规则图形，圆、椭圆，目前似乎还很难实现，这就需要继续学习呀。

绘制矩形

绘制一个矩形的边框：strokeRect（x，y，width，height）

绘制一个填充的矩形：fillRect（x，y，width，height）

清除指定矩形区域，让清除部分完全透明：clearRect（x，y，width，height）

var canvas = document.getElementById("canvas");
canvas.width = 500;
canvas.height = 500;
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.strokeRect(50, 50, 50, 50);
ctx.closePath();

ctx.beginPath();
ctx.fillRect(150, 50, 50, 50);
ctx.closePath();

ctx.beginPath();
ctx.fillRect(250, 50, 50, 50);
ctx.clearRect(265, 65, 20, 20);
ctx.closePath();

绘制出来的图形是这样的

以上代码又出现一个新东西，beginPath() 和 closePath()。

beginPath()：新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。

closePath()：闭合路径之后图形绘制命令又重新指向到上下文中。

绘制圆弧

使用 arc()方法绘制圆弧或圆。

arc() 语法：arc(x，y，radius，startAngle，endAngle，anticlockwise)。画一个以（x，y）为圆心的以 radius 为半径的圆弧（圆），从 startAngle 开始到 endAngle 结束，按照 anticlockwise 给定的方向（默认为顺时针）来生成。其中，startAngle 以及 endAngle 参数用弧度定义了开始以及结束的弧度。这些都是以 x 轴为基准。参数 anticlockwise 为一个布尔值。为 true 时，是逆时针方向，否则顺时针方向。

这里具体讲解一下，弧度的问题。

顺时针方向，从 0 开始的地方，需要多大的弧度就走多少的 π，JS 中 Math.PI 就是 π。

ctx.beginPath();
ctx.arc(50,50,20,0,Math.PI*0.5,false);
ctx.stroke();
ctx.closePath();

以上代码绘制了一段弧线，以（50,50）为圆心，20 为半径，顺时针从 0 位置画弧到 0.5π 的位置。

绘制二次贝塞尔曲线

贝塞尔曲线一般用来绘制复杂有规律的图形。

绘制二次贝塞尔曲线语法：quadraticCurveTo(cp1x，cp1y，x，y)，cp1x、cp1y 为一个控制点，x、y 为结束点。

二次贝塞尔曲线有一个开始点、一个结束点（蓝色）以及一个控制点。其实二次贝塞尔曲线还是很常见的，用 PPT 画图或 word 时候，应该都使用过曲线这个工具，这就是很典型的二次贝塞尔曲线。

可以使用二次贝塞尔曲线绘制一个气泡框。

var canvas = document.getElementById("canvas");
canvas.width = 500;
canvas.height = 500;
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(75,25);
ctx.quadraticCurveTo(25,25,25,62);
ctx.quadraticCurveTo(25,100,50,100);
ctx.quadraticCurveTo(50,120,30,125);
ctx.quadraticCurveTo(60,120,65,100);
ctx.quadraticCurveTo(125,100,125,62);
ctx.quadraticCurveTo(125,25,75,25);
ctx.stroke();

效果如下

​

还有三次贝塞尔曲线，就是多了一个控制点，但还是有些难度的，可以以后再深入学习。处理以上提及的矩形，圆形，canvas 还可以绘制椭圆等一些复杂的图形，当然用这些基础的绘制方法仍可以组合形成各种复杂的图形，这就需要自己不断尝试实践。