Question

有没有什么方法可以让“绘图”只会在按下按键/点击时发生？

我对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>

Answer 1

也许将jQuery添加到您的项目中，它会让生活变得更加轻松。

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

请参阅：http://api.jquery.com/click/

仅在鼠标单击时绘制图像

1 个答案: