三個縱向排列的按鈕，分別命名為“方形”、“圓形”、“三角形”。
需要制作的功能：單擊按鈕能在畫布上顯示對應的圖形。
uj5u.com熱心網友回復：
<canvas id="canvasId" width="400" height="400"></canvas><br>
<input type="button" value="https://bbs.csdn.net/topics/方形" onclick="square();" />
<input type="button" value="https://bbs.csdn.net/topics/圓形" onclick="round();" />
<input type="button" value="https://bbs.csdn.net/topics/三角形" onclick="trigon();" />
<script type="text/javascript">
var canvas = document.getElementById("canvasId");
var ctx = canvas.getContext("2d");
function square() {
ctx.fillStyle = "#00f";
ctx.beginPath();
ctx.rect(100,100,200,200);
ctx.fill();
}
function round() {
ctx.fillStyle = "#f00";
ctx.beginPath();
ctx.arc(200,200,120,0,2*Math.PI,true);
ctx.fill();
}
function trigon() {
ctx.fillStyle = "#ff0";
ctx.beginPath();
ctx.moveTo(200,50);
ctx.lineTo(50,280);
ctx.lineTo(350,280);
ctx.closePath();
ctx.fill();
}
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/108311.html
標籤：JavaScript