使用canvas绘制三角形,一个为三角形轮廓,一个为实心三角形,两个三角形放置在宽200高100的框中
时间: 2024-05-15 11:12:10 浏览: 18
以下是使用canvas绘制三角形的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Canvas绘制三角形</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="200" height="100"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(100, 100);
ctx.closePath();
ctx.stroke();
ctx.beginPath();
ctx.moveTo(50, 10);
ctx.lineTo(150, 10);
ctx.lineTo(100, 60);
ctx.closePath();
ctx.fill();
</script>
</body>
</html>
```
在这个示例中,我们使用了`canvas`元素创建了一个宽为200,高为100的画布。然后,我们获取了`canvas`的上下文对象并使用`beginPath()`方法开始绘制路径。
第一个三角形是轮廓三角形,我们使用`moveTo()`方法将绘制起点移动到`(50, 50)`,然后使用`lineTo()`方法连接到`(150, 50)`和`(100, 100)`,最后使用`closePath()`方法将路径闭合。最后使用`stroke()`方法将轮廓绘制出来。
第二个三角形是实心三角形,我们使用与第一个三角形相同的方法绘制路径,但是这次我们使用`fill()`方法填充路径内部,而不是使用`stroke()`方法绘制轮廓。
最后,我们使用CSS样式设置了`canvas`元素的边框为1像素的黑色边框。