用canvas画两条线90度的转弯箭头且有个按钮可以旋转90度
时间: 2024-05-16 07:17:51 浏览: 11
下面是HTML和JavaScript代码实现此功能:
```html
<!DOCTYPE html>
<html>
<head>
<title>Canvas Arrow</title>
<style>
canvas {
border:1px solid #ccc;
}
</>
</head>
<body>
<canvas id="arrowCanvas" width="300" height="300"></canvas>
<br>
<button onclick="rotateArrow()">Rotate 90 Degrees</button>
<script>
var canvas = document.getElementById("arrowCanvas");
var ctx = canvas.getContext("2d");
// 画箭头
function drawArrow() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除画布
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(150, 100);
ctx.lineTo(250, 100);
ctx.lineTo(250, 200);
ctx.lineTo(150, 200);
ctx.lineTo(150, 250);
ctx.lineTo(50, 250);
ctx.closePath();
ctx.stroke();
}
// 旋转箭头
var angle = 0;
function rotateArrow() {
angle += Math.PI / 2; // 旋转90度
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate(angle);
ctx.translate(-canvas.width / 2, -canvas.height / 2);
drawArrow();
}
drawArrow(); // 初始画箭头
</script>
</body>
</html>
```
在上面的代码中,我们使用了Canvas API来绘制箭头图形,并且通过JavaScript代码实现箭头的旋转。具体来说,我们在画箭头时,使用了`moveTo`和`lineTo`方法来画出多个直线段,形成箭头的形状。在旋转箭头时,我们先使用`translate`方法将画布的原点移动到画布中心,然后使用`rotate`方法旋转画布,最后再使用`translate`方法将画布原点移回左上角,这样就可以实现箭头的旋转了。