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畫布繪圖應用程序不繪圖

回答

相關問題