0

下面的脚本没有在画布上绘制完整的图像。尝试从精灵中绘制 400 * 346 像素的图像。使用 chrome、safari、mozilla 测试

<html>
<head>
</head>
<body>
    <script type="text/javascript">    
    var canvas = null;
    function init() {
        var cvs = document.createElement("canvas");
        cvs.id = "myCanvas";
        var ctx = cvs.getContext('2d');
        var originX = 200;
        var originY = 173;
        document.body.appendChild(cvs);
        var img = new Image();
        img.onload = function () {
            var sourceX = 1200;
            var sourceY = 0;
            var sourceWidth = 400;
            var sourceHeight = 346;
            var destinationX = 0;
            var destinationY = 0;
            var destinationWidth = 400;
            var destinationHeight = 346;
            ctx.drawImage(img, sourceX, sourceY, sourceWidth, sourceHeight,
                          destinationX, destinationY, destinationWidth, destinationHeight);
        };
        img.src = 'tiles.png';
    };

    init();
</script>
</body>

请帮忙。

4

1 回答 1

2

您没有为画布分配宽度或高度。所以它默认为 300x150，比你的图像小，因此只显示图像的一部分。

尝试添加类似cvs.width = 400; cvs.height = 346;

于 2013-05-18T13:35:57.137 回答