簡體   English   中英

為什么在畫布上不顯示畫線?

[英]Why drawing line on canvas doesn't appear?

我正在使用html 5用按鈕在畫布上畫一條線。

有人知道為什么嗎?

<!DOCTYPE html>
<html>

 <body onload="">

<canvas id="myCanvas" width="400" height="200" style="border:1px solid #000000;">
  Your browser does not support the HTML5 canvas tag.
</canvas>
<button name="draw" onclick="drawLine()">Draw Line</button>
<script type="text/javascript" src="canvashtml5.js" ></script>

</body>
</html>

darwLine函數在外部JavaScript上為canvasHtml5.js:

function drawLine(){
   var canvas = document.getElementById(myCanvas);
   var context = canvas.getContext("2d");
   context.moveTo(0,0);
   context.lineTo(300,150);
   context.stroke();
}
myCanvas
{
   var c=document.getElementById("myCanvas");
   var ctx=c.getContext("2d");
   ctx.fillStyle="#FFFF00";
   ctx.fillRect(0,0,150,75);
}

我忘了把myCanvas引用成這樣:“ myCanvas”。

這個var canvas = document.getElementById(myCanvas); 必須類似於var canvas = document.getElementById("myCanvas");

選擇:

將事件監聽器添加到您的按鈕,如下所示:

document.getElementById('drawLineBtn').addEventListener('click', drawLine, false);

這將減少您將來的工作。 參見http://jsfiddle.net/kbXAN/23/

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM