html5 canvas drawing triangle

-2

こんにちは、私はHTML 5のキャンバスを練習しようとしています。キャンバスに三角形を作るためのコードを開発しました。私は、javascriptを使用してcanvas要素を取得しており、その中に三角形を描画しようとしています。私はjavascriptファイルがリンクされていないかキャンバスをつかんでいないことが間違っているか分かりません。キャンバスに描画するhtml5 canvas drawing 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>

Javascriptコード：

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();

出典

2017-09-27 Kam

initはあなたdraw関数が呼び出されないことを意味しているundefinedです。

drawを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>

出典

2017-09-27 15:29:06

それは、あなただけに定義し、コードを分割されていないinitを持っていません。他の場所で定義されている可能性がありますが、エラーがありますか？もう1つの考えられる原因は、あなたがhtmlでリンクした場所からキャンバスが見つからないことです。確認できません。

ブラウザのコンソール（F12）はこのような状況ではあなたの友人です。ここで

が、これはそれが他の人が上にジャンプしてより多くのテスト可能かつ容易なので、あなたのコードを表示するための好ましい方法であることを迅速に作業fiddle

注意です。

<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; 
}

出典

2017-09-27 15:33:47 DanteTheSmith

答えて

関連する問題