HTML 5画布绘图应用程序不绘图

我有一个简单的HTML5画布绘图应用程序（代码从here）以下代码。但是，我无法使用画布来绘制鼠标。有任何想法吗？HTML 5画布绘图应用程序不绘图

在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>

来源

2013-03-14 IlludiumPu36

的问题是，你试图同时它还没有被加载访问标记（var canvas = document.querySelector('#paint');）。

把您的整个JavaScript标签后的标签</canvas>。

来源

2013-03-14 06:57:33

谢谢你......我看到的教程都没提到这个...... – IlludiumPu36 2013-03-14 07:01:52

HTML 5画布绘图应用程序不绘图

回答

相关问题