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)
}