html使用canvas画警示路标
时间: 2023-08-03 20:32:24 浏览: 49
可以使用以下代码在HTML中使用canvas画出一个警示路标:
```html
<!DOCTYPE html>
<html>
<head>
<title>Canvas Drawing</title>
<style>
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="200" height="200"></canvas>
<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
// 设置填充颜色为红色
context.fillStyle = "#FF0000";
// 绘制一个圆形
context.beginPath();
context.arc(100, 100, 80, 0, 2 * Math.PI);
context.fill();
// 设置填充颜色为白色
context.fillStyle = "#FFFFFF";
// 绘制一个三角形
context.beginPath();
context.moveTo(100, 20);
context.lineTo(60, 160);
context.lineTo(140, 160);
context.closePath();
context.fill();
</script>
</body>
</html>
```
这段代码会在一个200x200的canvas中画出一个红色的圆形,圆心坐标为(100, 100),半径为80,以及一个白色的三角形,三个顶点分别为(100, 20),(60, 160),(140, 160)。这个形状就是一个警示路标。