HTML5 canvas畫帶箭頭的虛線

2020-03-24 15:46:26

字體：大中小

來源：轉(zhuǎn)載

供稿：網(wǎng)友

本案例注意事項(xiàng)：

1、當(dāng)你拖動(dòng)箭頭時(shí) canvas里面線條繪制自動(dòng)重新計(jì)算點(diǎn)。

2、canvas沒有畫虛線的api，因?yàn)閷?duì)api不是很熟悉，所以就不獻(xiàn)丑了，在網(wǎng)上找的。

3、箭頭出來后點(diǎn)擊畫布里面的任意點(diǎn) 箭頭將延伸到該處，至于具體的應(yīng)用修改canvas的lineTo屬性就能實(shí)現(xiàn)了。

4、具體的代碼解釋我寫的比較清楚，修改箭頭樣式只需寫過lineTo即可，非常簡單。

效果如下：

HTML5 canvas畫帶箭頭的虛線學(xué)知

代碼如下：

<!DOCTYPE HTML>

<html lang="en"><head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>HTML Canvas Dotted Lines</title>

<style type="text/css" media="screen">

body { background:#ddd; text-align:center; }

canvas { margin:2em auto; display:block; border:1px solid #666; }

label { padding-right:2em }

</style>

<script type="text/javascript" src="excanvas.js" ></script>

<script type="text/javascript" src="jCanvaScript.1.5.15.min.js" ></script>

</head>

<body>



<canvas width="800" height="600"></canvas>

<p>

<label>Line Width: <input id="width" value="2" size="1"></label>

<label>Dashes/Gaps: <input id="dashes" value="10 20" size="15"></label>

<label>Line Cap: <select id="linecap"><option>butt</option><option selected>round</option><option>square</option></select></label>

</p>



<script type="text/javascript" charset="utf-8">

if (window.CanvasRenderingContext2D && CanvasRenderingContext2D.prototype.lineTo){

CanvasRenderingContext2D.prototype.dashedLine = function(x,y,x2,y2,dashArray){

if (!dashArray) dashArray=[10,5];

var dashCount = dashArray.length;

this.moveTo(x, y);

var dx = (x2-x), dy = (y2-y);