canvas
简介
canvas是HTML5的新特性，它允许我们使用canvas元素在网页上通过JavaScript绘制图像
canvas标签
<canvas>标签只是一个图形容器，相当于一个画布，canvas元素本身是不具备绘图能力的，所有的绘制工作必须在JavaScript内部完成，相当于是用画笔在画布上绘画
<canvas> id="canvas" width="114" height="514"></canvas>值得注意的是，canvas如果不指定宽高的话，默认宽高为300x150
- 浏览器默认认为canvas是一张图片，甚至可以直接保存到本地
- 给canvas画布内添加文本、标签内容是没有任何意义的
- 绘制图形、显示图像必须要通过js来实现
通过canvas绘制
注意：画布的宽高必须通过属性设置，不能通过css样式设置
绘制三角形
首先需要初始化一个canvas画布，通过getContext方法获取画布的笔：
let canvas = document.querySelector('#canvas');
//获取画布的笔
let ctx = canvas.getContext('2d')//2d代表平面绘制，3d代表立体绘制
console.log(ctx);然后就可以通过moveTo方法移动笔，使用closePath方法来闭合线段
//绘制线段:绘制线段的起点
ctx.moveTo(100, 100)
//其他点（可以有多个）
ctx.lineTo(100, 200)
ctx.lineTo(200, 100)
//连接起点和终点（闭合）
ctx.closePath()可以设置线段的粗细和颜色
//设置线段的颜色和粗细
ctx.strokeStyle ="blue"
ctx.lineWidth = "2"还可以在线段之间填充颜色
//填充颜色
ctx.fillStyle = "red"
ctx.fill()最后，使用stroke方法即可完成绘制，完成绘制后就不能再改动原图形了
//开始绘制
ctx.stroke()绘制矩形
描边绘制
ctx.strokeRect(100,100,100,200)P.S: strokeRect(x,y,w,h)前两个参数是 x(对于左边框)与 y(对于顶部)，后两个参数是宽高
填充绘制
ctx.fillStyle = 'red'
ctx.fill()
ctx.fillRect(300,100,100,200)P.S: fillRect一定要写在最后面
绘制圆形
arc(x, y, radius, startAngle, endAngle, anticlockwise)- x,y：圆心的坐标
- radius：半径
- startAngle：开始角度（弧度制）
- endAngle：结束角度（弧度制）
- anticlockwise：是否是逆时针，true为逆时针，false为顺时针
//绘制圆形
ctx.beginPath();
ctx.arc(100, 100, 50, 0, 2 * Math.PI, true);
//设置填充颜色
ctx.fillStyle ='pink'
ctx.fill()
ctx.strokeStyle ="pink"
ctx.stroke()绘制半圆形：
//绘制半圆(逆时针)
ctx.beginPath()
ctx.arc(250,100,50,0,Math.PI,true)
ctx.fillStyle ='pink'
ctx.fill()
ctx.strokeStyle ="pink"
ctx.stroke()清除画布与绘制文字
清除画布：ctx.clearRect(x,y,width,height)
- x,y : 从x,y开始清除
- width,height 要清除的宽度、高度
绘制文字：ctx.fillText('HELLO!',x,y)
设置文字字体：ctx.font="40px 微软雅黑"
//绘制矩形
ctx.fillRect(100,200,100,200)
// 清除画布(一部分)
ctx.clearRect(100,200,50,100)
// // 清除画布(整个)
// ctx.clearRect(0,0,600,400)
//设置文字字体
ctx.font="40px 微软雅黑"
//绘制文字
ctx.fillText('HELLO!',50,60)