如何动态改变canvas 的大小

改完canvas的属性 widht、height之後

你得需重绘画面(render)

如果用复制的，画面会照先前的比例

假如原本大小 400 x 400

放大1000 x 1000 你复制的画面就会只有一小块

如果是要连画面一起拉伸，

1.直接改变canvas的样式就行

2.算好缩放比例，把比例的参数加进render函数的坐标演算中(不如说你一开始就得有这参数)，重新再跑一次

sx：sy：sw：sh：定义了从image中截取一部分sxsy起始位置，swsh宽度

dx：dy：dw：dh：定义了把上述截取的部分显示在哪里，dxdy在canvas中的起始位置，dwdh显示的宽度和高度。

引入图像到canvas里需要以下两步基本 *** 作：

HTMLImageElement

这些图片是由Image()函数构造出来的，或者任何的<img>元素

HTMLVideoElement

用一个HTML的 <video>元素作为你的图片源，可以从视频中抓取当前帧作为一个图像

HTMLCanvasElement

可以使用另一个 <canvas>元素作为你的图片源。

ImageBitmap

这是一个高性能的位图，可以低延迟地绘制，它可以从上述的所有源以及其它几种源中生成。

这些源统一由 CanvasImageSource类型来引用。

有几种方式可以获取到我们需要在canvas上使用的图片

drawImage(image, x, y)

其中 image 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始坐标。

drawImage(image, x, y, width, height)

这个方法多了2个参数：width 和 height，这两个参数用来控制 当向canvas画入时应该缩放的大小

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

第一个参数和其它的是相同的，都是一个图像或者另一个 canvas 的引用。其它8个参数最好是参照右边的图解，前4个是定义图像源的切片位置和大小，后4个则是定义切片的目标显示位置和大小。

---