canvas-画布

概述

HTML5 的 canvas 元素用于定义画布，是一个矩形区域，默认颜色为白色，默认大小为 300 * 150；通过 JavaScript 可以在该区域上绘制图像 ，开发人员可以控制其每一个像素；canvas 拥有多种绘制：路径、矩形、圆形、字符以及添加图像的方法。

注意：如果要设置画布的大小不能通过 CSS 样式进行设置，只能通过元素的 width 、height 属性进行设置，否则会出现问题。

相关属性、方法

getContext()

canvas.getContext(contextID) 获取一个用于在画布上绘图的环境（上下文，相当于一个绘制工具箱）；返回值为一个 CanvasRenderingContext2D 对象，该对象包含了一个画布所使用的大多数方法。

• canvas canvas 元素对象
• contextID 绘制的类型，是个字符串，目前支持 2D（二维）绘图

moveTo()

context.moveTo(x,y) 将画笔移动到指定位置，准备绘制线条

• context 获取的上下文（绘图环境）
• x, y 画布中某个位置（横纵坐标）

lineTo()

context.lineTo(x,y) 该方法用于在画布上添加一个新点，然后创建从该点到画布中最后指定点（上一个点）的线条；该方法并不会真正绘制线条。

• 参数同 moveTo()

stroke()

context.stroke() 该方法会在画布上实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径；路径的颜色默认为黑色。

示例：绘制一个三角形

<canvas id="can" width="500" height="400"></canvas>

<script>
  var c = document.querySelector('#can')
  // 获取绘图环境
  var ctx = c.getContext('2d')
  // 移动位置
  ctx.moveTo(100, 100)
  // 添加点（斜边）
  ctx.lineTo(200, 300)
  // 添加新点（直角边）
  ctx.lineTo(100, 300)
  // 添加新点（直角边）
  ctx.lineTo(100, 100)

  ctx.stroke()
</script>

CSS：

canvas {
   
  border: 1px solid gray;
}

关于线条问题

canvas 中的线条默认的粗细为 1px，默认颜色为黑色，但是看到的线条颜色为灰色，线条粗细为 2px。

产生原因：canvas 绘制线条时是从中间向两边绘制的，比如说定义 x 坐标为 1，会以 1 为中心，向两边分为 0.5px（上下或左右），但是浏览器在渲染时不支持小于 0.5px 的内容显示，所以会将 0.5px 绘制成 1px，然后两边各 1px，所以得到的就是双倍的线条，颜色比较浅。

解决办法：将 x 坐标或 y 坐标，向前或向后移动 0.5px。

举例：

<canvas id="can" width="500" height="400"></canvas>

<script>
  var c = document.querySelector('#can')
  // 获取上下文（绘图工具箱）
  var ctx = c.getContext('2d')

  // 移动位置
  ctx.moveTo(100, 100.5) // 向下移动 0.5px
  // 添加点
  ctx.lineTo(200, 100.5) // 向下移动 0.5px
  
  // 移动位置
  ctx.moveTo(100, 150)
  // 添加新点
  ctx.lineTo(200, 150)

  ctx.stroke()
</script>

CSS：

canvas {
   
  border: 1px solid gray;
}

修改线条颜色和粗细

strokeStyle

context.strokeStyle=color | gradient | pattern 通过该属性可以设置或返回通过 stroke() 方法绘制的线条的颜色、渐变或模式。

• color css 颜色值
• gradient 渐变对象
• pattern 用于填充绘图的 pattern 对象

lineWidth

context.lineWidth=number 该属性可设置或返回当前线条的宽度，以像素计

• number 像素值，不带 px 后缀

示例：绘制一条线颜色为红色粗细为 6px，另一条线颜色为蓝色粗细为 10px

<canvas id="can" width="500" height="400"></canvas>

<script>
  var c = document.querySelector('#can')
  // 获取上下文（绘图工具箱）
  var ctx = c.getContext('2d')

  // 移动位置
  ctx.moveTo(100, 100) 
  // 添加点
  ctx.lineTo(200, 100)
  // 设置线条颜色为红色
  ctx.strokeStyle = 'red'
  // 设置线条粗细为 6px
  ctx.lineWidth = 6
  ctx.stroke()

  // 移动位置
  ctx.moveTo(100, 150)
  // 添加新点
  ctx.lineTo(200, 150)
  // 设置线条粗细为蓝色
  ctx.strokeStyle = 'blue'
  // 线条粗细为 10px
  ctx.lineWidth = 10
  ctx.stroke()
</script>

CSS：

canvas {
   
  border: 1px solid gray;
}

由上图可以发现，并没有达到预期的效果，线条样式均被最后设置的样式覆盖了；这时通过 beginPath() 在指定位置开启新路径就可以解决上面的样式覆盖问题。

重置路径

beginPath()

context.beginPath() 该方法用于开始一条路径，或重置当前的路径；通过该方法可以隔开路径，这样就可以为路径设置不同的样式。

代码：

<canvas id="can" width="500" height="200"></canvas>

<script>
  var c = document.