Canvas篇
Canvas API 提供了一个通过JavaScript 和 HTML的元素来绘制图形的方式。
可用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。
Canvas 的默认大小为300像素×150像素（宽×高，像素的单位是px）
看起来和 标签只有两个自带属性— width和height。
<canvas id="canvas" width="300" height="300">
Sorry, your browser doesn't support the <canvas>
canvas>
clearRect(x, y, width, height)
注：
toDataURL第二个参数 可用于图片像素压缩
canvas.toDataURL(type, encoderOptions)
1. type 可选
图片格式，默认为 image/png
2. encoderOptions 可选
在指定图片格式为 image/jpeg或image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值0.92。其他参数会被忽略。
注：
drawImage改变原有图片宽高 可用于图片压缩
ctx.drawImage(image, dx, dy)
ctx.drawImage(image, dx, dy, dWidth, dHeight)
ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
1.sx可选
需要绘制到目标上下文中的，image的矩形（裁剪）选择框的左上角 X 轴坐标。
2.sy可选
需要绘制到目标上下文中的，image的矩形（裁剪）选择框的左上角 Y 轴坐标。
3.sWidth可选
需要绘制到目标上下文中的，image的矩形（裁剪）选择框的宽度。如果不说明，整个矩形（裁剪）从坐标的sx和sy开始，到image的右下角结束。
4.sHeight可选
需要绘制到目标上下文中的，image的矩形（裁剪）选择框的高度。
5.dx
image的左上角在目标canvas上 X 轴坐标。
6.dy
image的左上角在目标canvas上 Y 轴坐标。
7.dWidth可选
image在目标canvas上绘制的宽度。 允许对绘制的image进行缩放。 如果不说明， 在绘制时image宽度不会缩放。
8.dHeight可选
image在目标canvas上绘制的高度。 允许对绘制的image进行缩放。 如果不说明， 在绘制时image高度不会缩放。
元素有一个叫做getContext()的方法，这个方法是用来获得渲染上下文和它的绘画功能。getContext()只有一个参数。
示例1：将图像文件转换为base64字符串
var image = new Image()
image.src = url // 此处url为要转base64的图片地址
let data = '' // 用于存储最终转码过的图片
// onload为当前图片加载完成之后在对其渲染
image.onload = () => {
var canvas = document.createElement('canvas') // 创建一个canvas元素
var cxt = canvas.getContext('2d') // context相当于画笔，里面有各种可以进行绘图的API
// 此处可以改变图片宽高来达到压缩图片的效果（例如：image.width/2；image.height/2）
canvas.width = image.width
canvas.height = image.height
cxt.clearRect(0, 0, image.width, image.height）
cxt.drawImage(image, 0, 0)
// toDataURL第二个参数值越小，所绘制出的图像越模糊
data = canvas.toDataURL('image/*', 0.7)
}
示例2：绘制三角形
function draw() {
var canvas = document.getElementById('tutorial')
// 使用canvas.getContext来判断当前浏览器是否支持Canvas
if (canvas.getContext) {
var ctx = canvas.getContext('2d')
ctx.beginPath()
ctx.moveTo(75, 50)
ctx.lineTo(100, 75)
ctx.lineTo(100, 25)
ctx.fill()
}
}
// 使用方法
<body onload="draw();">
<canvas id="tutorial" width="150" height="150"></canvas>
</body>