如何使用jQuery繪製箭頭標記

Question

任何人都可以幫我編寫繪製箭頭標記的代碼嗎？

我正在使用html5 + jquery。 ouu能解釋如何製作這種形狀？

ctx.lineWidth = 3; 
    ctx.lineJoin = 'round'; 
    ctx.strokeStyle = '#000000'; 
    ctx.save(); 
    ctx.beginPath(); 
    ctx.moveTo(43,150); 
    ctx.lineTo(250,150); 
    ctx.stroke(); 
    ctx.beginPath(); 
    ctx.moveTo(250,150); 
    ctx.lineTo(200,80); 
    ctx.stroke(); 
    ctx.beginPath(); 
    ctx.moveTo(250,150); 
    ctx.lineTo(200,220); 
     ctx.stroke(); 

Answer 1

我假定您指的是html5畫布，並使用jQuery進行繪製。

所以這是jQuery插件，可以幫助您創建一個箭頭標記，你所說的內容之一：http://plugins.jquery.com/node/14184/release

如果你是新來的jQuery，本教程會真正幫助你：http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

請看看HTML源代碼從http://lislis.sakura.ne.jp/canvas/arrowmark/arrowmark03.html

Answer 2

這是繪製箭頭代碼：

<script> 
var drawArrow = function(id, width) { 
    var canvas = document.getElementById('canvas-'+id); 
    var ctx = canvas.getContext('2d'); 

    var xCoord=5; 
    var yCoord=5; 

    ctx.lineWidth = 2; 
    //ctx.save(); 
    var t = 10;//Math.round((xCoord+width)/10); 

    ctx.beginPath(); 
    ctx.moveTo(xCoord,yCoord); 
    ctx.lineTo(xCoord+5,yCoord+5); 
    ctx.moveTo(xCoord,yCoord); 
    ctx.lineTo(xCoord+5,yCoord-5); 
    ctx.moveTo(xCoord,yCoord); 
    ctx.lineTo(xCoord+width-t,yCoord); 
    ctx.moveTo(xCoord+width-t,yCoord); 
    ctx.lineTo(xCoord+width-(t+5),yCoord+5); 
    ctx.moveTo(xCoord+width-t,yCoord); 
    ctx.lineTo(xCoord+width-(t+5),yCoord-5); 
    ctx.strokeStyle = '#FF0000'; 
    //ctx.fillStyle='#FF0000'; 
    ctx.fillStyle='rgba(255, 255, 255, 0)'; 
    ctx.stroke(); 
    ctx.fill(); 
    ctx.closePath(); 
} 
</script> 

Answer 3

這個例子中沒有jquery，但我想我會分享我對「You-Day」腳本的修改

var drawUpArrow = function(id, width, height, colour) { 
     var canvas = document.getElementById('canvas-'+id); 
     var ctx = canvas.getContext('2d'); 

     var xCoord=width/2; 
     var yCoord=height/2; 

     ctx.beginPath(); 
     ctx.moveTo(xCoord,0); 
     ctx.lineTo(0,yCoord); 
     ctx.lineTo(xCoord/2,yCoord); 
     ctx.lineTo(xCoord/2,yCoord*2); 
     ctx.lineTo(xCoord+xCoord/2,yCoord*2); 
     ctx.lineTo(xCoord+xCoord/2,yCoord); 
     ctx.lineTo(xCoord*2,yCoord); 
     ctx.closePath(); 

     ctx.fillStyle = colour; 
     ctx.fill(); 

     ctx.strokeStyle = colour; 
     ctx.stroke(); 
    } 
    var drawDownArrow = function(id, width, height, colour) { 
     var canvas = document.getElementById('canvas-'+id); 
     var ctx = canvas.getContext('2d'); 

     var xCoord=width/2; 
     var yCoord=height/2; 

     ctx.beginPath(); 
     ctx.moveTo(xCoord,yCoord*2); 
     ctx.lineTo(0,yCoord); 
     ctx.lineTo(xCoord/2,yCoord); 
     ctx.lineTo(xCoord/2,0); 
     ctx.lineTo(xCoord+xCoord/2,0); 
     ctx.lineTo(xCoord+xCoord/2,yCoord); 
     ctx.lineTo(xCoord*2,yCoord); 
     ctx.closePath(); 

     ctx.fillStyle = colour; 
     ctx.fill(); 

     ctx.strokeStyle = colour; 
     ctx.stroke(); 
    } 
    window.onload = function(){ 
     drawDownArrow(1, 200,240, "#8ED6FF"); 
    }