项目学习——canvas标签

canvas在本次项目中是重难点，经过这次项目我对canvas也有了部分认识，学习中没有查canvas标签的名字，因此，我将他称为画布标签。

首先，canvas的宽高与其他标签不同，他的宽高是标签内属性，在我使用的过程中发现，只有设置标签内宽高才可以拖动框的大小。

然后在 HTML5 中， 元素通过 getContext 方法获取一个上下文对象，通过这个上下文对象，你可以在 上进行绘图操作。主要的上下文类型有

"2d" 和 "webgl"，分别用于2D和WebGL渲染。在本次项目中我只用到了2D，因此在这里就不说WebGL了。

之后就该使用到drawImage方法：drawImage方法是在canvas标签中绘制图像，需要结合Image方法使用，该方法可以接受不同的参数组合，以实现对图像的缩放、剪切和绘制。(本次也是只用到这种，其余的等到再用到的时候再补充)

context.drawImage(image, dx, dy);

context.drawImage(image, dx, dy, dWidth, dHeight);

context.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

• image: 要绘制到画布上的图像，可以是 HTMLImageElement、HTMLCanvasElement、HTMLVideoElement 等。
• sx, sy: 起始坐标（源图像的左上角坐标）。
• sWidth, sHeight: 源图像的宽度和高度。
• dx, dy: 目标坐标（在画布上绘制的位置）。
• dWidth, dHeight: 绘制到画布上的宽度和高度。

推荐一个关于canvas的组件网站：画布 | fabric.js中文教程 (gitee.io)

后序持续更新......