Home > Article > Web Front-end > 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!