canvas繪製箭頭效果程式碼例項
本章節介紹一下如何利用canvas繪製帶有箭頭的直線效果,效果非常的簡單,但是任何複雜的效果,都是從簡單的效果組合而來的,更何況html5還算是較新的技術,下面就提供一個程式碼例項供大家參考之用。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <script> ;(function(window,document){ if (window.mapleque==undefined) window.mapleque={}; if (window.mapleque.arrow!=undefined) return; /** * 元件對外介面 */ var proc={ /** * 接收canvas物件,並在此上畫箭頭(箭頭起止點已經設定) * @param context */ paint:function(context){paint(this,context);}, /** * 設定箭頭起止點 * @param sp起點 * @param ep終點 * @param st強度 */ set:function(sp,ep,st){init(this,sp,ep,st);}, /** * 設定箭頭外觀 * @param args */ setPara:function(args){ this.size=args.arrow_size;//箭頭大小 this.sharp=args.arrow_sharp;//箭頭銳鈍 } }; var init=function(a,sp,ep,st){ a.sp=sp;//起點 a.ep=ep;//終點 a.st=st;//強度 }; var paint=function(a,context){ var sp=a.sp; var ep=a.ep; if (context==undefined) return; //畫箭頭主線 context.beginPath(); context.moveTo(sp.x,sp.y); context.lineTo(ep.x,ep.y); //畫箭頭頭部 var h=_calcH(a,sp,ep,context); context.moveTo(ep.x,ep.y); context.lineTo(h.h1.x,h.h1.y); context.moveTo(ep.x,ep.y); context.lineTo(h.h2.x,h.h2.y); context.stroke(); }; //計算頭部座標 var _calcH=function(a,sp,ep,context){ var theta=Math.atan((ep.x-sp.x)/(ep.y-sp.y)); var cep=_scrollXOY(ep,-theta); var csp=_scrollXOY(sp,-theta); var ch1={x:0,y:0}; var ch2={x:0,y:0}; var l=cep.y-csp.y; ch1.x=cep.x+l*(a.sharp||0.025); ch1.y=cep.y-l*(a.size||0.05); ch2.x=cep.x-l*(a.sharp||0.025); ch2.y=cep.y-l*(a.size||0.05); var h1=_scrollXOY(ch1,theta); var h2=_scrollXOY(ch2,theta); return { h1:h1, h2:h2 }; }; //旋轉座標 var _scrollXOY=function(p,theta){ return { x:p.x*Math.cos(theta)+p.y*Math.sin(theta), y:p.y*Math.cos(theta)-p.x*Math.sin(theta) }; }; var arrow=new Function(); arrow.prototype=proc; window.mapleque.arrow=arrow; })(window,document); window.onload=function(){ var cont=document.getElementById("arrowLine").getContext('2d'); var a1=new window.mapleque.arrow(); a1.set({x:350,y:300},{x:200,y:200}); a1.paint(cont); var a2=new window.mapleque.arrow(); a2.set({x:100,y:100},{x:200,y:250}); a2.paint(cont); var a3=new window.mapleque.arrow(); a3.set({x:100,y:300},{x:150,y:150}); a3.paint(cont); var a4=new window.mapleque.arrow(); a4.set({x:350,y:150},{x:150,y:250}); a4.setPara({ arrow_size:0.5, arrow_sharp:0.5 }) a4.paint(cont); } </script> </head> <body> <canvas width=800 height=600 id="arrowLine">使用支援HTML5瀏覽器</canvas> </body> </html>
相關文章
- canvas繪製圓環效果程式碼例項Canvas
- canvas繪製夜空小屋效果程式碼例項Canvas
- canvas繪製鐘錶效果程式碼例項Canvas
- canvas繪製橢圓效果程式碼例項Canvas
- canvas繪製熊貓頭像程式碼例項Canvas
- canvas繪製魚吃豆效果程式碼例項Canvas
- canvas繪製雪花飄落效果程式碼例項Canvas
- canvas繪製機器貓頭像程式碼例項Canvas
- canvas繪製扇形程式碼例項Canvas
- canvas繪製星星程式碼例項Canvas
- canvas 繪製雞蛋程式碼例項Canvas
- canvas 奇巧淫技(二)繪製箭頭路徑效果Canvas
- canvas繪製網格程式碼例項Canvas
- canvas繪製笑臉程式碼例項Canvas
- canvas繪製米字旗程式碼例項Canvas
- canvas繪製拋物線程式碼例項Canvas線程
- canvas繪製機器貓程式碼例項Canvas
- canvas繪製圓角矩形程式碼例項Canvas
- canvas繪製圓形鐘錶程式碼例項Canvas
- canvas繪製實心圓形程式碼例項Canvas
- canvas繪製網狀圓圈程式碼例項Canvas
- jQuery繪製網格效果程式碼例項jQuery
- CSS空心箭頭程式碼例項CSS
- canvas繪製矩形並填充顏色程式碼例項Canvas
- canvas繪製貝濟埃曲線程式碼例項Canvas線程
- canvas繪製憤怒小鳥形象程式碼例項Canvas
- HTML5利用canvas繪製矩形程式碼例項HTMLCanvas
- canvas繪製五角星程式碼例項Canvas
- canvas火焰效果程式碼例項Canvas
- css3繪製月牙效果程式碼例項CSSS3
- canvas字母雨效果程式碼例項Canvas
- canvas載入效果程式碼例項Canvas
- canvas擺動效果程式碼例項Canvas
- canvas繪製帶有刻度的座標系程式碼例項Canvas
- 更換select箭頭程式碼例項
- canvas水位進度效果程式碼例項Canvas
- canvas原型鐘錶效果程式碼例項Canvas原型
- canvas氣泡上浮效果程式碼例項Canvas