画布中的错误绘图箭头

我编写代码但未运行。我有2个标签画布。当我改变帆布< 100的属性高度，然后箭头隐藏。如果我在标记画布之前没有写tag div，那么它运行正常。谢谢你的支持！！！！的源代码：画布中的错误绘图箭头

<body> 
<div id="yendau">LOL</div> 
<canvas id="c" width="500" height="100">Brower of you doesn't not support Canvas</canvas> 
<div>Yolooooooooooo</div> 
<canvas id="d" width="500" height="300">Brower of you doesn't not support Canvas</canvas> 


<script src="jquery-1.9.1.js"></script> 
<script langauage="javascript"> 



function canvas_arrow(context, fromx, fromy, tox, toy){ 
    var headlen = 20; // length of head in pixels 
    var dx = tox-fromx; 
    var dy = toy-fromy; 
    var angle = Math.atan2(dy,dx); 
    context.moveTo(fromx, fromy); 
    context.lineTo(tox, toy); 
    context.lineWidth=2; 

    context.moveTo(tox, toy); 
    context.lineTo(tox-headlen*Math.cos(angle+Math.PI/6),toy-headlen*Math.sin(angle+Math.PI/6)); 
    context.moveTo(tox, toy); 
    context.lineTo(tox-headlen*Math.cos(angle-Math.PI/6),toy-headlen*Math.sin(angle-Math.PI/6)); 
} 

$('document').ready(function(){ 
    var count= parseInt($("canvas").length); 
    for(var i=0; i< count; i++){ 
     var ctx= $("canvas")[i].getContext('2d'); 
     ctx.beginPath(); 
     //var x= $('#c').offset().left-15; 
     //var y= $('#c').offset().top-15; 
     var x= $('#'+$("canvas")[i].id).offset().left; 
     var y= $('#'+$("canvas")[i].id).offset().top+15; 
     var x1= x+100; 
     canvas_arrow(ctx,x,y,x1,y); 
     ctx.stroke(); 
    } 
});

来源

2015-02-23 Yên Đậu

第一件事是：总是用beginPath启动一个新路径 – GameAlchemist 2015-02-23 17:47:23

你并不需要添加计算X，Y当偏移画布。在你的情况下，这样做会很快将你的箭头推离画布。

画布偏移在计算鼠标位置时非常有用，但在绘制画布本身时无用。这是因为鼠标坐标总是相对于页面的左上角 - 而不是画布的左上角。

画布的左上角是x = 0，y = 0。因此，只需将x，y设置为所需的坐标即可：

当您在画布上向右移动时，x从零增加。
y随着向下移过画布而从零增加。

来源

2015-02-23 17:53:52 markE

感谢您的支持。但我有一个问题。我想再问你一次。我想要一行文字的箭头，但不知道该怎么做。期待您的帮助。 – 2015-02-24 03:42:06

很高兴我能帮到你。如果你想问一些不同而又不相关的东西，你应该问另一个问题。 – markE 2015-02-24 04:13:45

画布中的错误绘图箭头

回答

相关问题