admin管理员组文章数量:1336084
I have a javascript canavas code where if I catch the tag "Canvas" with ID, its starts working, but if i catch it using "TagName" it stop working.
in my code Canvas tag is generating at runtime and I cannot pass the ID for the same so I want to generate the 2D object on Canvas by catching it with tagname.
Here is the code for the same:
JS
var canvas=document.getElementsByTagName("canvas");
var context=canvas.getContext("2d");
function Line(x1,y1,x2,y2){
this.x1=x1;
this.y1=y1;
this.x2=x2;
this.y2=y2;
}
Line.prototype.drawWithArrowheads=function(ctx){
// arbitrary styling
ctx.strokeStyle="blue";
ctx.fillStyle="blue";
ctx.lineWidth=1;
// draw the line
ctx.beginPath();
ctx.moveTo(this.x1,this.y1);
ctx.lineTo(this.x2,this.y2);
ctx.stroke();
// draw the starting arrowhead
var startRadians=Math.atan((this.y2-this.y1)/(this.x2-this.x1));
startRadians+=((this.x2>this.x1)?-90:90)*Math.PI/180;
this.drawArrowhead(ctx,this.x1,this.y1,startRadians);
// draw the ending arrowhead
var endRadians=Math.atan((this.y2-this.y1)/(this.x2-this.x1));
endRadians+=((this.x2>this.x1)?90:-90)*Math.PI/180;
this.drawArrowhead(ctx,this.x2,this.y2,endRadians);
}
Line.prototype.drawArrowhead=function(ctx,x,y,radians){
ctx.save();
ctx.beginPath();
ctx.translate(x,y);
ctx.rotate(radians);
ctx.moveTo(0,0);
ctx.lineTo(5,20);
ctx.lineTo(-5,20);
ctx.closePath();
ctx.restore();
ctx.fill();
}
// create a new line object
var line=new Line(50,50,250,275);
// draw the line
line.drawWithArrowheads(context);
Here is the Fiddle for the same: /
Let me know if you need any other information.
Please suggest.
I have a javascript canavas code where if I catch the tag "Canvas" with ID, its starts working, but if i catch it using "TagName" it stop working.
in my code Canvas tag is generating at runtime and I cannot pass the ID for the same so I want to generate the 2D object on Canvas by catching it with tagname.
Here is the code for the same:
JS
var canvas=document.getElementsByTagName("canvas");
var context=canvas.getContext("2d");
function Line(x1,y1,x2,y2){
this.x1=x1;
this.y1=y1;
this.x2=x2;
this.y2=y2;
}
Line.prototype.drawWithArrowheads=function(ctx){
// arbitrary styling
ctx.strokeStyle="blue";
ctx.fillStyle="blue";
ctx.lineWidth=1;
// draw the line
ctx.beginPath();
ctx.moveTo(this.x1,this.y1);
ctx.lineTo(this.x2,this.y2);
ctx.stroke();
// draw the starting arrowhead
var startRadians=Math.atan((this.y2-this.y1)/(this.x2-this.x1));
startRadians+=((this.x2>this.x1)?-90:90)*Math.PI/180;
this.drawArrowhead(ctx,this.x1,this.y1,startRadians);
// draw the ending arrowhead
var endRadians=Math.atan((this.y2-this.y1)/(this.x2-this.x1));
endRadians+=((this.x2>this.x1)?90:-90)*Math.PI/180;
this.drawArrowhead(ctx,this.x2,this.y2,endRadians);
}
Line.prototype.drawArrowhead=function(ctx,x,y,radians){
ctx.save();
ctx.beginPath();
ctx.translate(x,y);
ctx.rotate(radians);
ctx.moveTo(0,0);
ctx.lineTo(5,20);
ctx.lineTo(-5,20);
ctx.closePath();
ctx.restore();
ctx.fill();
}
// create a new line object
var line=new Line(50,50,250,275);
// draw the line
line.drawWithArrowheads(context);
Here is the Fiddle for the same: http://jsfiddle/Sg7EZ/179/
Let me know if you need any other information.
Please suggest.
Share Improve this question edited Sep 2, 2014 at 13:41 UID asked Aug 28, 2014 at 20:37 UIDUID 4,49411 gold badges47 silver badges76 bronze badges 1- 1 "not working" should not appear in a title. Use the space wisely to quickly summarize the actual issue. This would be much easier to do if the issue was clearly described in the question. – user2864740 Commented Aug 28, 2014 at 20:42
2 Answers
Reset to default 8You'll want to change
document.getElementsByTagName("canvas");
to this:
document.getElementsByTagName("canvas")[0];
This way you will get the first element (and only one in this case) instead of the nodelist (which doesn't have a getContext
function)
JSFiddle
The better alternative would actually be to use the ID on your canvas element and use something like getElementById("canvas")
so you know for sure exactly what element you are using (in case you ever end up with multiple canvas elements).
JSFiddle
getElementsByTagName returns a NodeList, while getElementById returns an Element. Try canvas[0].getContext("2d")
to return the first instance of canvas.
本文标签: jqueryJavascript Catch an element using quotgetElementsByTagNamequotStack Overflow
版权声明:本文标题:jquery - Javascript: Catch an element using "getElementsByTagName"? - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742247640a2440153.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论