您現在的位置是:電腦技術吧?>? 編程技術 ??>??draw,draw up??>??正文詳情

draw,draw up

齋琴心2019-11-05 09:51:19 人圍觀
簡介draw的過去分詞HTML5 Canvas動畫效果演示的主要思想是:首先準備一張有連續幀的圖片,然后使用HTML5 Canvas的繪制方法在不同的時間間隔繪制不同的幀,所以看起來draw發音

HTML5 Canvas動畫效果演示 主要思想: 首先要準備一張有連續幀的圖片,然后利用HTML5 Canvas的draw方法在不同的時間間隔繪制不同的幀,這樣看起來就像動畫在播放。

關鍵技術點: JavaScript 函數setTimeout()有兩個參數,第一個是參數可以傳遞一個JavaScript方法, 另外一個參數代表間隔時間,單位為毫秒數。

代碼示例: setTimeout( update, 1000/30); Canvas的API-drawImage()方法,需要指定全部9個參數: ctx.drawImage(myImage, offw, offh, width,height, x2, y2, width, height); 其中offw, offh是指源圖像的起始坐標點,width, height表示源圖像的寬與高,x2,y2表 示源圖像在目標Canvas上的起始坐標點。

一個22幀的大雁飛行圖片實現的效果:

源圖像:

程序代碼: 復制代碼代碼如下:!DOCTYPE html html head meta http-equiv=X-UA-Compatible content=chrome=IE8 meta http-equiv=Content-type content=text/html;charset=UTF-8 titleCanvas Mouse Event Demo/title link href=default.css rel=stylesheet / script var ctx = null; // global variable 2d context var started = false; var mText_canvas = null; var x = 0, y =0; var frame = 0; // 22 5*5 2 var imageReady = false; var myImage = null; var px = 300; var py = 300; var x2 = 300; var y2 = 0; window.onload = function() { var canvas = document.getElementById(animation_canvas); console.log(canvas.parentNode.clientWidth); canvas.width = canvas.parentNode.clientWidth; canvas.height = canvas.parentNode.clientHeight; if (!canvas.getContext) { console.log(Canvas not supported. Please install a HTML5 compatible browser.); return; } // get 2D context of canvas and draw rectangel ctx = canvas.getContext(2d); ctx.fillStyle=black; ctx.fillRect(0, 0, canvas.width, canvas.height); myImage = document.createElement('img'); myImage.src = ../robin.png; myImage.onload = loaded(); } function loaded() { imageReady = true; setTimeout( update, 1000/30); } function redraw() { ctx.clearRect(0, 0, 460, 460) ctx.fillStyle=black; ctx.fillRect(0, 0, 460, 460); // find the index of frames in image var height = myImage.naturalHeight/5; var width = myImage.naturalWidth/5; var row = Math.floor(frame / 5); var col = frame - row * 5; var offw = col * width; var offh = row * height; // first robin px = px - 5; py = py - 5; if(px -50) { px = 300; } if(py -50) { py = 300; } //var rate = (frame 1) /22; //var rw = Math.floor(rate * width); //var rh = Math.floor(rate * height); ctx.drawImage(myImage, offw, offh, width, height, px, py, width, height); // second robin x2 = x2 - 5; y2 = y2 5; if(x2 -50) { x2 = 300; y2 = 0; } ctx.drawImage(myImage, offw, offh, width, height, x2, y2, width, height); } function update() { redraw(); frame ; if (frame = 22) frame = 0; setTimeout( update, 1000/30); } /script /head body h1HTML Canvas Animations Demo - By Gloomy Fish/h1 prePlay Animations/pre div id=my_painter canvas id=animation_canvas/canvas /div /body /html 發現上傳透明PNG格式有點問題,所以我上傳不透明的圖片。

可以用其它圖片替換,替換以后請修改最大幀數從22到你的實際幀數即可運行。

版權聲明:本文由 齋琴心 整理編輯。

原標題:draw in,draw on

轉載注明出處:http://www.dn9ww09s.icu/program/11136.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 應用程序錯誤怎么關閉,應用程序服務器錯誤怎么解決

    應用程序錯誤怎么關閉,應用程序服務器錯誤怎么解決 相關圖片應用程序初始化錯誤孩子們,當電腦出現應用程序錯誤時,你知道如何解決這個問題嗎?如果你不知道,沒關系,因為你有一個可愛的小編輯給我。今天,我將告訴你如何解決計算機應...

  • 標簽的定義,給自己定義一個標簽

    標簽的定義,給自己定義一個標簽 相關圖片A標簽利用導航標簽的定義和html5中新元素標簽nav的規定,對具有導航屬性的鏈接進行劃分,使代碼結構在語義上更加精確,對屏幕閱讀器等設備的支持更好。長期以來,我們習自定標簽...

  • 內存written怎么解決,內存不能為written怎么解決

    內存written怎么解決,內存不能為written怎么解決 相關圖片電腦該內存不能為written網友在運行游戲時遇到過一個窗口,提醒他們內存寫不出來,而網上給出的解決方案又繁瑣,不適合白人小用戶,最后選擇重新安裝系統解決這個內存無法寫入的...

  • 路由器連接路由器怎么設置,新路由器怎么設置

    路由器連接路由器怎么設置,新路由器怎么設置 相關圖片如何設置路由器密碼孩子們,當你在家里玩手機時,你是使用自己的移動通信還是無線網絡?如果你在家里使用wifi,你知道如何在家里設置wifi路由器嗎?我不知道。接下來,我將教你如...

  • debug卡 代碼,phpdebug代碼

    debug卡 代碼,phpdebug代碼 相關圖片debug跟蹤代碼執行了哪些指令*{Outline: 2px dot red} * * {Outline: 2px dot green} * * {Outline: 2px dot orangeclipse怎么debug調試...

  • eclipse下載安裝教程,eclipse安裝教程

    eclipse下載安裝教程,eclipse安裝教程 相關圖片eclipse32位安裝教程作為java開發的重要工具,eclipse在apes編程的計算機上是必不可少的。只有安裝正版才能編寫好代碼。很多人需要使用它。如何安裝eclipse許多喜歡編程怎么安裝eclipse軟件...

  • div居中代碼,怎么讓div居中

    div居中代碼,怎么讓div居中 相關圖片css div居中代碼如下:{/*display:table cell;text align:Center;*/vertical align:middle;}table{margcss如何讓div居中...

  • xlsx文件如何打開,xlsx文件怎么打開編輯

    xlsx文件如何打開,xlsx文件怎么打開編輯 相關圖片電腦xlsx文件怎么打開事實上,為什么會有后綴為xlsx和docx的文件那是因為如果你加上一個后綴,你就不需要用那么多的內存。那么,小編接下來要告訴你的是如何打開xlsx文件excel無法打...

  • 實現什么什么,萬一實現了

    實現什么什么,萬一實現了 相關圖片會實現的CSS的簡單性在于它易于學習css的困難在于找到更好的解決方案。在css的世界里,似乎沒有完美的東西。所以,現在介紹css絕對底部,但現在我已經看到這個方案更完一一實現...

  • 筆記本和投影儀如何連接,聯想筆記本連接投影儀

    筆記本和投影儀如何連接,聯想筆記本連接投影儀 相關圖片投影儀如何連接電腦使用親愛的,你們以前看到的都是電腦連接的投影儀。就像現在學校教室里的多媒體一樣,但你有沒有見過筆記本電腦和投影儀相連?今天,小編就來看看筆記本電...

熱評文章

  • excel 打印區域,excel如何打印選中區域

    excel 打印區域,excel如何打印選中區域 相關圖片excel打印虛線怎么調整在當今的工作場所,excel牢牢地占據著各個公司員工的電腦。當用戶使用excel制作漂亮的表格或簡單的數據記錄時,他們需要打印出來并與他人共享。如何在excelex...

  • 屬性拼音,屬性什么意思

    屬性拼音,屬性什么意思 相關圖片屬性的意思是什么所有HTML元素都可以設置accessKey屬性元素的accesskey屬性用于設置快捷鍵以激活元素或獲取元素的焦點。可以設置多個,間距為空,區分大小寫。函的意思和五行屬性...

  • 新電腦裝系統,新電腦怎么裝系統

    新電腦裝系統,新電腦怎么裝系統 相關圖片新買的電腦怎么裝系統我們都知道如何組裝電腦。有些用戶在組裝好計算機系統后,沒有系統就不能直接啟動計算機。如果安裝系統需要U盤,沒有系統的新計算機如何使用U盤安裝系統?...

  • 惠普筆記本系統還原,惠普電腦還原系統還原

    惠普筆記本系統還原,惠普電腦還原系統還原 相關圖片惠普win7系統還原惠普品牌的電腦有兩種:普通筆記本和商務筆記本。據說它的銷售量是世界第一,而且價格也比較實惠。你在用惠普筆記本嗎?如果筆記本電腦是惠普,用戶知道如何使...

  • 網頁兼容,怎么設置為兼容瀏覽器

    網頁兼容,怎么設置為兼容瀏覽器 相關圖片瀏覽器怎么調兼容ie8默認使用新的標準模式顯示引擎來顯示網頁如果網頁代碼沒有標準化,它可能會在ie8下顯示異常重寫網頁代碼使其標準化是一項繁重的工作,它需要很長的時間來慢...

  • 愛普生打印機不能打印,愛普生打印機打印不清晰

    愛普生打印機不能打印,愛普生打印機打印不清晰 相關圖片epson打印機無法打印怎么辦有用戶反映,愛普生pin打印機昨天可以正常使用,但今天突然出現故障。無法打印經過檢查,發現司機沒有問題幾個小時的麻煩之后,它沒有解決問題。沒關系...

  • 標簽的定義,給自己定義一個標簽

    標簽的定義,給自己定義一個標簽 相關圖片A標簽如果瀏覽器支持腳本,則不會在noscript元素中顯示文本。不識別腳本標記的瀏覽器將在頁面上顯示標記的內容要避免瀏覽器執行此操作,應在注釋標記中隱藏腳本。舊的瀏自定標簽...

  • 騰達路由器設置,騰達路由器設置密碼

    騰達路由器設置,騰達路由器設置密碼 相關圖片路由器怎么設置我們生活中經常需要使用路由器例如,玩手機、聊天、看視頻等等,但是我們如何設置路由器呢?今天,小編就為大家介紹如何搭建騰達路由器孩子們,請耐心地讀下去...

  • 標簽的定義,給自己定義一個標簽

    標簽的定義,給自己定義一個標簽 相關圖片A標簽節標記是HTML5中的新標記w3c定義為:section label定義文檔中的節。例如章節、頁眉、頁腳或文檔的其他部分節元素標簽用于表示公共文檔內容或應用程序自定標簽...

  • 可移動磁盤打不開怎么辦,可移動磁盤為什么打不開

    可移動磁盤打不開怎么辦,可移動磁盤為什么打不開 相關圖片磁盤打不開怎么辦現在很多人為了豐富自己的娛樂生活喜歡下載各種音樂和電影,所以電腦里的記憶會變得緊張。移動硬盤的出現幫助我們解決了這個問題,但也會有另一種麻煩。如果...

關注微信

变脸官网查询