0

キー/クリックが押されたときにのみ「画像の描画」が発生するようにする方法はありますか?

私はjavascriptに非常に慣れていませんが、htmlとcssを実行しました。

これを機能させる簡単な方法はありますか？

<!doctype html>
<html>
<head>
    <title>test</title>
    <style type="text/css">
        body {
            background-color:#000000;
            image-repeat:none;
            margin: 0px;
            cursor: none;
            overflow: hidden; 
            }
    </style>
</head>
<body>
    <script type="text/javascript">
        var imageWidthHalf, imageHeightHalf;
        var canvas = document.createElement( 'canvas' );
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            canvas.style.display = 'block';
            document.body.appendChild( canvas );
        var context = canvas.getContext( '2d' );
        var image = document.createElement( 'img' );

            image.addEventListener('load', function() {
                imageWidthHalf = Math.floor( this.width / 2 );
                imageHeightHalf = Math.floor( this.height / 2 );
                document.addEventListener( 'mousemove', onMouseEvent, false ); //mouseclick ?
            }   , false );

        image.src ="cir.png" 

                             //mouseclick ?
        function onMouseEvent( event ) {
            context.drawImage( image, event.clientX - imageWidthHalf , event.clientY - imageHeightHalf );
        }
    </script>
</body>

4

1 に答える 1

1

プロジェクトに jQuery を追加すると、作業がかなり楽になります。

  $("canvas").click(function() {
     // alert("Handler for .click() called.");
      context.drawImage( image, event.clientX - imageWidthHalf , event.clientY - imageHeightHalf );
  });

参照: http://api.jquery.com/click/

于 2013-01-10T22:37:15.477 に答える