0

以下のスクリプトは、キャンバス上に完全な画像を描画していません。スプライトから 400 * 346 ピクセルの画像を描画しようとしています。クロム、サファリ、モジラでテスト済み

<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 に答える