一篇文章掌握常见的canvas属性和前端使用canvas完成的常见功能

一、什么是canvas?

h5新增属性，使用js画图功能

二、如何使用canvas？

2.1 创建画布

一个画布在网页中是一个矩形框，通过 元素来绘制，标签通常需要指定一个id属性 (脚本中经常引用)， width 和 height 属性定义的画布的大小， 默认情况下 <canvas> 元素没有边框和内容。

<canvas id="myCanvas" width="500" height="150" style="border: 1px solid red"></canvas>

2.2 使用js-api绘制图形

首先，找到 <canvas> 元素；然后，创建 context 对象；最后，调相应API；

var c = document.getElementById('myCanvas')
var cvsCtx = c.getContext('2d')
//绘制图形
cvsCtx.fillStyle = "pink";

getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
附：部分2d的相关API
（本来准备整理完的，但是好麻烦啊，遂卒。。一起来站在巨人肩上，直接参考：MDN中的canvas文档）

绘制类型	API	效果	使用方式
矩形	fillRect(x, y, width, height)	实心矩形	cvsCtx.fillRect(0, 0, 150, 75);
矩形	strokeRect(x, y, width, height)	矩形边框	cvsCtx.strokeRect(0, 0, 150, 75);
矩形	clearRect(x, y, width, height)	清除范围内的所有矩形	cvsCtx.clearRect(0, 0, 150, 75);
文字	fillText(‘Text’, x轴起始, y轴结束, [max-width])	实心文字	cvsCtx.fillText(‘第一个字体’, , 10);
文字	strokeText(‘Text’, x轴起始, y轴结束 [max-width])	虚心文字	cvsCtx.strokeText(‘第一个字体’, 0, 20);
文字	measureText(‘Text’)	测量文字长度，返回文本尺寸对象	var data = cvsCtx.measureText(‘第一个字体’);
字体样式	.font = ‘[style], [weight,] size, family’;	文字样式，默认“10px sans-serif ”	cvsCtx.font = ‘bold 48px serif’;
字体样式	.textAlign =“left”/ “right” /“center”/ “start(默认)”/“end”;	水平对齐方式（基线为准）	cvsCtx.textAlign = ‘center’;
字体样式	.direction=“ltl”/ “rtl” /“inherit”(默认)"	向左对齐/右对齐/继承	cvsCtx.direction = ‘rtl’
内部样式	.fillStyle = “#f00/pink”;	内部形状的颜色，可以是16位rgb，也可以是字符串，默认为#000	cvsCtx.fillStyle = “pink”;
边框样式	.strokeStyle = “#f00/pink”;	形状边框的颜色，可以是16位rgb，也可以是字符串，默认为#000	cvsCtx.strokeStyle = “pink”;

注意点：

1. x与y指定了在canvas画布上所绘制的矩形的左上角（相对于原点）的坐标。width和height设置矩形的尺寸。
2. 参数中使用方括号[…]：代表可选参数

三、canvas基础练习

3.1使用canvas绘制矩形

<canvas id="myCanvas" width="800" height="200" style="border: 1px solid red"></canvas>
<script>
    var c = document.getElementById('myCanvas')
    var cvsCtx = c.getContext('2d')
    // 绘制实心矩形（起始横坐标，起始纵坐标，宽，高）
    cvsCtx.fillStyle = "pink";
    cvsCtx.strokeStyle = "blue";
    cvsCtx.fillRect(0, 0, 150, 75);
    // 绘制虚心矩形（起始横坐标，起始纵坐标，宽，高）
    cvsCtx.strokeRect(100, 10, 150, 80);
    // 清除
    // cvsCtx.clearRect(0, 0, 200, 100);
</script>

3.2使用canvas写字

<canvas id="myCanvas" width="800" height="200" style="border: 1px solid red"></canvas>
<script>
    var c = document.getElementById('myCanvas')
    var cvsCtx = c.getContext('2d')
    // 绘制填充文字（文字，起始横坐标，起始纵坐标），样式要写在前面，不然不起作用
    cvsCtx.font = '50px serif';
    cvsCtx.fillStyle = "pink";
    cvsCtx.textBaseline = 'top';
    cvsCtx.direction = 'rtl'
    cvsCtx.fillText('实线', 130, 60);
    cvsCtx.strokeText('虚线', 200, 10);
    // measureText--查询字段信息
    // var metrics = cvsCtx.measureText('第一个canvas');
    // console.log(metrics);
</script>

3.3 使用canvas画线组成一个三角形

<canvas id="myCanvas" width="800" height="200" style="border: 1px solid red"></canvas>
<script>
    var c = document.getElementById('myCanvas')
    var cvsCtx = c.getContext('2d')
    // 绘制颜色
    cvsCtx.strokeStyle = "pink";
    // 绘制宽度
    cvsCtx.lineWidth = 10;
    // 清空之前的路径新建路径
    cvsCtx.beginPath();
    // 起点
    cvsCtx.moveTo(20, 20);
    // 终点
    cvsCtx.lineTo(200, 20);
    // 拐点1
    cvsCtx.lineTo(