2

html5キャンバスコンテキストでスプライトを使用したいと思います。

マウスでドラッグしたいので、マウスをドラッグすると表示領域が変わります。

幅21、高さ90のウィンドウのように見え、スプライトの一部だけが表示されます。スプライトを下または上にドラッグすると、表示されている部分が変化します。

drawImage（slice）メソッドでこれを実行できると思いましたが、希望どおりに機能しません...

手伝ってくれませんか。

<html>
    <head>
        <script type="text/javascript">

            var y = 30;
            var canvas;
            var context;
            var imageHours;

            function clearClock(context) {
                context.clearRect(0, 0, 300, 500);
            }

            function init(){
                canvas = document.getElementById("uhr");
                context = canvas.getContext("2d");

                imageHours = new Image();
                imageHours.src = "07.png";

                context.drawImage(imageHours, 0, y, 21, 90, 50, 50, 21, 90);

                var down = false;

                canvas.addEventListener('mousedown', function(event) { down = true; }, false);  
                canvas.addEventListener('mouseup', function() { down = false; }, false);
                canvas.addEventListener('mousemove', function(event){
                    if(down){                   
                        if(event.layerY > 50 && event.layerY < 140){
                            y = event.layerY;           
                        }                       
                        clearClock(context);
                        context.drawImage(imageHours, 0, y, 21, 90, 50, 50, 21, 90);                        
                    }
                }, false);              
            }           
        </script>
    </head>
    <body onload="init();">
        <canvas id="uhr" height="500px" width="300px"/>
    </body>
</html>

スプライト： スプライト：

編集：mainPostにコメントを追加しました。私がこのようにこれを達成しようとしている理由は..私はこれのためにライブラリを使用したくないということです..私はそのようなものを学びたいので...ライブラリを使用することは私が学ぶのを助けません...

4

2 に答える 2

1

あなたの質問は少し紛らわしいです。次回フィドルを作成するのは良い考えだと思います。それは人々があなたを助けるのに役立ちます。

これがあなたがやろうとしていることだと思います-> jsFiddle

私が見つけた2つの問題：

  1. yの値が間違っていると、画像が表示されなくなります。
  2. マウスアップ時にアイコンを更新/再描画する必要があります。falseに設定していますが、その場合、mousemoveはアイコンを再描画しません。

編集：

ここでフィドルを更新しました。これはあなたが望むものであり、アプリの良い出発点になるはずです。特に画像の使用については、キャンバスについてもう少し読んでおくことをお勧めします。Mozzila Dev Networkにはすばらしい紹介があります。このコードがそのように機能する理由の詳細な説明については、チェックしてください。

お役に立てれば！

于 2012-08-21T17:05:22.437 に答える
0

必要なことを実行するには、ディスプレイリストを作成する必要があります。そうすれば物事は簡単になります。

ライブラリを使用してもかまわない場合は、次のリンクを確認してください。これらは、ディスプレイリストと複数のオブジェクトをサポートします。

  1. http://www.createjs.com/#!/EaselJS
  2. http://www.kineticjs.com/
于 2012-08-21T16:57:25.640 に答える