<html>
<head>
<meta charset="UTF-8">
<title>繪製圖形</title>
<script>
function draw(id){
var c=document.getElementById('canvas');
var cxt=c.getContext("2d");
//保存當前繪圖狀態
cxt.save();
//開始繪製打鉤的輪廓
cxt.beginPath();//創建開始繪圖路徑
cxt.moveTo(53,0);
//繪製上半部分曲線
cxt.quadraticCurveTo(30,79,99,78);
cxt.lineTo(371,3);
cxt.lineTo(74,134);
cxt.quadraticCurveTo(0,124,53,0);
cxt.fillStyle="pink";
cxt.fill();
cxt.lineWidth=3;
//連接處平滑
cxt.lineJoin='round';
cxt.strokeStyle="blue";
cxt.stroke();
cxt.restore();//恢復原有的繪圖狀態
cxt.closePath();
}
</script>
</head>
<body οnlοad="draw('canvas')">
<canvas id="canvas" width="375" height="132" style="border:1px solid blue;"></canvas>
</body>
</html>
