Home  >  Article  >  Web Front-end  >  How to output triangles in javascript

How to output triangles in javascript

藏色散人
藏色散人Original
2021-03-31 14:48:165150browse

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.

How to output triangles in javascript

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

How to output triangles in javascript

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

How to output triangles in javascript

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

How to output triangles in javascript

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. ,

How to output triangles in javascript

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

How to output triangles in javascript

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn