小程序中canvas的drawImage方法參數(shù)使用詳解
更新時間：2019年07月04日 10:12:26 作者：小時光
這篇文章主要介紹了小程序中canvas的drawImage方法參數(shù)使用詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
最近在開發(fā)小程序，海報生成的過程中，要在carvas中不斷去添加圖片，對小程序的drawImage參數(shù)不是很明確，這次解惑。
示例代碼
有三個版本的寫法：
drawImage(imageResource, dx, dy)
drawImage(imageResource, dx, dy, dWidth, dHeight)
drawImage(imageResource, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight) 從 1.9.0 起支持
const ctx = wx.createCanvasContext('myCanvas')
wx.chooseImage({
success: function(res){
ctx.drawImage(res.tempFilePaths[0], 0, 0, 150, 100)
ctx.draw()
}
})
這個方法跟原生canvas的一樣，具體如下
HTML5中引入新的元素canvas，其drawImage 方法允許在 canvas 中插入其他圖像( img 和 canvas 元素) 。drawImage函數(shù)有三種函數(shù)原型：
drawImage(image, dx, dy)
drawImage(image, dx, dy, dw, dh)
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
第一個參數(shù)image是所要繪制的圖片資源
作為參數(shù)。dx和dy是image在canvas中定位的坐標(biāo)值；dw和dh是image在canvas中即將繪制區(qū)域（相對dx和dy坐標(biāo)的偏移量）的寬度和高度值；sx和sy是image所要繪制的起始位置，sw和sh是image所要繪制區(qū)域（相對image的sx和sy坐標(biāo)的偏移量）的寬度和高度值。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript?中的數(shù)據(jù)類型Number
這篇文章主要介紹了JavaScript?中的數(shù)據(jù)類型Number，Number?類型使用?IEEE?754?格式表示整數(shù)和浮點值，下文相關(guān)詳細(xì)資料介紹，需要的小伙伴可以參考一下2022-04-04
JavaScript-定時器0~9抽獎系統(tǒng)詳解（代碼）
這篇文章主要介紹了 JavaScript-定時器0~9抽獎系統(tǒng)，通過代碼實例說明函數(shù)調(diào)用的整體操作，具體步驟大家可查看下文的詳細(xì)講解，感興趣的小伙伴們可以參考一下。2017-08-08
javascript基礎(chǔ)進(jìn)階_深入剖析執(zhí)行環(huán)境及作用域鏈
下面小編就為大家?guī)硪黄猨avascript基礎(chǔ)進(jìn)階_深入剖析執(zhí)行環(huán)境及作用域鏈。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
再談JavaScript異步編程，簡單描述了幾種JavaScript異步編程模式，感興趣的小伙伴們可以參考一下2016-01-01
這篇文章主要介紹了php 修改密碼實現(xiàn)代碼的相關(guān)資料,需要的朋友可以參考下2017-05-05
這篇文章主要為大家詳細(xì)介紹了Auto.js自動收取自己和好友螞蟻森林能量腳本，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-06-06
這篇文章主要介紹了axios 處理 302 狀態(tài)碼的解決方法,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-04-04
一文詳解如何在uniapp中優(yōu)雅地使用WebView
最近工作中遇到webview,對于我這個剛接觸前端的小白來說真的不懂啥意思,下面這篇文章主要給大家介紹了關(guān)于如何在uniapp中優(yōu)雅地使用WebView的相關(guān)資料,需要的朋友可以參考下2023-01-01
看到一篇博客說土豆網(wǎng)的圖片是延遲加載的。原理是這樣：頁面可見區(qū)域以下的圖片先不加載，等到用戶向下滾動到圖片位置時，再進(jìn)行加載。這樣做的好處是當(dāng)頁面有好幾屏內(nèi)容時，這樣我們就可以只加載用戶需要看的圖片，減少服務(wù)器向用戶瀏覽器發(fā)送圖片文件所產(chǎn)生的負(fù)荷。2015-08-08
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)輪播圖特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-04-04