Как нарисовать стрелку с помощью jQuery

Question

Может ли кто-нибудь помочь мне в написании кода для рисования стрелки?

Я работаю в html5 + jquery. Можете ли вы объяснить, как сделать эту форму?

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

В этом примере нет 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");
    }

Answer 3

Это код для рисования стрелки:

<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>