小程序中canvas的drawImage方法參數(shù)使用詳解
更新時(shí)間：2019年07月04日 10:12:26 作者：小時(shí)光
這篇文章主要介紹了小程序中canvas的drawImage方法參數(shù)使用詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
最近在開發(fā)小程序，海報(bào)生成的過程中，要在carvas中不斷去添加圖片，對(duì)小程序的drawImage參數(shù)不是很明確，這次解惑。
示例代碼
有三個(gè)版本的寫法：
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()
}
})
這個(gè)方法跟原生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)
第一個(gè)參數(shù)image是所要繪制的圖片資源
作為參數(shù)。dx和dy是image在canvas中定位的坐標(biāo)值；dw和dh是image在canvas中即將繪制區(qū)域（相對(duì)dx和dy坐標(biāo)的偏移量）的寬度和高度值；sx和sy是image所要繪制的起始位置，sw和sh是image所要繪制區(qū)域（相對(duì)image的sx和sy坐標(biāo)的偏移量）的寬度和高度值。
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
innerHTML innerText textContent使用區(qū)別示例詳解
這篇文章主要為大家介紹了innerHTML innerText textContent使用區(qū)別示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
這篇文章主要介紹了Webpack的dll功能使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06
本篇文章主要介紹了js實(shí)現(xiàn)截圖功能的代碼示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-02-02
JS 組件系列之BootstrapTable的treegrid功能
這篇文章主要介紹了JS 組件系列之BootstrapTable的treegrid功能,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-06-06
二級(jí)域名或跨域共享Cookies的實(shí)現(xiàn)方法
適用于Asp。 在主域名設(shè)置的Cookie，在各子域名共用；適用于博客等提供二級(jí)域名。這個(gè)問題，以網(wǎng)上有眾多帖子，可惜都沒有完整解決。2008-08-08
這篇文章主要為大家詳細(xì)介紹了js仿微信語音播放的實(shí)現(xiàn)思路，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
JS獲取當(dāng)前時(shí)間的實(shí)例代碼(昨天、今天、明天)
這篇文章主要介紹了JS獲取當(dāng)前時(shí)間的實(shí)例代碼(昨天、今天、明天) ,需要的朋友可以參考下2018-11-11
Javascript 中 null、NaN和undefined的區(qū)別總結(jié)
js中的數(shù)據(jù)類型有undefined,boolean,number,string,object等5種，前4種為原始類型，第5種為引用類型，接下來與大家分享下它們之間的區(qū)別2013-04-04
這篇文章主要為大家詳細(xì)介紹了微信小程序版翻牌小游戲，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-01-01
yepnope.js是一個(gè)能夠根據(jù)輸入條件來選擇性異步加載資源文件的js腳本，可以在頁面上僅加載用戶需要的js/css。2011-09-09