首页运用htm5的canvas标签绘制一个三角形

运用htm5的canvas标签绘制一个三角形

时间: 2023-11-11 11:21:45 浏览: 38

好的，以下是代码示例： ```html <!DOCTYPE html> <html> <head> <title>Canvas绘制三角形</title> <style type="text/css"> canvas { border: 1px solid #000; } </style> </head> <body> <canvas id="myCanvas" width="200" height="200"></canvas> <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); // 设置三角形的颜色 ctx.fillStyle = "#FF0000"; // 开始画三角形 ctx.beginPath(); ctx.moveTo(100, 20); // 三角形的顶点 ctx.lineTo(20, 180); // 三角形左侧底边 ctx.lineTo(180, 180); // 三角形右侧底边 ctx.closePath(); // 闭合三角形 ctx.fill(); // 填充三角形 </script> </body> </html> ``` 这段代码创建了一个200x200的canvas画布，然后使用JavaScript的Canvas API绘制了一个红色的三角形。我们使用 `fillStyle` 属性设置了三角形的颜色，使用 `beginPath()` 方法来开始画三角形，使用 `moveTo()` 方法移动到三角形的顶点，然后使用 `lineTo()` 方法连接三角形的左、右两侧底边，并使用 `closePath()` 方法闭合三角形，最后使用 `fill()` 方法填充三角形。