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

请查看http://lislis.sakura.ne.jp/canvas/arrowmark/arrowmark03.html

中的html源代码

Answer 2

这个例子中没有jquery，但我想我会分享我对“你今日”脚本的修改

    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>

如何使用jQuery绘制箭头标记

3 个答案: