• 微信号:wumiao_357234902
您当前的位置:首页>web前端开发>HTML

canvas绘制多边形、填充颜色

作者:Miao 阅读:3357次

效果:

未标题-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>


本站部分文章、数据、素材收集于网络,所有版权均归源网站或原作者所有!

如果侵犯了您的权益,请来信告知我们下线删除,邮箱:357234902@qq.com

标签:HTML