canvas drawImage

本来是写头像截取的,由于参数弄错了搞半天没写对...记一下...

语法

CanvasRenderingContext2D.drawImage()

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

image是绘制的元素,可以是HTMLImageElement,HTMLVideoElement,HTMLCanvasElement

拿去年撸的图(原图大小是600*420)出来做几个栗子

注意canvas的默认height是150,width是300,这里的宽高是画布大小不是style设置的展示大小

<canvas id="canvas" height="300" width="300"></canvas>
const ctx = document.getElementById('canvas').getContext('2d');

实际是用了三个canvas分开画的,都在一个上面的话效果就是重叠上去。

Demo1

ctx.drawImage(image, dx, dy);
dx, dy 图片绘制在canvas上的x轴位置和y轴位置,canvas左上角(0,0)

ctx1.drawImage(img, 0, 0);
ctx2.drawImage(img, 50, 50);
ctx3.drawImage(img, 50, 50);

Demo2

ctx.drawImage(image, dx, dy, dWidth, dHeight);
dWidth,dHeight 被绘制图形的宽度和高度,不设置时候是图片原大小,设置后会对图片进行缩放

ctx1.drawImage(img, 0, 0, 300, 210);
ctx2.drawImage(img, 50, 50, 300, 210);
ctx3.drawImage(img, 50, 50, 300, 210);

Demo3

ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
从原图像的左上角起(sx,sy)的位置处,截取宽高为sWidth和sHeight的图像,绘制到canvas的(dx,dy)处,绘制大小为宽dWidth,高dHeight;
sWidth,dWidth以及sHeight,dHeight不相同的时候会进行缩放,其实就是从图上截掉一块作为新图像,然后给新图像绘制到canvas里

ctx1.drawImage(img, 0, 0, 100, 100, 0, 0, 200, 200);
ctx2.drawImage(img, 0, 0, 300, 300, 0, 0, 200, 200);
ctx3.drawImage(img, 130, 50, 200, 200, 0, 0, 200, 200);

其他

使用drawImage的图需要设置crossorigin="anonymous";
获取图像

canvas.toDataURL('image/png')
Comments
Write a Comment