21xrx.com
2024-11-22 01:53:25 Friday
登录
文章检索 我的文章 写文章
如何使用 JavaScript 绘制三角形
2023-06-10 23:04:05 深夜i     --     --
JavaScript 三角形 Canvas

我分享一个简单的 JavaScript 代码，可以帮助你画出一个漂亮的三角形。

首先，我们需要定义三个点，它们分别是三角形的三个顶点。代码如下：

script

var point1 = y: 100;


var point2 = x: 200;


var point3 = x: 150;

接下来，我们使用 HTML5 的 Canvas API 来绘制三角形。Canvas 是一个 HTML5 新增的标签，可以让我们绘制各种图形。代码如下：

script

var canvas = document.getElementById("myCanvas");


var context = canvas.getContext("2d");


context.beginPath();


context.moveTo(point1.x, point1.y);


context.lineTo(point2.x, point2.y);


context.lineTo(point3.x, point3.y);


context.closePath();


context.fillStyle = "#FF0000";


context.fill();

最后，我们需要在 HTML 页面中添加一个 Canvas 标签，代码如下：

HTML

这个代码段可以在一个 HTML5 页面中很好地工作，并且你可以根据需要改变三角形的大小和颜色。

API

  
  

评论区

{{item['qq_nickname']}}
()
回复
回复