首页用canvas画个箭头

用canvas画个箭头

时间: 2023-11-10 10:59:40 浏览: 244

好的，以下是代码示例： ```html <!DOCTYPE html> <html> <head> <title>Canvas Arrow</title> <style> canvas { border: 1px solid #000; } </style> </head> <body> <canvas id="myCanvas" width="200" height="200"></canvas> <script> const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); ctx.lineWidth = 2; ctx.lineCap = 'round'; // 绘制箭头 function drawArrow(x, y, length, angle) { ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x + length * Math.cos(angle), y + length * Math.sin(angle)); ctx.stroke(); ctx.beginPath(); ctx.moveTo(x + length * Math.cos(angle), y + length * Math.sin(angle)); ctx.lineTo(x + length * Math.cos(angle - Math.PI / 6), y + length * Math.sin(angle - Math.PI / 6)); ctx.stroke(); ctx.beginPath(); ctx.moveTo(x + length * Math.cos(angle), y + length * Math.sin(angle)); ctx.lineTo(x + length * Math.cos(angle + Math.PI / 6), y + length * Math.sin(angle + Math.PI / 6)); ctx.stroke(); } // 调用绘制箭头函数 drawArrow(100, 100, 80, Math.PI / 4); </script> </body> </html> ``` 这里使用了 canvas 的 `getContext()` 方法获取上下文对象，然后设置线条宽度和线条末端形状。接着定义了绘制箭头的函数 `drawArrow()`，该函数接收箭头起点坐标、长度和角度作为参数。在函数内部，使用 `beginPath()` 开始绘制路径，然后使用 `moveTo()` 移动到起点，使用 `lineTo()` 划线到箭头终点，最后使用 `stroke()` 绘制线条。绘制箭头头部时，使用了三次 `moveTo()` 和 `lineTo()` 组合，绘制三角形。最后调用 `drawArrow()` 函数即可在 canvas 中绘制箭头。

阅读全文