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 回答