Canvas绘制箭头

Canvas是HTML5新引进的标签，用于在页面上绘制图形。本文将带您从多个方面详细阐述使用Canvas绘制箭头的方法。

一、绘制基本形状

在使用Canvas绘制箭头之前，我们需要先了解Canvas如何绘制基本形状。Canvas支持绘制矩形、圆形、多边形等基本形状，可以通过调用对应的API进行绘制。

//绘制矩形
context.fillRect(x, y, width, height);

//绘制圆形
context.beginPath();
context.arc(x, y, radius, 0, Math.PI * 2, true);
context.closePath();
context.fill();

//绘制三角形
context.beginPath();
context.moveTo(x1, y1);
context.lineTo(x2, y2);
context.lineTo(x3, y3);
context.closePath();
context.fill();

以上是Canvas绘制基本形状的常用API，具体用法可以根据需求选择合适的API进行调用。

二、绘制箭头

Canvas绘制箭头的关键在于对于箭头的计算。箭头主要由三部分组成：箭头头部、箭杆和箭尾。

1、箭头头部

箭头头部形状为三角形，需要根据箭头的角度和大小进行计算。

//绘制箭头头部
function drawArrowhead(ctx, x1, y1, x2, y2, size){
    var angle = Math.atan2(y2 - y1, x2 - x1);
    ctx.beginPath();
    ctx.moveTo(x2, y2);
    ctx.lineTo(x2 - size * Math.cos(angle - Math.PI / 6), y2 - size * Math.sin(angle - Math.PI / 6));
    ctx.lineTo(x2 - size * Math.cos(angle + Math.PI / 6), y2 - size * Math.sin(angle + Math.PI / 6));
    ctx.closePath();
    ctx.fill();
}

以上代码为绘制箭头头部的函数，函数参数包括：绘图上下文、箭头起点坐标、箭头终点坐标和箭头大小。

2、箭杆

箭杆是由一条直线组成，使用Canvas的lineTo()方法绘制即可。

//绘制箭杆
function drawLine(ctx, x1, y1, x2, y2){
    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.stroke();
}

以上代码为绘制箭杆的函数，函数参数包括：绘图上下文、箭头起点坐标和箭头终点坐标。

3、箭尾

箭尾由一个矩形和一个三角形组成，需要先绘制矩形，再绘制三角形。

//绘制箭尾
function drawTail(ctx, x1, y1, angle, size){
    var x2 = x1 - size * Math.cos(angle);
    var y2 = y1 - size * Math.sin(angle);
    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.lineTo(x2 - size * Math.cos(angle - Math.PI / 6), y2 - size * Math.sin(angle - Math.PI / 6));
    ctx.lineTo(x2 - size * Math.cos(angle + Math.PI / 6), y2 - size * Math.sin(angle + Math.PI / 6));
    ctx.closePath();
    ctx.fill();
}

以上代码为绘制箭尾的函数，函数参数包括：绘图上下文、箭尾起点坐标、箭头角度和箭头大小。

三、绘制完整箭头

将上述三部分组合起来，即可绘制出一条完整的箭头。

//绘制完整箭头
function drawArrow(ctx, x1, y1, x2, y2, size){
    var angle = Math.atan2(y2 - y1, x2 - x1);
    drawLine(ctx, x1, y1, x2, y2);
    drawTail(ctx, x1, y1, angle, size);
    drawArrowhead(ctx, x1, y1, x2, y2, size);
}

以上代码为绘制完整箭头的函数，函数参数包括：绘图上下文、箭头起点坐标、箭头终点坐标和箭头大小。

四、示例代码

以下是示例代码，可直接复制使用。

<canvas id="arrowCanvas" width="600" height="400"></canvas>

<script>
var canvas = document.getElementById("arrowCanvas");
var context = canvas.getContext("2d");

function drawArrowhead(ctx, x1, y1, x2, y2, size){
    var angle = Math.atan2(y2 - y1, x2 - x1);
    ctx.beginPath();
    ctx.moveTo(x2, y2);
    ctx.lineTo(x2 - size * Math.cos(angle - Math.PI / 6), y2 - size * Math.sin(angle - Math.PI / 6));
    ctx.lineTo(x2 - size * Math.cos(angle + Math.PI / 6), y2 - size * Math.sin(angle + Math.PI / 6));
    ctx.closePath();
    ctx.fill();
}

function drawLine(ctx, x1, y1, x2, y2){
    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.stroke();
}

function drawTail(ctx, x1, y1, angle, size){
    var x2 = x1 - size * Math.cos(angle);
    var y2 = y1 - size * Math.sin(angle);
    ctx.beginPath();
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.lineTo(x2 - size * Math.cos(angle - Math.PI / 6), y2 - size * Math.sin(angle - Math.PI / 6));
    ctx.lineTo(x2 - size * Math.cos(angle + Math.PI / 6), y2 - size * Math.sin(angle + Math.PI / 6));
    ctx.closePath();
    ctx.fill();
}

function drawArrow(ctx, x1, y1, x2, y2, size){
    var angle = Math.atan2(y2 - y1, x2 - x1);
    drawLine(ctx, x1, y1, x2, y2);
    drawTail(ctx, x1, y1, angle, size);
    drawArrowhead(ctx, x1, y1, x2, y2, size);
}

drawArrow(context, 100, 100, 200, 200, 10);
</script>

以上代码将在canvas中绘制一条起点为(100, 100)终点为(200, 200)的箭头，箭头大小为10。