當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

html画布图片不显示_如何在HTML5画布上显示图像

發布時間：2023/11/29 HTML 45 豆豆

生活随笔收集整理的這篇文章主要介紹了 html画布图片不显示_如何在HTML5画布上显示图像小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

html畫布圖片不顯示

by Nash Vail

由Nash Vail

Ok, so here’s a question: “Why do we need an article for this, Nash?”

好的，這是一個問題：“為什么我們需要為此寫一篇文章，納什？”

Well, grab a seat.

好吧，坐下。

No wait! First, have a look at this.

不用了首先，看看這個。

Exactly. What was that?

究竟。那是什么？

drawImage is the method used to display or “draw” an image on canvas. You might or might not already know that it’s not as simple as just passing the URI of the image to it. drawImage accepts a maximum of 9 parameters. They go something like this, ready? Hold your breath…

drawImage是用于在canvas上顯示或“繪制”圖像的方法。您可能已經知道，也許還不知道它并不像將圖像的URI傳遞給它那樣簡單。 drawImage最多接受9個參數。他們會這樣，準備好了嗎？屏住呼吸…

(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

Breathe, out.

呼。

I found the documentation for drawImage a little confusing and hardcore. Just the documentation, yes. The concept and how the API works is great for all the needs that it is supposed to serve.

我發現drawImage的文檔有點混亂和頑固。只是文檔，是的。 API的概念和工作方式非常適合應滿足的所有需求。

We’ll go over the parameters mentioned above one by one, in a way that’ll make complete sense to you. If at any point in the article you find yourself going “I just wanted to draw an image on my canvas, dear Nash. Why put my mind through the ringer?”, it’ll be an understandable frustration.

我們將以一種對您完全有意義的方式逐一介紹上述參數。如果您在文章中的任何時候都發現自己“我只想在畫布上繪制圖像，親愛的納什。為什么要讓我的心驚動呢？”，這是可以理解的挫敗感。

The way drawImage works does seem complex to some extent, but this complexity makes drawImage immensely powerful, and useful – as we’ll see through examples at the end. Moreover, the complexity is just on the surface: once you understand the whole picture it’s a downhill bicycle ride on a country road somewhere in Europe.

drawImage工作方式在某種程度上確實看起來很復雜，但是這種復雜性使drawImage極其強大和有用-正如我們將在最后的示例中看到的那樣。而且，復雜性只是表面上的：一旦您了解了整個情況，那就是在歐洲某處的鄉間路上騎下坡自行車。

By the end of this article you’ll be able to visualise how drawImage will draw any given image on canvas just by looking at the values of the 9 parameters. Sounds like a superpower you might wanna have? Okay then, let’s dive right in!

到本文結尾，您只需看一下9個參數的值，就可以形象地看到drawImage如何在canvas上繪制任何給定的圖像。聽起來像您可能想要的超級大國？好吧，那就讓我們潛水吧！

在畫布中加載圖像 (Loading an image in canvas)

Let’s start simple with an image and an HTML5 canvas.

讓我們從圖像和HTML5 canvas開始簡單。

Here’s what our directory looks like

這是我們目錄的樣子

Inside of our index.html file we have created a new canvas element like so.

在index.html文件中，我們像這樣創建了一個新的canvas元素。

Our goal is to take the cat.jpg image and put it on the canvas (#my-canvas). And like I already said, it ain’t that easy betty! Otherwise I wouldn’t be writing this article, you feel me? Good.

我們的目標是拍攝cat.jpg圖像并將其放在畫布上( #my-canvas )。就像我已經說過的，貝蒂并不是那么容易！否則我不會寫這篇文章，你覺得我嗎？好。

To start with, let’s target the canvas element using JavaScript and get its context.

首先，讓我們使用JavaScript定位canvas元素并獲取其上下文。

const myCanvas = document.getElementById('my-canvas'); const myContext = myCanvas.getContext('2d');

We need myContext to interact with the canvas element. It’s like, if canvas is a blank sheet of paper, the canvas’s context is the pen. Intuitively, you’ll tell your pen to draw something on a blank sheet of paper, and not just yell at the paper to draw something on itself right?

我們需要myContext與canvas元素進行交互。就像，如果canvas是一張空白紙，則畫布的上下文就是筆。直觀地說，您會告訴您的筆在一張空白的紙上畫一些東西，而不僅僅是喊著在紙上自己畫些東西，對嗎？

There are a number of things you can do with context. You can draw a rectangle, or an ellipse or a line, or an… image. Also, notice that the context myContext is implicitly linked to myCanvas. You can have multiple canvases and call getContext() on each of them to get a new context/pen for each. In our case we are dealing with just one canvas (myCanvas) and just one context (myContext).

您可以使用context執行許多操作。您可以繪制矩形，橢圓形或直線或圖像。另外，請注意，上下文myContext隱式鏈接到myCanvas 。您可以具有多個canvas并在每個canvas調用getContext()以為每個canvas獲取新的上下文/筆。在我們的案例中，我們只處理一個畫布( myCanvas )和一個上下文( myContext )。

Alright, with that out of the way, we can finally start getting our feet wet with drawImage.

好了，有了這種方式，我們終于可以開始使用drawImage弄濕了。

For a refresher, here are the 9 parameters that drawImage accepts.

drawImage一下，這是drawImage接受的9個參數。

(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

We’ll start with the first parameter, image. Let’s first write something that doesn’t work.

我們將從第一個參數image 。首先讓我們寫一些行不通的東西。

context.drawImage('./cat.jpg', 0, 0);

See the two zeroes at the end? Good. This is not the part of the article where you’re supposed to understand what they’re there for. Ignore them for now, just keep in the back of your head that Nash wrote 2 zeroes and didn’t explain them. I won’t mind.

看到結尾處的兩個零？好。這不是您應該了解它們的用途的文章的一部分。現在忽略它們，只是讓您記住，納什寫了2個零并且沒有解釋它們。我不介意

Now notice ...('./cat.jpg',.. in the line of code above. Appears to be a perfectly correct URI doesn’t it? And it is…buuuut, if you fire up index.html in a browser you’ll see a long long error message identical to what’s shown below.

現在通知...('./cat.jpg',..在上面的代碼行。看來是完全正確的URI不是嗎？它是... buuuut，如果你火起來index.html的瀏覽器中，您會看到一條很長的錯誤消息，與以下內容相同。

ERROR: The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)

*gulp*

*大嘴*

The error is telling us that it needs an image element and not just a URI to the image. To get around that, this is what we can do.

錯誤告訴我們它需要一個圖像元素，而不僅僅是圖像的URI。為了解決這個問題，這是我們可以做的。

const canvas = document.getElementById('canvas'); const context = canvas.getContext('2d'); const img = new Image(); img.src = './cat.jpg'; img.onload = () => { context.drawImage(img, 0, 0); };

That is something you didn’t expect did you? Canvas needs a preloaded image in order to draw/display it in itself. No need to show any contempt towards canvas, by the way. It has its reason, it’s just like the rest of us. We’ll eventually see what those reasons are and maybe then you’ll be able to sympathise.

那是您沒想到的事嗎？畫布需要預加載的圖像才能在其自身上繪制/顯示。順便說一句，無需對帆布表示蔑視。這是有原因的，就像我們其他人一樣。我們最終將看到這些原因是什么，也許您將能夠同情。

To recap:

回顧一下：

drawImage asks for 9 parameters, first of which is image. We looked and understood that canvas requires a preloaded image to draw and not just a URI to the image. Why does it need that? It will become clear as you read.

drawImage需要9個參數，其中第一個是image 。我們了解到， canvas需要繪制一個預加載的圖像，而不僅僅是圖像的URI。為什么需要它？當您閱讀時，它將變得清晰。

Now it’s time for the remaning 8 parameters. Pop your collars! I am gonna learn you some graphics editing first!

現在該剩下8個參數了。甩開你的衣領！我要先學習一些圖形編輯！

如何裁剪圖片 (How to crop a picture)

Every single graphics editing program, even the most basic, comes with the feature of cropping. It’s fairly simple: open an image > select the area you want visible > hit crop. And just like that, the naked beer belly of that obnoxious smelling old man is out. Poof!

每個圖形編輯程序，即使是最基本的程序，都具有裁剪功能。這非常簡單：打開圖像>選擇要顯示的區域>裁剪。就這樣，那個令人討厭的嗅到的老人赤裸的啤酒肚出來了。 of！

Technology! Saving people’s Instagrams since Instagram existed.

技術！自從Instagram存在以來，拯救人們的Instagram。

Let’s take a step back, and stop riiight, here.

讓我們退后一步，在這里停下腳步。

Let’s mark some points on it.

讓我們在上面標記一些要點。

“Wait a second! sx, sy, sWidth and sHeight? I have seen them before!”

“等一會兒！ sx ， sy ， sWidth和sHeight ？我以前見過他們！”

Yes, about a minute ago! Which leads us to the fleshiest part of the article.

是的，大約一分鐘前！這使我們進入了文章中最精彩的部分。

在畫布上顯示圖像，步驟1：選擇 (Displaying an image on canvas, Step 1: Selection)

The first task drawImage performs (behind the scenes) is it selects a portion of the image based on the four s parameters (sx, sy, sWidth, sHeight). You can say that s in all the s parameters stands for “select”.

drawImage執行的第一個任務(在幕后)是它基于四個s參數( sx, sy, sWidth, sHeight )選擇圖像的一部分。您可以說所有s參數中的s代表“選擇”。

Here’s how it goes. sx and sy mark the point on the image from where the selection is to begin, or in other words the coordinates of the top left corner of the selection rectangle. sWidth and sHeight then, are the width and height of the selection rectangle respectively. You can scroll right up to the last image to get a clearer picture of what I am trying to explain.

這是怎么回事。 sx和sy標記圖像上開始選擇的點，或者換句話說，選擇矩形左上角的坐標。 sWidth和sHeight分別是選擇矩形的寬度和高度。您可以向右滾動到最后一張圖像，以更清晰地了解我要解釋的內容。

“But why the selection Nash? Can’t it just display the entire image?” We’re getting closer to all your answers, patience.

“但是為什么選擇納什呢？它不能顯示整個圖像嗎？” 我們越來越接近您的所有答案，耐心等待。

Just know that the first step drawImage performs after receiving a proper image is it selects a portion/area of the image based on the s parameters (sx, sy, sWidth, sHeight) you provide.

只要知道drawImage在接收到適當的圖像后執行的第一步(sx, sy, sWidth, sHeight)您提供的s參數(sx, sy, sWidth, sHeight)選擇圖像的一部分/區域。

Remember that you don’t always have to select a small portion of the image, you can select the entire image if you want to. In that case sx and sy will have values 0 and 0 respectively and sWidth, sHeight will be the same as the image’s width and height.

請記住，您不必總是選擇圖像的一小部分，也可以選擇整個圖像。在這種情況下， sx和sy值分別為0和0，而sWidth ， sHeight與圖像的寬度和高度相同。

Also, negative values are welcome for sx and sy. The values of sx and sy are relative to the origin of the image on the top left.

此外， sx和sy負值也是受歡迎的。 sx和sy的值相對于左上方圖像的原點。

Once drawImage has selected the area of image you asked it to – and we’ll see soon why selecting an area of the image helps – the next step is to draw the selected portion of the image on the canvas.

一旦drawImage選擇了您要求的圖像區域–我們將很快看到為什么選擇圖像區域會有所幫助–下一步是在畫布上繪制圖像的所選部分。

“Originally” s and d in the official documentation stand for ‘source’ and ‘destination’. But, just between us, let’s call it ‘select’ and ‘draw’. It makes much more sense this way, doesn’t it?

“本來” s和d官方文檔立場“源”和“目的地”。但是，就在我們之間，我們稱其為“選擇”和“繪制”。這樣更有意義，不是嗎？

Again. selection is done, the next step is to draw.

再次。 s的選擇完成后，下一步是d raw。

在畫布上顯示圖像，步驟2：繪制 (Displaying an image on canvas, Step 2: Drawing)

To draw the selected portion of the image, we again need four parameters.

要繪制圖像的選定部分，我們再次需要四個參數。

x Coordinate of where to start drawing on the canvas. ( dx )

x在畫布上開始繪制的位置的坐標。 ( dx )

y Coordinate of where to start drawing on the canvas. ( dy )

y在畫布上開始繪制的位置的坐標。 ( dy )

How wide to draw the image. ( dWidth )

繪制圖像的寬度。 ( dWidth )

How high/tall to draw the image. ( dHeight )

繪制圖像的高度/高度。 ( dHeight )

The values of dx and dy will be relative to the origin of the canvas.

dx和dy的值將相對于畫布的原點。

There’s a very important but subtle detail to notice here. dWidth and dHeight are in no way tied to sWidth and sHeight. They are independent values. Why do you need to know that? Well, because if you don’t choose values of the width and height of ‘draw’ carefully you will end up with a stretched or squashed image, like this.

這里有一個非常重要但細微的細節需要注意。 dWidth和dHeight絕不與sWidth和sHeight 。它們是獨立的價值觀。為什么需要知道這一點？好吧，因為如果您不仔細選擇“繪制”的寬度和高度的值，則最終將得到拉伸或擠壓的圖像，就像這樣。

So if that’s something you’re not looking for (which I hope you’re not), make sure to maintain the aspect ratio. Or so to say sWidth divided by sHeight should be equal to dWidth divided by dHeight. That was a small little disclaimer, you’re the ruler of your own world and free to choose whatever values you like.

因此，如果這不是您想要的(我希望您沒有)，請確保保持寬高比。或者說sWidth除以sHeight應該等于dWidth除以dHeight 。那是一個小的免責聲明，您是自己世界的統治者，可以自由選擇自己喜歡的任何值。

The whole process of displaying/drawing an image on canvas can thus be summarised in just two steps: Selection and Drawing.

因此，在畫布上顯示/繪制圖像的整個過程可以歸納為兩個步驟：“選擇”和“繪制”。

Awesome! Not so complicated after all is it?

太棒了！畢竟不是那么復雜嗎？

Now at this point, we’re done with all the theory. In rest of the article that follows we’ll bake the batter of knowledge spread around your head with a fun and practical example and you’ll be good to go. But, before we do that, let’s talk about one last important thing concerning drawImage.

現在，我們已經完成了所有理論。在接下來的其余文章中，我們將通過一個有趣而實用的示例為您散布在您頭上的知識提供幫助，您將一路順風。但是，在我們這樣做之前，讓我們先談一談關于drawImage最后一件重要事情。

默認值 (The default values)

Remember my lecture on “hey keep the aspect ratio and be careful don’t take chocolates from strangers…”? Well, as it turns out, you can omit certain values and not worry about the aspect ratio at all. As far as taking chocolates from strangers go, again — you’re the ruler of your own world.

還記得我關于“嘿，保持長寬比，注意不要從陌生人那里摘取巧克力……”的演講嗎？好吧，事實證明，您可以省略某些值，而完全不必擔心縱橫比。至于從陌生人那里拿走巧克力，再說一次-您是自己世界的統治者。

Here’s one way to use the method.

這是使用該方法的一種方法。

drawImage(image, dx, dy)

That is all! In this case, you’re telling drawImage only the location on canvas where to start the drawing. The rest, sx, sy, sWidth, sHeight, dWidth and dHeight are taken care of automagically. The method selects the entire image (sx = 0, sy = 0, sWidth = image's width, sHeight = images' height) and starts drawing on canvas at (dx, dy) with dWidth and dHeight same as sWidth(image’s width), sHeight(image’s height) .

就這些！在這種情況下，您只告訴drawImage在畫布上開始繪制的位置。其余的sx ， sy ， sWidth ， sHeight ， dWidth和dHeight會自動處理。該方法選擇整個圖像(sx = 0, sy = 0, sWidth = image's width, sHeight = images' height)并在dWidth和dHeight與sWidth (圖像的寬度)， sHeight相同的情況下在(dx, dy)畫布上開始繪制。 (圖像的高度)。

Remember the two zeroes that I didn’t explain? That is where the two zeroes came from.

還記得我沒有解釋的兩個零嗎？那就是兩個零的來源。

Yet another way to use the method is,

使用該方法的另一種方法是

drawImage(image, dx, dy, dWidth, dHeight)

In this form sx, sy, sWidth and sHeight are taken care of, and the method automatically selects the entire image and leaves it up to you to choose where and how large of an image to draw.

在這種形式下，將處理sx, sy, sWidth and sHeight ，該方法會自動選擇整個圖像，然后由您sx, sy, sWidth and sHeight選擇要繪制圖像的位置和大小。

Pretty cool! isn’t it?

太酷了！是不是

If I can have your attention for another two minutes I’d like to tell you why selection and drawing are two separate operations. And how it is helpful.

如果我能有你的注意力另外兩分鐘，我想告訴你為什么s選舉和d rawing是兩個單獨的操作。以及它如何有所幫助。

Do I have your attention? Great!

請注意大！

So here.

所以在這里。

Heard of sprites before? You see, sprites are a computer graphics concept where a graphic may be moved on-screen and otherwise manipulated as a single entity.

聽說過精靈嗎？您會看到，子畫面是計算機圖形學的一個概念，其中圖形可以在屏幕上移動，也可以作為一個單獨的實體進行操作。

…?

……？

I copied this definition from Google to sound suave.

我從Google復制了這個定義，聽起來很和ave。

Alright alright. Remember Mario?

好吧好吧。還記得馬里奧嗎？

Good.

好。

Let’s do something fun.

讓我們做些有趣的事。

用drawImage制作Mario動畫 (Animating Mario with drawImage)

You see, when Mario moves forward/backward or in any other direction, it appears as if he is walking. His position changes but also there is an accompanying animation of his legs and hands moving.

您會看到，當Mario向前/向后或在任何其他方向上移動時，看起來好像他在走路。他的位置發生了變化，但同時伴隨著他的腿和手移動的動畫。

How do they do that? Do they show different images of Mario in succession, like a flipbook and it appears as if he’s moving?

他們如何做到的？它們是否連續顯示了馬里奧的不同圖像，例如一本翻頁書，看起來好像他在移動？

Well, 50% yes. Imagine how resource intensive storing and loading a huge set of images describing every frame of animation in our program (or game) would be. Instead, there’s a single image and all the positions are laid out in a grid. Like the one shown below.

好吧，百分之五十。想象一下，資源密集型存儲和加載大量圖像的過程將如何描述我們程序(或游戲)中的每一幀動畫。取而代之的是，只有一張圖像，并且所有位置都布置在一個網格中 。如下圖所示。

To execute an animation, instead of loading a new image every millisecond, a portion of the same image is shown through a viewport just at different positions. Clever isn’t it?

要執行動畫，而不是每毫秒加載一次新圖像，而是通過視口僅在不同位置顯示同一圖像的一部分。是不是很聰明？

So yes, it’s sorta like a flipbook, a clever flipbook actually.

是的，這有點像一本活頁簿，實際上是一本聰明的活頁簿。

Now if you could just stretch a little and pop your knuckles I would like us to recreate Mario’s walking animation. We’ll use the sprite shown above and everything we have learnt about drawImage so far.

現在，如果您可以稍微伸展一下并彈出指關節，我希望我們重新制作Mario的行走動畫。我們將使用上面顯示的sprite以及到目前為止我們對drawImage所學的所有知識。

Ready? Here we go!

準備？開始了！

Let’s take another look at our sprite and try to figure the grid dimensions that it has been laid out on.

讓我們再看一看我們的精靈，并嘗試計算出它所放置的網格尺寸。

All that we have done here is imagined a grid over the sprite. Notice that the entire grid is made up of cells of equal dimensions (32 x 39). But it’s still just one image, remember that.

我們在這里所做的一切都只是想象一個精靈上的網格。請注意，整個網格由相等尺寸(32 x 39) 。但是它仍然只是一張圖像，請記住這一點。

Great! Now let’s get to writing some code. We’ll start in the usual way by first creating a canvas element, grabbing it and its context in JavaScript, and then loading our Mario spritesheet.

大！現在開始編寫一些代碼。我們將以通常的方式開始，首先創建一個canvas元素，在JavaScript中獲取它及其上下文，然后加載我們的Mario Spritesheet。

// index.js const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const img = new Image(); img.src = './mario.png'; img.onload = () => { ctx.drawImage(img, 0, 0); };// style.css canvas { /*Add a border around canvas for legibility*/ border: 1px solid grey; }

The above code will result in the following.

上面的代碼將導致以下結果。

Woah-kay! We’ve got the image showing! What’s happening really?

哇！我們有圖像顯示！到底是怎么回事

Here, we’re using the form of drawImage–drawImage(image, sx, sy)–where the whole image is selected and drawn on the canvas as it is.

在這里，我們使用的形式drawImage - drawImage(image, sx, sy) -where整個圖像s當選， d rawn在畫布上，因為它是。

What we want to do, first of all, is select just one cell of the grid and draw just that single cell. Let’s start out by first making tweaks to our code that selects the first cell in the third row, the one in which Mario is standing facing east. We’ll figure how to animate once we have that done. Sounds good? Lovely!

首先，我們要選擇的只是網格中的一個單元格，并僅繪制單個單元格。首先，對代碼進行調整，選擇第三行中的第一個單元格，其中Mario朝東站立。完成后，我們將弄清楚如何制作動畫。聽起來不錯？可愛！

Let’s make the necessary changes to our code.

讓我們對代碼進行必要的更改。

const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d');// Mario variables const MARIO_WIDTH = 32; const MARIO_HEIGHT = 39;const mario = new Image(); mario.src = './mario.png'; mario.onload = () => { ctx.drawImage( // Image mario, // ---- Selection ---- 0, // sx MARIO_HEIGHT * 2, // sy MARIO_WIDTH, // sWidth MARIO_HEIGHT, // sHeight // ---- Drawing ---- 0, // dx 0, // dy MARIO_WIDTH, // dWidth MARIO_HEIGHT // dHeight ); };

First off, notice the two variables MARIO_WIDTH and MARIO_HEIGHT. They are the dimensions of the grid cell, that’s all they are. We defined them to make it easier for us to traverse the grid using just multiples of each of those constants. Makes sense?

首先，請注意兩個變量MARIO_WIDTH和MARIO_HEIGHT 。它們就是網格單元的尺寸，僅此而已。我們定義它們是為了使我們可以更輕松地僅使用這些常數中的每個常數的倍數遍歷網格。說得通？

Good.

好。

Next, in the // Selection block we defined the area of the image we want to select, in the // Drawing section we defined the width and height and the position from where to start drawing on the canvas… aaand just like that we managed to draw just one cell of the entire imaginary grid.

接下來，在// Selection塊中，我們定義了要選擇的圖像區域，在// Drawing部分中，定義了寬度和高度以及從哪里開始在畫布上繪圖的位置... aaand就像我們管理的一樣僅繪制整個假想網格中的一個單元。

Pretty simple, just selection and drawing. Now at this point I’d like to digress into an older topic about aspect ratio. “Nash! again? ugghh” I know I know. But it’s cool! Look!

非常簡單，只需選擇和繪制即可。現在，我想談談一個關于長寬比的老話題。 “納什！再次？ ”我知道我知道。但這很酷！看！

If I change the values of dWidth or dHeight or both of them, look at how the image stretches and squashes.

如果更改dWidth或dHeight或兩者的值，請查看圖像如何拉伸和壓縮。

... ctx.drawImage( // Image mario, // ---- Selection ---- 0, // sx MARIO_HEIGHT * 2, // sy MARIO_WIDTH, // sWidth MARIO_HEIGHT, // sHeight // ---- Drawing ---- 0, // dx 0, // dy MARIO_WIDTH * 2, // dWidth MARIO_HEIGHT * 1.5 // dHeight ); ...

Hah! See! That’s why I was advising you to maintain the aspect ratio and that the values of selection and drawing have no real interconnection.

哈哈！看到！這就是為什么我建議您保持長寬比，并且選擇和繪圖的值之間沒有真正的相互聯系的原因。

Okay, back to what we were doing.

好的，回到我們正在做的事情。

So now we have Mario in the canvas, small and little. We need to animate it, or in other words show different frames at the same location in succession and make the illusion of movement happen. Was I too specific? Heck yeah!

所以現在我們在畫布上放了Mario，大小不一。我們需要對其進行動畫處理，換句話說就是要在同一位置連續顯示不同的幀，并使運動的幻象發生。我太具體了嗎？哎呀！

We can do that by selecting the grid cells we want to draw in succession. We just need to change the value of sx by the multiples of MARIO_WIDTH.

我們可以通過選擇要連續繪制的網格單元來實現。我們只需要將sx的值更改為MARIO_WIDTH的倍數MARIO_WIDTH 。

Now doing this will require the use of requestAnimationFrame and I have been explaining that in a streak in this article and this article.

現在，這樣做將需要使用的requestAnimationFrame和我一直在解釋，在條紋在這個文章，這個文章。

As a small challenge why don’t you go ahead and try accomplishing this on your own? In any case, you can check out this Codepen where I have Mario running like this. The pen has enough comments to help you understand the tiny bit of high school math that’s being used to make the animation happen.

作為一個小挑戰，您為什么不繼續嘗試自己完成此任務？無論如何，您都可以在此Codepen中查看我讓Mario運行的位置。筆上有足夠的注釋，可以幫助您了解用于制作動畫的一小部分高中數學。

Cute little thing!

可愛的小東西！

And with that, we’re done with a very comprehensive explanation of drawImage. Hope you enjoyed.

drawImage ，我們對drawImage進行了非常全面的解釋。希望你喜歡。

If you have made it this far, how about you shoot me some feedback or #goodvibes on Twitter?

如果到目前為止，您如何在Twitter上給我一些反饋或#goodvibes？

This article was originally published on www.nashvail.me.

本文最初發布在www.nashvail.me上。

Did I tell you about my new website? And did I tell you it has a Newsletter too? I’d love if you subscribed so I can notify you each time I publish something new or put something new for sale in my shop. I’ll continue publishing articles on Medium but there’ll be a two-week gap between when it first goes up on my site and when it shows up here.

我有沒有告訴你我的新網站？我也告訴過你它也有新聞通訊嗎？如果您訂閱了我會很高興的，這樣每當我出版新東西或在商店出售新東西時我都可以通知你。我將繼續在Medium上發布文章，但是從它第一次出現在我的網站到它出現在這里之間，將有兩個星期的間隔。

Thank you so much for reading and thank you so much for your support. Have a good one! :)

非常感謝您的閱讀，也非常感謝您的支持。祝你有個好的一天！ :)

翻譯自: https://www.freecodecamp.org/news/how-displaying-an-image-on-html5-canvas-works-13e3f6a6c4bd/