1. 程式人生 > >canvas畫好幾張圖片時,疊層關係的問題

canvas畫好幾張圖片時,疊層關係的問題

我們知道canvas畫好幾張圖片時,按我們的思維應該是先畫的在下面,後畫的在最上面,可是事實不是這樣的,細心的人會發現,疊層關係是隨機的。

為什麼呢?

這樣想,我們畫圖片時是不是有這段程式碼

img.onload=function(){
			ctx.drawImage(img,x,y);   	
		}
其實就是這段程式碼的問題,我們先分析一下這段程式碼,其意思是圖片載入完成之後再把它畫到我們的畫布上

好幾張圖片時,由於圖片的載入的時間不一樣,先載入完的先畫,後加載完的後畫,所以就會形成圖片在畫布上顯示的疊層順序和我們實際程式碼畫的順序由不一樣,

如果要想按照我們想要的疊層順序畫在畫布上,那麼解決辦法就是加延時器,最下面的不用加延時器,按照順序最上面的,延時器的延時時間越長。

特別申明,本人在近期會寫一個關於canvas的全部教程,會分為若干期,如有需要的實時關注!

相關推薦

canvas好幾圖片關係的問題

我們知道canvas畫好幾張圖片時,按我們的思維應該是先畫的在下面,後畫的在最上面,可是事實不是這樣的,細心的人會發現,疊層關係是隨機的。 為什麼呢? 這樣想,我們畫圖片時是不是有這段程式碼 img.

關於php上傳多圖片選擇圖片後就可以預覽的問題

這幾天一直在解決一個問題,上傳圖片時選擇成功後就能預覽。 需求:在點選上傳圖示的時候會在前面的input框中顯示出檔名,然後點選後面的檢視按鈕就可以預覽選擇的這張圖片了,要求不能重新整理頁面 1.一開始的時候打算用ajax上傳,後來發現多張圖片一同上傳的時候會出現問題,a

android 開發 View _12_ 用Canvas 繪製一圖片(部落格中演示用Canvas驗證碼圖片

package net.yt.yuncare.widgets; import android.graphics.Bitmap; import android.graphics.Canvas; import android.graphics.Color; import and

canvas解決多圖片畫圖只有部分圖片顯示的解決辦法

程式碼不多,但是研究了好久 async function doIt(){ await img1Draw();//繪製第一張 await img2Draw();//繪製第二張

Js設定伺服器找不到圖片顯示一預設圖

 <img src="'+basePath + r['iconPath']+'"  onerror="setDefaultImg(this)" /> function setDefaultImg(e){     e.src = basePath+"imag

bootstrap-fileinput提交多圖片只獲取到一

fileinput$(document).on(‘ready‘, function() { $("#kv-explorer").fileinput({ ‘language‘: "zh", rtl: true, ‘uploadUrl‘: ‘#‘, show

Ueditor在上傳圖片服務器返回502 bad gateway的填坑記

ueditor 502 iconv故事發生在2017.10.26下午,環宇同學跟我反應說在測試青羊雙創項目的後臺管理,發現在編輯園區信息時,想要上傳一堆圖片,用編輯器嘗試上傳圖片時,卻報了“上傳失敗,請重試”的錯,類似下圖:納尼?我...... 多麽正常的編輯器,我本地跑的好好的,我趕緊去試了一下,果然報錯,

Ubuntu下使用POI將PPT轉為圖片出現亂碼的解決方法

問題背景:生產環境為Ubuntu 16.04.4,程式中有一個模組,需要通過POI,將PPT轉換為圖片格式。除錯時,發現轉換後的圖片中,中文無法正確顯示,全都是“口口口”這種。 問題原因:Ubuntu中缺少必要的字型 解決辦法:向Ubuntu中匯入所需的字型 具體操作:可以參考Ubunt

在網路上使用圖片應當注意什麼?

一圖勝千言,圖片一直是網站資訊、商業宣傳中吸引使用者的重要元素。自媒體時代,網路圖片的低創作門檻隨之帶來了越來越多的侵權問題。我們一般釋出在網站、公眾號或其他對外宣傳資料上的文章都會配有圖片,但是由於釋出的圖片比較多不可能都自主設計、自主拍攝,難免會通過各種渠道“盜圖”,這樣會大大增加我們侵

新版Glide載入圖片佔位符placeholder失效的解決方案

我使用的是當前最新的Glide4.8.0的版本,想要設定在載入圖片過程中顯示預設圖片的功能,網上查到的設定placeholder,但實際發現這個屬性爆紅無法使用。 解決方案: Glide .with(this) .load(PHOTO_URL) .apply(new Request

pandas.DataFrame.plot一個座標系圖片

注意到使用pandas.DataFrame.plot作圖會返回一個形如 <pandas.plotting._core.FramePlotMethods object at 0x000001DB45718518> 的物件。 pandas.DataFrame.plot??,呼叫

LaTeX插入圖片圖總是置頂的解決辦法

問題 若想在LaTeX文件的指定位置插入一張圖片,一般使用如下程式碼: \usepackage{graphix} \begin{figure} \centering \includegraphics[height=10cm]{image

微信小遊戲canvas布拖動圖片

新手學習,作為筆記。還請高手多多指點,謝謝。 var canvas = wx.createCanvas() var context = canvas.getContext('2d') var bgm = wx.createImage() var hero = wx.crea

【轉】MATLAB 怎樣將100圖片拼接在10*10的一大圖片其中這一百的第一是另一個資料夾下的後99也分別是別的資料夾下的

List item https:// 如何用matlab生成這樣一幅圖片呢? 在網上找了很多資料,最終也麼有找到合適的程式碼。然後自己編了個小程式。如下: close all 

Web前端前沿技術 2 ____酷炫的3D特效 滑鼠進入圖片顯示文字

先看效果圖 主要程式碼如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>3D特效</title> <sty

使用ImageLoader載入網路圖片如何獲取載入進度如何設定進度條

使用ImageLoader載入網路圖片的時候,我們有可能會需要顯示一個進度條,這個其實非常容易實現,只需要呼叫這個方法進行設定即可: 注意:首先需要在佈局檔案中新增一個進度條,然後給這個進度條設定進度

vue上傳圖片console.log()圖片資訊遇到的坑

用vue開發專案時,有個上傳專案的功能 <input @change="uploadImages($event)" type="file" accept="image/jpeg,image/x-png,image/gif" id="" value="" />

java web上傳圖片顯示圖片

js指令碼<script>    function setImagePreview() {        var docObj = document.getElementById("doc");        var imgObjPreview = documen

上傳圖片在頁面進行預覽

前端頁面: <div class="container"> <form class="form-horizontal" enctype="multipart/for