Question

我有一个简单的html5画布绘图应用程序的代码（来自here的代码）。但是，我无法让画布在鼠标上绘制。有任何想法吗？

在Firefox中尝试过，而不是IE。

任何帮助表示感谢。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>   
<script type="text/javascript">  
    var canvas = document.querySelector('#paint');
    var ctx = canvas.getContext('2d');  
    var sketch = document.querySelector('#sketch');
    var sketch_style = getComputedStyle(sketch);
    canvas.width = parseInt(sketch_style.getPropertyValue('width'));
    canvas.height = parseInt(sketch_style.getPropertyValue('height')); 
    var mouse = {x: 0, y: 0};
    var last_mouse = {x: 0, y: 0};  

    /* Mouse Capturing Work */
    canvas.addEventListener('mousemove', function(e) {
        last_mouse.x = mouse.x;
        last_mouse.y = mouse.y;

        mouse.x = e.pageX - this.offsetLeft;
        mouse.y = e.pageY - this.offsetTop;
    }, false);


    /* Drawing on Paint App */
    ctx.lineWidth = 5;
    ctx.lineJoin = 'round';
    ctx.lineCap = 'round';
    ctx.strokeStyle = 'blue';       
    canvas.addEventListener('mousedown', function(e) {
        canvas.addEventListener('mousemove', onPaint, false);
    }, false);

    canvas.addEventListener('mouseup', function() {
        canvas.removeEventListener('mousemove', onPaint, false);
    }, false);

    var onPaint = function() {
        ctx.beginPath();
        ctx.moveTo(last_mouse.x, last_mouse.y);
        ctx.lineTo(mouse.x, mouse.y);
        ctx.closePath();
        ctx.stroke();
    };

    </script>
<style type="text/css">
html, body {
    width: 100%;
    height: 100%;
}
#sketch {
    border: 10px solid gray;
    height: 100%;
}
</style>
</head>
<body>
<div id="sketch">
  <canvas id="paint"></canvas>
</div>
</body>
</html>

Answer 1

问题是您在尚未加载标记时尝试访问标记（var canvas = document.querySelector('#paint');）。

将整个JavaScript代码放在</canvas>标记之后。

HTML 5 Canvas绘图应用程序没有绘图

1 个答案: