小编Sus*_*ade的帖子

Canvas drawimage() 绘制缩放图像

我的显示器分辨率为 1920 * 1080。

我正在我的电脑上尝试这个非常基本的画布drawimage()代码。

<!DOCTYPE html>
<html>
    <body>

        <p>Image to use:</p>

        <img id="scream" width="220" height="277" 
        src="test.jpg" alt="The Scream">

        <p>Canvas:</p>

        <canvas id="myCanvas" width="240" height="297"
        style="border:1px solid #d3d3d3;">
           Your browser does not support the HTML5 canvas tag.
        </canvas>

        <script>
            window.onload = function() {
                var canvas = document.getElementById("myCanvas");
                var ctx = canvas.getContext("2d");
                var img = document.getElementById("scream");
                ctx.drawImage(img, 10, 10);
           };
        </script>

    </body>
</html>

Run Code Online (Sandbox Code Playgroud)

所以我得到这样的输出：