jquery - Javascript: Catch an element using "getElementsByTagName"? - Stack Overflow

admin管理员组

文章数量:1330909

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.

• javascript
• jquery
• canvas
• 2d

Share Improve this question Follow edited Sep 2, 2014 at 13:41 UID asked Aug 28, 2014 at 20:37 UIDUID 4,4941111 gold badges4747 silver badges7676 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

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

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