我正在嘗試創建一個簡單的互動式小部件，我想在單擊按鈕時填充畫布。我有列出了十六進制代碼的藍色、紅色、綠色。我列出了功能，并列出了填充，但是當我單擊按鈕時它沒有任何改變。
//HTML
<form>
<canvas id="canvas" width="500" height="300"></canvas>
<button onclick="changeblue()" class="canbut">Blue</button>
<button onclick="changered()" class="canbut">Red</button>
<button onclick="changegreen()" class="canbut">Green</button>
</form>
//js
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
function changeblue (){
ctx.fillStyle = "#0066FF";
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
function changered(){
ctx.fillStyle ="#FF0000";
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
function changegreen (){
ctx.fillStyle ="#00cc00";
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
在此處輸入圖片說明
uj5u.com熱心網友回復：
您必須洗掉表單標記，或在您的 JS 代碼中添加一個 preventDefault
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
function changeblue(e) {
ctx.fillStyle = "#0066FF";
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
function changered() {
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
function changegreen() {
ctx.fillStyle = "#00cc00";
ctx.fillRect(0, 0, canvas.width, canvas.height);
}<canvas id="canvas" width="500" height="300" style="border:2px solid black"></canvas>
<button onclick="changeblue()" class="canbut">Blue</button>
<button onclick="changered()" class="canbut">Red</button>
<button onclick="changegreen()" class="canbut">Green</button>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/381093.html
標籤：javascript