在canvas中画三角形的实现

最新推荐文章于 2024-06-17 09:59:43 发布

phoneball

最新推荐文章于 2024-06-17 09:59:43 发布

阅读量4.7k

点赞数

分类专栏：网络应用文章标签： canvas js html5

本文链接：https://blog.csdn.net/u010914447/article/details/24961971

版权

这篇博客介绍了如何使用HTML5的canvas标签来实现等边三角形的绘制。通过分析画三角形的过程，包括获取中心点和顶点，以及理解平面坐标系的特性，作者提供了详细的步骤和示例代码。

摘要由CSDN通过智能技术生成

这几天在学习HTML5中的一个新标签canvas，发现这个标签这的太强大了，几乎可以完成所有画图的功能，比如线、矩形、圆、实心圆、实心矩形（面），还有个人认为最不好画的三角形。下面我就以画等边三角形为例来分析一下在canvas中怎样画：

首先分析一下画三角形的过程：

鼠标点下去的时候->获取三角形的中心点
鼠标抬起来的时候->获取三角形右下角的顶点
鼠标移动的时候->不做任何操作
鼠标移出画布的时候也不做任何操作

再来看一张分析图：

图中已经分析得很清楚了，画三角形的起点是在中心点上，与画其他图形的起始点是不一样的，其次一定要注意平面坐标系在电脑的屏幕上和现实生活中是不一样的，它的圆点是在电脑屏幕的左上角为（0,0）点，水平方向为X，竖直方向为Y，所以我们在计算第三个点的坐标y的时候用engY -c ,这点很重要。

下面我把js粘贴出来，仅供参考：

var polyX=0;
var polyY=0;
function drawPoly(num){
	setStatus(actions,num,1);
		canvas.οnmοusedοwn=function(evt){
			e

关注

专栏目录