使用按鈕在畫布上繪圖

我一直在研究交互式平面佈置圖，當您按下按鈕時，它將在畫布元素上繪製。我一直在用這個工作得越多，我越發覺到它可能不可能 - 有什麼想法？這裏是多少碼的我已經做了（因爲預期它不工作，很明顯）使用按鈕在畫布上繪圖

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" href="style.css" /> 
</head> 

<body> 
    <ul id="nav"> 
     <div id="buttons"> 
      <input type="button" id="clear" value="118"> 
     </div> 
    </ul> 
    <div id="main"> 
     <canvas id="118" width="1200" height="630" style="border:1px solid #d3d3d3;"></canvas> 
     <script> 
      var canvas = document.getElementById("canvas118"); 
      var context = canvas.getContext("2d"); 

      document.getElementById('clear').addEventListener('click', function() { 
       context.moveTo(87,354); 
       context.lineTo(169,426); 
       context.lineTo(277,397); 
       context.lineTo(198,324); 
       context.lineTo(87,354); 

       context.fillstyle = "#ff0000"; 
       context.fill(); 
       context.strokeStyle = "#ff0000"; 
       context.stroke(); 
      }); 
     </script> 
    </div> 
</body> 
</html>

來源

2015-04-17 merlinnt

什麼你在這裏有條件嗎？ – Shelly

這裏是你的代碼/變更： https://jsfiddle.net/dxhytwf4/2/

創建一個函數，並直接輸入添加的單擊事件：

<input type="button" id="clear" value="118" onclick="draw()" />

的Javascript：

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

你也都拿到元素canvas118不是118

來源

2015-04-17 06:15:21

啊，就是這樣。謝謝！ – merlinnt

我看來，像你缺少調用beginPath() ...嘗試這樣的：

var c=document.getElementById("canvas118"); 
var ctx=c.getContext("2d"); 
ctx.beginPath(); 
ctx.moveTo(0,0); 
ctx.lineTo(300,150); 
ctx.stroke();

摘自here。

來源

2015-04-17 06:07:55 stambikk

使用按鈕在畫布上繪圖

回答

相關問題