Question

drawImage（）函数不遵循函数参数来绘制图像。笑脸的原始尺寸为213px（宽度）和212px（高度）。图像绘制得太大。绘制图像的高度为500像素，绘制图像的宽度为约400像素（压缩）。

我在此链接-Javascript: drawImage is not taking whole picture上找到了信息。

img-指定要使用的图像，画布或视频元素
sx-可选。从哪里开始裁剪的x坐标
sy-可选。开始裁剪的y坐标
swidth-可选。剪切图像的宽度
sheight-可选。裁剪后的影像的高度
x-将图像放置在画布上的x坐标
y-将图像放置在画布上的y坐标
宽度-可选。要使用的图像宽度（拉伸或缩小图像）
高度-可选。要使用的图像高度（拉伸或缩小图像）

<html>
<head>
    <title>Magnified Picture</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style type='text/css'>
        canvas {
            background-color:green;
            width: 500px;
            height: 500px;
        }
    </style>
    <script>
        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;
            var width = smiley.width;
            var height = smiley.height;
            ctx.drawImage(smiley, sx, sy, swidth, sheight, x, y, width, height);
        };
    </script>

</head>
<body>
    <canvas id="mypic" ></canvas>
</body>

期望的绘制图像应位于左上角，尺寸为213px（宽度）和212px（高度）。

请帮助...

我更改了最后三行：
    var width = c.setAttribute（'width'，500）;
    var height = c.setAttribute（'width'，500）;
    ctx.drawImage（笑脸，sx，sy，宽度，高度，x，y，500，500）;
然后，将以500x500的大小完美地绘制图像。
但是，我不能使用变量width和height作为实际参数。
即ctx.drawImage（笑脸，sx，sy，swidth，sheeight，x，y，宽度，高度）;
该图像将不会绘制！
现在我可以指定任何尺寸，例如ctx.drawImage（笑脸，sx，sy，宽度，高度，x，y，213，212）;图像将被完美绘制。
希望有人可以解释。

为什么drawImage（）函数草绘并挤压图片？

0 个答案: