Canvas绘制三角形

最新推荐文章于 2023-07-24 08:19:59 发布

东篱与酒映黄昏

最新推荐文章于 2023-07-24 08:19:59 发布

阅读量755

点赞数 1

分类专栏： canvas

本文链接：https://blog.csdn.net/weixin_43205185/article/details/105179166

版权

canvas 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前言

	上一篇文章，我们学习了简单的使用canvas绘制填充矩形（fillRect）和描边矩形（strokeRect），小伙伴们还记得怎么使用吗？-_-,这一篇文章我们继续学习使用canvas绘制三角形。

概念

参数	解释
moveTo	起始点
lineTo	移动到哪里
beginPath	开始一条路径

代码

let canvas = document.getElementById('myCanvas')
if (canvas.getContext) {
	let ctx = canvas.getContext('2d')
	ctx.beginPath()
	ctx.moveTo(75, 50)
	// 第二个点
	ctx.lineTo(175, 50)
	// 第三个点
	ctx.lineTo(75, 175)
	// 闭合路径
	ctx.closePath()
	ctx.strokeStyle = 'red'
	ctx.stroke()
}