HTML 5 L'application de dessin sur toile ne dessine pas

J'ai le code suivant pour une application de dessin de toile html5 simple (code de here). Cependant, je ne peux pas obtenir la toile pour dessiner la souris vers le bas. Des idées?HTML 5 L'application de dessin sur toile ne dessine pas

Essayé dans Firefox, pas IE.

Toute aide appréciée.

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

Source

2013-03-14 IlludiumPu36

Le problème est que vous essayez d'accéder à une balise (var canvas = document.querySelector('#paint');) alors qu'il n'a pas encore été chargé.

Mettez votre tag JavaScript entier après le tag de </canvas>.

Source

2013-03-14 06:57:33

Merci pour cela ... aucun des tutoriels que j'ai vu ne l'a mentionné ... – IlludiumPu36

HTML 5 L'application de dessin sur toile ne dessine pas

Répondre

Questions connexes