javascript - Draw part of an image inside html5 canvas - Stack Overflow

admin管理员组

文章数量:1334887

I am trying to draw the first Green tank inside my canvas but i think i am missing something in my code

jsfiddle:

draw: function () {
    tankImg.onload = function () {
        ctx.drawImage(tankImg, this.Pos * this.w, 0, this.w, this.h, this.x, this.y, this.w, this.h);
    };
}

Can anyone help me please?

I am trying to draw the first Green tank inside my canvas but i think i am missing something in my code

jsfiddle:

draw: function () {
    tankImg.onload = function () {
        ctx.drawImage(tankImg, this.Pos * this.w, 0, this.w, this.h, this.x, this.y, this.w, this.h);
    };
}

Can anyone help me please?

• javascript
• jquery
• html
• canvas
• html5-canvas

Share Improve this question Follow edited Feb 7, 2014 at 10:55 user1693593 asked Feb 7, 2014 at 9:21 SoraSora 2,5511919 gold badges7777 silver badges150150 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

Ok, first of all thanks so much for the fiddle - makes everything a billion times easier.

There are two three errors in your code - the first is the tankImg.onload function. The onload function only fires once - when the image first loads.

What you want is tankImg.plete which will return true if loaded and false if not.

Secondly, you cannot assign 'ch - this.h' for the y property because 'this' isn't defined until, well, you finish defining it. What you can do is set the y value in your draw code.

Thirdly in javascript you can't do var cw, ch = 400;

 $(document).ready(function () {
     var cw = 400;
     var ch = 400;
     var ctx = $("#MyCanvas")[0].getContext("2d");
     var tankImg = new Image();
     tankImg.src = "http://oi62.tinypic./148yf7.jpg";
     var Fps = 60;
     var PlayerTank = {
         x: cw / 2,
         w: 84,
         h: 84,
         Pos: 2,
         draw: function () {
             ctx.drawImage(tankImg, this.Pos * this.w, 0, this.w, this.h, this.x, ch - this.h, this.w, this.h);
         }
     };

     var game = setInterval(function () {
         if (tankImg.plete) {
             PlayerTank.draw();
             PlayerTank.x++;
         }
     }, 1000 / Fps);
 });

Here is the pleted jsfiddle with bonus movement for fun.

Edit: Ken's version of handling the .onload is much better.

There are a few minor issues with the code which prevents:

1. Image to be loaded properly
2. Some uninitialized variables
3. Some inaccessible variables

The first variable that is undefined (producing NaN for the drawImage() method) is:

var cw; /// is not defined

The second more important issue is the way you handle the image loading.

You are currently setting the onload handler inside the draw method and re-setting it for each frame. Here the onload will probably not be caught and using the draw code inside it will at best only draw the image once as onload is only called once.

Change the code around a little like this:

var tankImg = new Image();
tankImg.onload = start;      /// add the onload handler before setting src.
tankImg.src = "http://oi62.tinypic./148yf7.jpg";

Then move your invoke of setInterval to start:

var game;   /// keep this var outside (in global)

function start() {
    game = setInterval(function () {
        PlayerTank.draw();
    }, 1000 / Fps);
}

The third issue is that this.h is not defined when you try to use it. Add a manual value (as in the modified fiddle) or wait until draw() is called to calculate it.

Now it should work:

Modified fiddle here

本文标签： javascriptDraw part of an image inside html5 canvasStack Overflow