javascript - 我在canvas中插入一个图片，如何控制图片大小-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

javascript - 我在canvas中插入一个图片，如何控制图片大小

伊谢尔伦 2017-04-10 15:09:56

[JavaScript讨论组]

448

    var canvas = document.getElementById("canvas"),
        ctx = canvas.getContext('2d'),
        img = new Image();
        img.src="xxx.png";
        img.onload = function(){
            ctx.drawImage(img,0,0);
        }

这样图片是原尺寸，我希望可以调整图像大小，怎么破？

伊谢尔伦

小伙看你根骨奇佳，潜力无限，来学PHP伐。

全部回复(1)

迷茫2017-04-10 15:11:56 1楼

drawImage有三种原型

drawImage(image, dx, dy) 
drawImage(image, dx, dy, dw, dh) 
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

sx：sy：sw：sh：定义了从image中截取一部分 sx sy 起始位置，sw sh 宽度
dx：dy：dw：dh：定义了把上述截取的部分显示在哪里，dx dy 在canvas中的起始位置，dw dh 显示的宽度和高度。
你只需要ctx.drawImage(img,0,0);改成ctx.drawImage(img,0,0，你想拉伸为的宽度，你想要拉伸为的高度);