如何使用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"); 
    }