如何使用HTML5绘制一个惊艳的大西瓜?

4 min read
<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>