如何使用按鈕調用在畫布中繪製的函數

對於此項目，我們正在使用畫布。我需要創建一些按鈕，當你點擊按鈕時，應該調用相應的函數。這些函數會在畫布中繪製一些東西。但是，我的代碼不起作用。按鈕和畫布本身出現，但是當您單擊按鈕時沒有繪製任何東西。有沒有錯誤？如何使用按鈕調用在畫布中繪製的函數

<script> 
    function drawCircle(){ 
     var c = document.getElementById("myCanvas"); 
     var ctx = c.getContext("2d"); 
     ctx.beginPath(); 
     ctx.arc(95,50,40,0,2*Math.PI); 
     ctx.stroke(); 
    } 
    function drawLine(){ 
     var c = document.getElementById("myCanvas"); 
     var ctx = c.getContext("2d"); 
     ctx.moveTo(0,0); 
     ctx.lineTo(200,100); 
     ctx.stroke(); 
    } 
    function drawRectangle(){ 
     var c = document.getElementById("myCanvas"); 
     var ctx = c.getContext("2d"); 
     ctx.fillStyle = "#FF0000"; 
     ctx.fillRect(0,0,150,75); 
    }  
    function drawImage(){ 
     var c = document.getElementById("myCanvas"); 
     var ctx = c.getContext("2d"); 
     var img = document.getElementById("scream"); 
     ctx.drawImage(img,10,10); 
    } 
    function drawText(){ 
     var c = document.getElementById("myCanvas"); 
     var ctx = c.getContext("2d"); 
     ctx.font = "30px Arial"; 
     ctx.fillText("Hello World",10,50); 
    } 

</script> 
</head> 


<body> 
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"> 
</canvas> 

<input type="button" onclick="drawCircle();" value="Draw Circle"> 
<input type="button" onclick="drawLine();" value="Draw Line"> 
<input type="button" onclick="drawRectangle();" value="Draw Rectangle"> 
<input type="button" onclick="drawImage();" value="Draw Line"> 
<input type="button" onclick="drawText();" value="Text"> 
<input type="button" onclick="drawGradient();" value="Gradient"> 
<input type="button" onclick="scale();" value="Scale"> 
</body> 
</html>

來源

2016-05-01 cam c

它似乎爲我工作得很好（至少在Chrome和IE中）。你如何運行它？ –

我在CodePen中試過你的代碼，並且你已經實現了該功能的按鈕工作得很好。你的控制檯是否顯示任何錯誤？

來源

2016-05-01 01:45:26 Joris

如何使用按鈕調用在畫布中繪製的函數

回答

相關問題