❤
npm
Sign UpSign In

canvas-arrow
TypeScript icon, indicating that this package has built-in type declarations

1.1.1 • Public • Published

效果

使用

  • script标签引入dist/canvas-arrow.js 或 dist/canvas-arrow.min.js
  • npm：运行命令 npm install -S canvas-arrow，然后import 'canvas-arrow'

🌰例子

  • 浏览器端
<!DOCTYPE html>
<html>
<head>
    ...
</head>
<body>
    <canvas id="demo"></canvas>
    <script src="../dist/canvas-arrow.min.js"></script> 
    <script>
        var canvas = document.querySelector("#demo");
        var ctx = canvas.getContext("2d");
 
        //1、画起点坐标为(10,10) 终点坐标为(80,100)的黑色箭头
        ctx.beginPath();
        ctx.save();
        ctx.fillStyle = "black";
        ctx.arrow(10, 10, 80, 100);//或ctx.drawArrow(10, 10, 80, 100)
        ctx.fill();
        ctx.restore();
 
 
        //2、画起点坐标为(100,100) 终点坐标为(70,20) 宽度为7的红箭头
        ctx.beginPath();
        ctx.save();
        ctx.fillStyle = "red";
        ctx.drawArrow(100, 100, 70, 20, 7);
        ctx.fill();
        ctx.restore();
 
        //3、使用strokeArrow方法
        ctx.save();
        ctx.strokeStyle = "green";
        ctx.strokeArrow(200, 200, 110, 110, 7);
        ctx.restore();
 
        //4、使用fillArrow方法
        ctx.save();
        ctx.fillStyle = "brown";
        ctx.fillArrow(200, 200, 180, 100, 7);
        ctx.restore();
    </script> 
</body>
</html>

  • 效果

  • npm 模块开发

//重要
import 'canvas-arrow'
 
let canvas = document.querySelector("#demo");
let ctx = canvas.getContext("2d");
 
//1、画起点坐标为(10,10) 终点坐标为(80,100)的黑色箭头
ctx.beginPath();
ctx.save();
ctx.fillStyle = "black";
ctx.arrow(10, 10, 80, 100);//或ctx.drawArrow(10, 10, 80, 100)
ctx.fill();
ctx.restore();
 
 
//2、画起点坐标为(100,100) 终点坐标为(70,20) 宽度为7的红箭头
ctx.beginPath();
ctx.save();
ctx.fillStyle = "red";
ctx.drawArrow(100, 100, 70, 20, 7);
ctx.fill();
ctx.restore();
 
//3、使用strokeArrow方法
ctx.save();
ctx.strokeStyle = "green";
ctx.strokeArrow(200, 200, 110, 110, 7);
ctx.restore();
 
//4、使用fillArrow方法
ctx.save();
ctx.fillStyle = "brown";
ctx.fillArrow(200, 200, 180, 100, 7);
ctx.restore();
  • 效果

方法说明

方法 说明
arrow 描绘箭头路径
drawArrow 与arrow方法作用相同
strokeArrow 描绘箭头路径，并画出箭头线条
fillArrow 填充描绘的箭头路径

方法参数说明

  • arrow(x0,y0,x1,y1,width)
  • drawArrow(x0,y0,x1,y1,width)
  • strokeArrow(x0,y0,x1,y1,width)
  • fillArrow(x0,y0,x1,y1,width)
参数 说明 默认值
x0 箭头的起点x坐标 -
y0 箭头的起点y坐标 -
x1 箭头的终点x坐标 -
y1 箭头的终点y坐标 -
width 箭头的宽度，最小值为3 3

Readme

Keywords

Package Sidebar

Install

npm i canvas-arrow

Repository

github.com/destiny-wenlun/canvas-arrow

Homepage

github.com/destiny-wenlun/canvas-arrow#readme

Weekly Downloads

1

Version

1.1.1

License

ISC

Unpacked Size

13.3 kB

Total Files

6

Last publish

Collaborators

  • wenlun
Try on RunKit
Report malware