该drawImage()
功能不遵循函数的参数绘制图像。笑脸的原始尺寸为213px(宽度)和212px(高度)。该图像是吸引了过大。德鲁图像的高度为500像素和德鲁图像的宽度是400像素左右(挤压)。
我已经改变了如下我的代码。有用。图像将被绘制完美的罚款与大小213x212。但是,我不能使用变量宽度和高度的实际参数。即
ctx.drawImage(smiley, sx, sy, swidth, sheight, x, y, width, height);
图像将无法绘制!现在,我可以如指定任何尺寸
ctx.drawImage(smiley, sx, sy, swidth, sheight, x, y, 500, 500);
图像将被绘制大小500×500完美的罚款。 我想知道究竟是什么的声明
var width = c.setAttribute("width", "500");
呢?我用调试器检查变量宽度,它不包含任何值。嗯...
如果我删除了声明var width = c.setAttribute("width", "500");
,图像将无法在所有的画!
希望有人能解释它。
var smiley = new Image();
smiley.src = "images/smiley.jpg";
window.onload = function () {
var c = document.getElementById("mypic");
var ctx = c.getContext("2d");
var sx = 0;
var sy = 0;
var swidth = smiley.width;
var sheight = smiley.height;
var x = 0;
var y = 0;
//the following three lines are the original code
//and is not working properly.
//var width = smiley.width;
//var height = smiley.height;
//ctx.drawImage(smiley, sx, sy, swidth, sheight, x, y, width, height);
//Now, it is working fine
var width = c.setAttribute("width", "500");
var height = c.setAttribute("height", "500");
ctx.drawImage(smiley, sx, sy, swidth, sheight, x, y, 213, 212);
};
canvas {
background-color:green;
width: 500px;
height: 500px;
}
<canvas id="mypic" ></canvas>
几件事情要考虑在这里:首先是它不是window.onload
,它应该是图像的onload对象。然后,您可以设置基于图像的实际大小画布高度和宽度绘制。这里是它的快速预览。
var c = document.getElementById('canvas')
var ctx = c.getContext('2d')
var img = new Image();
img.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e0/SNice.svg/220px-SNice.svg.png'
img.onload = function() {
c.width = img.width;
c.height = img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);
};
<canvas id="canvas" ></canvas>