Canvas介绍与引用
Canvas俗称画布，以标签写在html代码中，在浏览器中默认大小 300像素 * 150像素（宽 * 高，像素的单位是px）；且画布的标签属性只有width 和 height。
canvas元素默认被网格所覆盖（浏览器可视区就比作网格）。通常来说网格中的一个单元相当于canvas元素中的一像素。栅格的起点为左上角（即浏览器左上角坐标为（0,0））。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
canvas {
border: 1px solid #000;
}
</style>
</head>
<body>
</html>
<!-- 插入画布 -->
<canvas width="500" height="600"></canvas>
</body>
<script>
// 获取画布
var canvas = document. document.querySelector('canvas');
// getContext(),这个方法是用来获得渲染上下文和它的绘画功能
var ctx = canvas.getContext('2d');
</script>
注：
为其设置css样式就会在浏览器中看到,但是不能去设置宽高
</canvas>标签不可省，如果结束标签不存在，则文档的其余部分
会被认为是替代内容，将不会显示出来
获取到了画布就可以开始在画布中绘画了。切记，以下的代码均为<scripet></script>中的逻辑代码。
绘制矩形
注解：x 和 y 表示坐标，width 和 height 表示图形的宽高
fillRect(x, y, width, height) 绘制一个填充的矩形
strokeRect(x, y, width, height) 绘制一个矩形边框
clearRect(x, y, width, height) 清除指定矩形区域
例：
ctx.fillRect(25, 25, 100, 100);
绘制路径
画布绘制路径需要经过四步：
1、创建起始点
2、使用画图命令画出路径
3、把路径封闭
4、生成路径就能通过扫描或填充路径区域来渲染图形
beginPath():新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径
closePath():闭合路径之后图形绘制命令又重新指向到上下文中
stroke():通过线条来绘制图形轮廓
moveTo(x, y):将笔触移动到指定的坐标x以及y上
lineTo(x, y):绘制一条从当前位置到指定x以及y位置的直线
fill():通过填充路径的内容区域生成实心的图形
例：（绘制三角形）
//绘制一个三角形，每条线的颜色不一样
ctx.beginPath();
ctx.moveTo(80,80)
ctx.strokeStyle = 'green'
ctx.lineTo(200,200)
ctx.stroke()
ctx.beginPath()
ctx.moveTo(200,200)
ctx.strokeStyle = 'red'
ctx.lineTo(300,80)
ctx.stroke()
ctx.beginPath()
ctx.moveTo(300,80)
ctx.strokeStyle = 'yellow'
ctx.lineTo(80,80)
ctx.stroke()
圆弧： arc(x, y, radius, startAngle, endAngle, anticlockwise)
画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始
到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成
例：绘制笑脸
ctx.beginPath();
ctx.arc(75, 75, 50, 0, Math.PI * 2, true); //绘制
ctx.moveTo(110, 75);
ctx.arc(75, 75, 35, 0, Math.PI, false); //口（顺时针）
ctx.moveTo(65, 65);
ctx.arc(60, 65, 5, 0, Math.PI * 2, true); // 左眼
ctx.moveTo(95, 65);
ctx.arc(90, 65, 5, 0, Math.PI * 2, true); //右眼
ctx.stroke(); // 描边图形，路径自动封闭
注：arc()函数中表示角的单位是弧度，不是角度。角度与弧度的js表达式
弧度=（Math.P / 180）* 角度
添加样式和颜色（默认下颜色均为黑色）
添加颜色：
fillStyle = color; 设置图形的填充颜色
strokeStyle = color; 设置图形轮廓的颜色
globalAlpha = transparencyValue; 设置图形的透明度，有效值范围0–1
例：
// 这些 fillStyle 的值均为 '橙色'
ctx.fillStyle = "orange";
ctx.fillStyle = "#FFA500";
ctx.fillStyle = "rgb(255,165,0)";
ctx.fillStyle = "rgba(255,165,0,1)";
ctx.globalAlpha = 0.2; // 0-1 从完全透明到完全不透明
文字对齐方式
// ctx.moveTo(0,200);
// ctx.lineTo(600,200);
// ctx.stroke();
// ctx.font = '36px 微软雅黑'
// ctx.textBaseline = 'top' //上对齐
// ctx.textBaseline = 'bottom' //下对齐
// ctx.textBaseline = 'middle' //中间对齐
// ctx.fillText('北京',200,200)
ctx.moveTo(200,0);
ctx.lineTo(200,600);
ctx.stroke();
ctx.font = '36px 微软雅黑'
// ctx.textAlign = 'left' //左对齐
ctx.textAlign = 'right' //右对齐
ctx.textAlign = 'center' //中间对齐
ctx.fillText('北京',200,200)
贪吃蛇小游戏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
canvas {
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas width="500" height="600"></canvas>
</body>
</html>
<script>
let canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
let x = 0;
let y = 0;
let a = 1
let b = 1
setInterval(() => {
ctx.clearRect(x, y,a, b)
x += a;
y += b;
ctx.fillRect(x, y, 50, 50)
if (x >= 500 - 50 || x <= 0) {
a *= -1
}
if (y >= 600 - 50 || y <= 0) {
b *= -1
}
}, 10)
ctx.fillStyle = 'red';
</script>
