重学前端——HTML5（canvas）

一、canvas基本用法

1、什么是canvas(画布)

• <canvas>是 HTML5 新增的元素
• 可以使用标签来定义一个canvas元素
• canvas本身没有绘图能力，通过使用JavaScript中的脚本来绘制图形。

2、绘制注意事项

(1)、使用标签时，建议要成对出现，不要使用闭合的形式。

(2)、某些较老的浏览器不支持HTML元素"canvas"，我们需要在<canvas>标签中提供替换内容；例：

<canvas><span>Your browser does not support the canvas element.</span></canvas>

(3)、canvas元素默认具有高宽 width: 300px; height: 150px;

• <canvas> 标签只有两个属性 —— width和height, 都是可选的；
• 当没有设置宽度和高度的时候，canvas会初始化为默认宽高

3、设置宽高

不要使用css给画布设置宽高，直接写width, height属性。

• 正确写法：

<canvas width="500px" height="300px">
	<span>Your browser does not support the canvas element.</span>
</canvas>

• 错误写法:

<canvas class="canvas-style">
	<span>Your browser does not support the canvas element.</span>
 </canvas>
<style>
   .canvas-style {
     width: 500px;
     height: 300px;
   }
</style>

原因：
html属性设置width height时只影响画布本身不影画布内容；
css属性设置width height时会使画布中的内容也等比例缩放；

4、渲染上下文 getContext()

• <canvas> 元素只是创造了一个固定大小的画布，要想在它上面去绘制内容，我们需要找到它的渲染上下文；
• <canvas>元素有一个叫做 getContext() 的方法，这个方法是用来获得渲染上下文和它的绘画功能；
• 如何渲染上下文 getContext()

1、getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
2、getContext()只有一个参数，上下文的格式

----->获取方式
  var canvas = document.getElementById('box');
  var ctx = canvas.getContext('2d');
  
----->检查支持性
  var canvas = document.getElementById('box');
  if (canvas.getContext){
		var ctx = canvas.getContext('2d');
	} 

二、canvas绘制矩形

HTML中的元素canvas只支持一种原生的图形绘制：矩形。
所有其他的图形的绘制都至少需要生成一条路径。

1、绘制矩形

canvas提供了三种方法绘制矩形：
1----> 绘制一个填充的矩形（填充色默认为黑色）
fillRect(x, y, width, height)
2----> 绘制一个矩形的边框（默认边框为:一像素实心黑色）
strokeRect(x, y, width, height)
3 ----> 清除指定矩形区域，让清除部分完全透明。
clearRect(x, y, width, height)

1、x与y指定了在canvas画布上所绘制的矩形的左上角（相对于原点）的坐标,不加单位。
2、width和height设置矩形的尺寸。（存在边框的话，边框会在width上占据一个边框的宽度，height同理）
3、width和height可加单位可不加单位

2、strokeRect时，边框像素渲染问题

• 按照默认渲染出来的边框是1px的
• canvas在渲染矩形边框时，边框宽度是平均分在偏移位置的两侧。
• 渲染例子：

// 例子1：
context.strokeRect(10,10,50,50)
	1、想要渲染宽高都为50的矩形，距离画布左上角为10
	2、但是边框会渲染在10.5 和 9.5之间，因为边框的宽度均分在偏移位置两侧
	3、但是浏览器是不会让一个像素只用自己的一半的,因此相当于边框会渲染在9到11之间，就是2像素边框

// 例子2：
context.strokeRect(10.5,10.5,50,50)
	边框会渲染在10到11之间，1像素边框

3、添加样式和颜色

fillStyle

设置图形的填充颜色。

strokeStyle

设置图形轮廓的颜色。
默认情况下，线条和填充颜色都是黑色（CSS 颜色值 #000000）

lineWidth

• 设置当前绘线的粗细。属性值必须为正数。
• 描述线段宽度的数字。
• 默认值是1.0
• 0、 负数、 Infinity 和 NaN 会被忽略

注意：

添加样式和颜色的代码都要写在绘制图形代码的上面，否则填充颜色等样式不生效

注意学习canvas时要有同步思维，有别于浏览器本身的渲染机制。
浏览器样式的添加可以之后添加，因为浏览器添加样式之前还没有绘制出来，
但是canvas不可以，样式要写在绘制之前。

4、lineJoin

设定线条与线条间接合处的样式（默认是 miter）

• round : 圆角
• bevel : 斜角
• miter : 直角

三、canvas绘制路径

图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。

1、步骤

• 1.首先，你需要创建路径起始点。
• 2.然后你使用画图命令去画出路径
• 3.之后你把路径封闭。
• 4.一旦路径生成，你就能通过描边或填充路径区域来渲染图形。

// 绘制例子：
window.onload = () => {
   const canvas = document.querySelector('#test')
   if (canvas.getContext) {
     const ctx = canvas.getContext("2d")
     // 1、创建路径起始点
     ctx.moveTo(50, 50)
     // 2、使用画图命令去画出路径
     ctx.lineTo(50, 100)
     ctx.lineTo(100, 100)
     // 3、路径封闭
     ctx.closePath()
     // 4、描边来绘制图形轮廓
     // 注意要先闭合再绘制轮廓，否则闭合样式没有
     ctx.stroke()
   }
 }

2、绘制三角形

1、beginPath()

• 新建一条路径，生成之后，图形绘制命令被指向到路径上准备生成路径。
• 生成路径的第一步叫做beginPath()。本质上，路径是由很多子路径构成，这些子路径都是在一个列表中，
• 所有的子路径（线、弧形、等等）构成图形。而每次这个方法调用之后，列表清空重置，
• 然后我们就可以重新绘制新的图形。

为了防止一种情况：我们在同一个canvas上绘制了多个路径，最后执行最后一条路径的填充时，会把前面的都填充上，为了避免这种情况，我们在每次绘制之前使用beginPath()清空路径即可。

2、moveTo(x, y)

• 将笔触移动到指定的坐标x以及y上
• 当canvas初始化或者beginPath()调用后，你通常会使用moveTo()函数设置起点

3、lineTo(x, y)

• 将笔触移动到指定的坐标x以及y上
• 绘制一条从当前位置到指定x以及y位置的直线。

4、closePath()

• 闭合路径之后图形绘制命令又重新指向到上下文中。
• 闭合路径closePath(),不是必需的。这个方法会通过绘制一条从当前点到开始点的直线来闭合图形。
• 如果图形是已经闭合了的，即当前点为开始点，该函数什么也不做
• 当你调用fill()函数时，所有没有闭合的形状都会自动闭合，所以你不需要调用closePath()函数。
• 但是调用stroke()时不会自动闭合

5、stroke()

• 通过线条来绘制图形轮廓。
• 不会自动调用closePath()

6、fill()

• 通过填充路径的内容区域生成实心的图形。
• 自动调用closePath()

3、绘制矩形

rect(x, y, width, height)
绘制一个左上角坐标为（x,y），宽高为width以及height的矩形。
当该方法执行的时候，moveTo()方法自动设置坐标参数（0,0）。
也就是说，当前笔触自动重置会默认坐标

4、lineCap

lineCap 是 Canvas 2D API 指定如何绘制每一条线段末端的属性。
默认值是 butt。
有3个可能的值分别是：

• butt :线段末端以方形结束。
• round :线段末端以圆形结束
• square:线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域

5、save & restore

save() 是 Canvas 2D API 通过将当前状态放入栈中，保存 canvas 全部状态的方法

restore() 是 Canvas 2D API 通过在绘图状态栈中弹出顶端的状态，将 canvas 恢复到最近的保存状态的方法

// 绘制图形默认的模板，条路径都按照这样的形式绘制
ctx.save()
...样式设置
ctx.beginPath()
...路径设置
ctx.restore()

• 1、路径容器
  - 每次调用路径api时，都会往路径容器中做登记
  - 调用beiginPath时，清空整个路径容器
• 2、样式容器
  - 每次调用样式api时，都会往样式容器里做登记
  - 调用save时，将样式容器里的状态压入样式栈
  - 调用restore时，将样式栈的栈顶状态弹出到样式容器里，进行覆盖
• 3、样式栈
  - 调用save时，将样式容器里的状态压入样式栈
  - 调用restore时，将样式栈的栈顶状态弹出到样式容器里，进行覆盖