How to output triangles in javascript

How to output triangles in javascript: first write a static canvas container; then use js to get the container with the id canvas, and define it as a canvas; finally use js to draw the triangle.

The operating environment of this article: Windows 7 system, JavaScript version 1.8.5, Dell G3 computer.

First step, open the sublimeText editor, as shown below

Second step, write a static canvas container, the example is a 300x300 container, details The code is as shown below

The third step is to use js to get the container with the id canvas, and then define it as a canvas

//获取canvas容器
var canvas = document.getElementById('canvas');
//创建一个画布
var huabu = canvas.getContext('2d');

, the detailed code is as follows Figure

The fourth step is to draw a triangle using js [Recommended learning: js basic tutorial]

Example code: Draw 3 Use three coordinate points of a triangle to draw a line

//获取canvas容器
var canvas = document.getElementById('canvas');
//创建一个画布
var huabu = canvas.getContext('2d');
// 开始绘制
huabu.beginPath();
// 从画布坐标（50,50）开始绘画
huabu.moveTo(50,50);
// 三角形第二个坐标点（200,50）
huabu.lineTo(200,50);
// 三角形第二个坐标点（125,100）
huabu.lineTo(125,100);
//自动闭合
huabu.closePath();
huabu.stroke();

The detailed code is as shown below. ,

The fifth step, the triangle effect drawn by js, as shown below

The above is the detailed content of How to output triangles in javascript. For more information, please follow other related articles on the PHP Chinese website!