h5 canvas（1）

「这是我参与11月更文挑战的第6天，活动详情查看：2021最后一次更文挑战」

菜鸟教程介绍：<canvas> 是 HTML5 新增的，一个可以使用脚本(通常为 JavaScript) 在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画。

基本使用

• 首先我们需要先创建一个canvas标签

<canvas id="canvas" width="300" height="300"></canvas>

• 然后我们在JavaScript里面去获取这个canvas，canvas会公开一个或多个渲染上下文(画笔)，使用渲染上下文来绘制和处理要展示的内容。下面是制作出了一个2d的画笔

var c=document.getElementById("canvas");
var ctx=c.getContext("2d"); // 这个d严格区分大小写，不能写大写2D

画矩形

ctx.fillRect(10,10,100,100)

上面的是一个填充的矩形，当然还可以画一个矩形的边

ctx.strokeRect(10,10,100,100)

同时我们还可以清除矩形

ctx.clearRect(15,15,50,50)

画路径

图形的基本元素是路径，一个路径，甚至一个子路径，都是闭合的。

基本步骤如下

1. 创建路径起始点
2. 根据不同的绘制方法绘制路径
3. 把路径封闭
4. 通过描边或者填充路径来渲染图形

这几步就需要下面这些方法

1. ctx.beginPath()
   新建一条路径
2. ctx.moveTo(x, y)
   相当于设置起始点
3. ctx.closePath()
   闭合路径
4. ctx.stroke()
   描边
5. ctx.fill()
   填充
6. fillStyle = color
   设置图形的填充颜色
7. strokeStyle = color
   设置图形轮廓的颜色
8. fillText(text, x, y [, maxWidth]) 在指定的 (x,y) 位置填充指定的文本，绘制的最大宽度是可选的。
9. strokeText(text, x, y [, maxWidth]) 在指定的 (x,y) 位置绘制文本边框，绘制的最大宽度是可选的。

接下来我们就用上面这些地方去绘画一下各种图案吧

画线

ctx.fillStyle = '#000000'
ctx.beginPath(); 
ctx.moveTo(10, 10); 
ctx.lineTo(200, 50);  
ctx.stroke();

如果不设置颜色，默认也是黑色

画三角形

ctx.beginPath(); 
ctx.moveTo(50, 10); 
ctx.lineTo(200, 50); 
ctx.lineTo(200, 200);
ctx.closePath();

ctx.stroke();

虽然看上去我们只是画了两条线，但是使用了closePath方法，它会让当前点到起始点连接起来，所以就形成了三角形的图案

如果ctx.stroke()变成ctx.fill()就会变成填充的三角形了

画圆弧或圆

圆弧方式1

ctx.beginPath(); 
ctx.arc(50, 50, 40, 0, Math.PI / 2, false);
ctx.closePath();
ctx.stroke();

圆弧方式2

ctx.moveTo(50, 50);
//参数1、2：控制点1坐标   参数3、4：控制点2坐标  参数4：圆弧半径
ctx.arcTo(200, 50, 200, 200, 100);
ctx.lineTo(200, 200)
ctx.stroke();

圆

ctx.beginPath(); 
ctx.arc(50, 50, 40, 0, 2 * Math.PI, false);
ctx.stroke();

绘制文本

绘制文本的话，有三个参数，第一个是要绘制的文字，第二个是第三个参数是开始绘制的点，分别是绘制的x轴和y轴，还有一个可选参数是最大可绘制的宽度, 如果绘制的宽度不够宽，则绘制的文字会被压缩

ctx.font = "100px sans-serif"
ctx.fillText("测试", 10, 100, 100);
ctx.strokeText("测试", 10, 200)
ctx.stroke();