html5 toile ne dessine pas le triangle

-2

Salut, j'essaie de pratiquer la toile HTML 5. Je viens de développer le code pour faire un triangle dans une toile. J'obtiens l'élément canvas en utilisant javascript et en essayant d'y tracer un triangle. Je ne sais pas ce qui ne va pas mon fichier javascript n'est pas lié ou saisissant le canevas.html5 toile ne dessine pas le triangle

Html file code: 
    <!doctype html> 
    <html lang="en"> 
    <head> 
    <meta charset= "UTF-8"> 
    <style> 

    #canvas { 
     width: 400px; 
     height: 200px; 
     border: 1px solid red; 
} 

</style> 
<script src="canvas.js"></script> 
</head> 

<body> 
<canvas id="tcanvas"> 
</canvas> 
</body> 
</html>

code Javascript pour dessiner dans la toile:

window.onload=init; 
    function draw() { 
    var canvas = document.getElementById('tcanvas'); 
    var context=canvas.getContext("2d"); 

     canvas.fillstyle="#0000FF"; 
     context.lineWidth=3; 
     context.beginPath(); 
     context.moveTo(50,100); 
     context.lineTo(150,100); 
     context.lineTo(100,50); 
     context.lineTo(50,100); 
     context.fill(); 
     context.closePath(); 


    } 

draw();

Source

2017-09-27 Kam

init est undefined ce qui signifie que votre fonction draw est jamais invoqué.

Vérifiez l'exemple de travail ci-dessous qui appelle draw sur window.onload.

function draw() { 
 
    let canvas = document.getElementById('tcanvas'); 
 
    let context = canvas.getContext("2d"); 
 
    canvas.fillstyle = "#0000FF"; 
 
    context.lineWidth = 3; 
 
    context.beginPath(); 
 
    context.moveTo(50, 100); 
 
    context.lineTo(150, 100); 
 
    context.lineTo(100, 50); 
 
    context.lineTo(50, 100); 
 
    context.fill(); 
 
    context.closePath(); 
 
} 
 

 
window.onload = draw;

#canvas { 
 
    width: 400px; 
 
    height: 200px; 
 
    border: 1px solid red; 
 
}

<canvas id="tcanvas"></canvas>

Source

2017-09-27 15:29:06

Il fait, vous avez juste le init qui n'est pas défini et se décompose votre code. Peut-être est défini ailleurs MAIS contient une erreur/s? Une autre cause possible peut être un canvasjs manquant d'où vous l'avez lié dans votre code HTML, nous ne pouvons pas vérifier :)

La console du navigateur (F12) est votre ami dans des situations comme celle-ci.

Voici rapide travail fiddle

Notez que ceci est la meilleure façon de montrer votre code, car il est plus facile testable et de sauter sur d'autres.

<canvas id="tcanvas"> 

    function draw() { 
    var canvas = document.getElementById('tcanvas'); 
    var context=canvas.getContext("2d"); 

     canvas.fillstyle="#0000FF"; 
     context.lineWidth=3; 
     context.beginPath(); 
     context.moveTo(50,100); 
     context.lineTo(150,100); 
     context.lineTo(100,50); 
     context.lineTo(50,100); 
     context.fill(); 
     context.closePath(); 
    } 

#canvas { 
     width: 400px; 
     height: 200px; 
     border: 1px solid red; 
}

Source

2017-09-27 15:33:47 DanteTheSmith

html5 toile ne dessine pas le triangle

Répondre

Questions connexes