Canvas 画布
一、简介
canvas是HTML5中新增的一个元素，专门用来绘制图形。在页面放置一个canvas元素，就相当于放置了一个画布，可以在其中进行图形的绘制。
注意这个很重要
简单的在 HTML 页面添加一个 canvas 元素，设定宽高，添加 id 便于 javascript 获取。
创建canvas的时候，他默认的宽高为300px*150px。
<canvas id="canvas">我是一个画布</canvas>
我们在HTML页面中直接插入canvas标签，也可以对它设置宽度和高度，切记设置canvas的时候不可以利用css样式进行设置。
<canvas id="canvas" width="400" height="300">我是一个画布</canvas>
二、HTML 部分
-
canvas标签里如果添加文本，那么当浏览器不支持canvas时显示文本
<canvas id="canvas" width="300" height="300">
您的浏览器不支持 canvas
</canvas>
这是获取画笔的方法
var canvas= document.getElementById(canvas);
var ctx = a.getContext("2d");
- 获取到
canvas元素 - 调用它的
getContext()方法获取绘图上下文环境，参数必须为2d，未来可能会有3d
四、路径
4.1 beginPath() 开始新路径
表示重新开始新的路径。
canvas 是基于状态的绘图，开启一条新的路径，就可以设置新的状态。但是 beginPath() 不会将状态重置回默认值。
同一条路径上的线条和曲线都会是相同的颜色。所以需要绘制不同颜色的时候，必须开启新的路径。
4.2 closePath() 结束路径
用于结束路径，与 beginPath() 并不一定成对出现。
注意：默认结束路径后，图形自动封闭，即首尾相连。所以有些时候不会用到结束路径。
4.3 stroke() 绘制路径
绘制已定义的路径
4.4 fill() 填充路径
将准备画的路径块填充
fill() 会覆盖描边 stroke() 边框的一半。所以，在需要描边的填充色，需要先填充，后描边。
我画你猜制作（简单）
这个很简单，运用了一点点拖拽的原理
首先我们把canvas写好
<canvas id="canvas" width="600" height="600">
我是一个画布
</canvas>
然后把样式也稍微写一点点
body{
width: 100%;
height: 100%;
background: black;
}
canvas{
background: #fff;
}
接下来我画个小人
image.png
画小人也很简单，只要算好起始点和终点就可以了
以下是我用画布写的动画,简单清晰明了。如果你想学习更多的画布知识关注我吧！！！！！
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.beginPath(); //笑脸
ctx.arc(100, 100, 50, 0, 360 * Math.PI / 180, false);
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.arc(80, 90, 10, 0, 180 * Math.PI / 180, true);
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.arc(120, 90, 10, 0, 180 * Math.PI / 180, true);
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.arc(100, 100, 30, 0, 180 * Math.PI / 180, false);
ctx.stroke();
ctx.closePath(); //身
ctx.beginPath(); //下笔
ctx.moveTo(100, 150); //起始坐标
ctx.lineTo(100, 250); //终点坐标
ctx.stroke(); //实线
ctx.closePath(); //抬笔
ctx.beginPath();
ctx.moveTo(100, 180);
ctx.lineTo(50, 240);
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.moveTo(100, 180);
ctx.lineTo(150, 240);
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.moveTo(100, 250);
ctx.lineTo(50, 340);
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.moveTo(100, 250);
ctx.lineTo(150, 340);
ctx.stroke();
ctx.closePath(); //第二个
ctx.beginPath();
ctx.arc(300, 100, 50, 0, 360 * Math.PI / 180, false);
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.arc(280, 90, 10, 0, 180 * Math.PI / 180, true);
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.arc(320, 90, 10, 0, 180 * Math.PI / 180, true);
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.arc(300, 100, 30, 0, 180 * Math.PI / 180, false);
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.moveTo(300, 150);
ctx.lineTo(300, 250);
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.moveTo(300, 180);
ctx.lineTo(250, 240);
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.moveTo(300, 180);
ctx.lineTo(350, 240);
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.moveTo(300, 250);
ctx.lineTo(250, 340);
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.moveTo(300, 250);
ctx.lineTo(350, 340);
ctx.stroke();
ctx.closePath(); //心
ctx.beginPath();
ctx.strokeStyle = "red"
ctx.arc(180, 200, 20, 0, 180 * Math.PI / 180, true);
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.strokeStyle = "red"
ctx.arc(220, 200, 20, 0, 180 * Math.PI / 180, true); //两个半圆
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.strokeStyle = "red"
ctx.moveTo(160, 200);
ctx.lineTo(200, 250);
ctx.stroke();
ctx.closePath();
ctx.beginPath();
ctx.strokeStyle = "red"
ctx.moveTo(240, 200);
ctx.lineTo(200, 250);
ctx.stroke();
ctx.closePath();
