用Canvas画带箭头的线(包括箭头向内和箭头向外)

本文介绍了如何在HTML5 Canvas上绘制带箭头的线,包括箭头向内的线条和箭头向外的线条。通过定义角度、半径等参数,实现了不同方向的箭头效果,并展示了单箭头、双箭头在线内和线外的绘制方法。
摘要由CSDN通过智能技术生成

首先要有一个Canvas,例如<canvas id="canvas" height="800"></canvas>

然后再在Canvas上,画东西。

如下:

var tag="canvas";
var _ANGLE = 30;
var _RADIUS = 10.0;
var _ANGLE_CROSS = 90.0;
var _DIST_CROSS = 8.0;
var _DIST_OUTER = 20.0;
//单箭头
var p0=new jsPoint(100,100);
var p1=new jsPoint(200,100);
drawLine(tag,p0,p1);
drawArrow(tag, p0, p1);
//双箭头在线内
var p2=new jsPoint(100,200);
var p3=new jsPoint(200,200);
drawLine(tag,p2,p3);
drawArrow(tag, p2, p3);
drawArrow(tag, p3, p2);
drawCrossLine(tag, p2, p3);
drawCrossLine(tag, p3, p2);
//双箭头在线外
var p4=new jsPoint(100,300);
var p5=new jsPoint(200,300);
drawLine(tag,p4,p5);
drawArrowOuter(tag, p4, p5);
drawArrowOuter(tag, p5, p4);
drawCrossLine(tag, p4, p5);
drawCrossLine(tag, p5, p4);

function draw

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值