Canvas图片

Canvas图片

绘制图片

使用 drawImage 方法将它渲染到 canvas 里，用法有三种，是根据不同的传参实现不同的功能。参数：

image：绘制到上下文的元素。
sx、sy：裁剪框的左上角X轴坐标和Y轴坐标。
sWidth、sHeight：裁剪框的宽度和高度。
dx、dy：绘制到上下文的元素，在上下文中左上角的X轴坐标和Y轴坐标。
dWidth、dHeight：绘制到上下文的元素，在上下文中绘制的宽度和高度。如果不说明，在绘制时image宽度和高度不会缩放。

绘制

drawImage(image, dx, dy)
只有单纯的绘制功能，可以绘制图片、视频和别的Canvas对象等

const img = new Image()
img.src = './test/webGIS/vite-cesium/src/assets/vue.svg'

img.onload = () => {
            ctx.drawImage(img, 0, 0)
        }

缩放

drawImage(image, dx, dy, dWidth, dHeight)
在绘制的基础上又增加了两个参数，这两个参数能控制绘制元素的大小，整体实现一个缩放的效果。
在设置dWidth和dHeight两个参数时，不能只设置其中一个，要么都设置要么都不设置。

img.onload = () => {
           ctx.drawImage(img, 0, 0, 500, 500)
        }

裁剪

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
在缩放的基础上又增加了四个参数，整体也是在缩放的基础上增加了裁剪的功能。

img.onload = () => {
            ctx.drawImage(img,10,10, 50,50, 0, 0, 500, 500)
        }