<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>
