Html5之canvas三角形getContextbeginPathmoveTolineTofillclosePathstroke

Posted 2022-02-13 web半晨

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Html5之canvas三角形getContextbeginPathmoveTolineTofillclosePathstroke相关的知识，希望对你有一定的参考价值。

1、Css部分

.canvas_box 
	display: flex;
	justify-content: center;
	align-items: center;


.canvas 
	border: 1px solid #777;

2、html部分

<div class="canvas_box">
	<canvas class="canvas" id="idCanvas" width="230" height="110"></canvas>
</div>

3、javascript部分

function triangle(params) 
	// 获取画布
	let canvas = document.getElementById('idCanvas');

	// 用于验证浏览器是否支持canvas，
	// 它是h5的新特性，老版本ie不支持
	if (!idCanvas.getContext) return alert('浏览器不支持！');

	// 画笔，可选2d和3d
	let ctx = canvas.getContext("2d");

	// 新建一个路径，绘制指定到这个路径上
	ctx.beginPath();
	// 路径从哪开始
	ctx.moveTo(10, 10);
	// 到哪个点
	ctx.lineTo(100, 100);
	ctx.lineTo(10, 100);
	// 填充内容区域，生成实心图
	ctx.fill();

	// 画描边三角形
	ctx.beginPath();
	ctx.moveTo(220, 10);
	ctx.lineTo(120, 100);
	ctx.lineTo(220, 100);
	// 路径闭合方法
	ctx.closePath();
	ctx.stroke();

triangle();