<script type="text/javascript">
var canvas = document.getElementById("myCanvas"); // 获取画布对象
var ctx = canvas.getContext("2d"); // 定义画布上下文,指定绘图模式
ctx.beginPath(); // 开始绘制路径
// 绘制上半部分
ctx.moveTo(250, 100); // 移动到起始点,顶部中间
ctx.lineTo(100, 250); // 左侧斜线
ctx.lineTo(250, 400); // 底部横线
ctx.lineTo(400, 250); // 右侧斜线
ctx.lineTo(250, 100); // 回到起点
ctx.fillStyle = "#228B22"; // 设置填充颜色
ctx.fill(); // 填充路径
// 绘制下半部分
ctx.beginPath(); // 开始绘制路径
ctx.arc(250, 250, 150, 0, Math.PI, true); // 绘制底部圆弧
ctx.closePath(); // 关闭路径
ctx.fillStyle = "#FF4500"; // 设置填充颜色
ctx.fill(); // 填充路径
</script>
如何使用HTML5绘制一个惊艳的大西瓜?
4 min read