canvas绘制多边形、填充颜色

作者：Miao 阅读：3394次

效果：

未标题-1.jpg

<canvas id="canvas" width="600" height="450" style="border:1px solid #aaa;"></canvas>

<script type="text/javascript">
	window.onload = function() {
		var canvas = document.getElementById('canvas');
		var context = canvas.getContext('2d');

		// 位置（坐标点）：
		context.moveTo(200, 100);
		context.lineTo(300, 50);
		context.lineTo(400, 100);
		context.lineTo(400, 200);
		context.lineTo(300, 250);
		context.lineTo(200, 200);
		context.lineTo(200, 100); // 回到一开始的位置，形成闭合

		// 着色：
		context.fillStyle = "rgb(45,186,252)"; // 绘制区域填充色
		context.strokeStyle = "#000"; // 绘制线条颜色
		context.fill()
		context.stroke()
	}
</script>

赞一个 (206)