• CanvasContext.drawImage
  • 方法參數(shù)
  • 示例
    • 圖片示例
    • 代碼示例 1
    • 代碼示例 2：把用戶正方形圖片繪制成圓形

CanvasContext.drawImage

使用順序：drawImage(imageResource, dx, dy, dWidth, dHeight, sx, sy, sWidth, sHeight)

公司主營業(yè)務(wù)：成都網(wǎng)站設(shè)計、做網(wǎng)站、成都外貿(mào)網(wǎng)站建設(shè)公司、移動網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。創(chuàng)新互聯(lián)是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。創(chuàng)新互聯(lián)推出蛟河免費做網(wǎng)站回饋大家。

解釋：繪制圖像到畫布。
Web 態(tài)說明： 由于 Web 態(tài)遵循瀏覽器對 W3C 標(biāo)準的實現(xiàn)程度，因此使用此 API 時如果只傳入 imageResource、dx 和 dy 三個參數(shù)，就會在畫布指定位置繪制原圖。Web 態(tài)最終效果會跟 iOS 端小程序保持一致，與 Android 端小程序有差異，建議開發(fā)者按照參數(shù)說明中所有參數(shù)必填的方式來使用此 API。

方法參數(shù)

參數(shù)名	屬性	必填	默認值	說明
imageResource	String	是		所要繪制的圖片資源（外聯(lián)需要使用 https）view
dx	Number	是		圖像的左上角在目標(biāo) canvas 上 X 軸的位置
dy	Number	是		圖像的左上角在目標(biāo) canvas 上 Y 軸的位置
dWidth	Number	是		在目標(biāo)畫布上繪制圖像的寬度，允許對繪制的圖像進行縮放
dHeight	Number	是		在目標(biāo)畫布上繪制圖像的高度，允許對繪制的圖像進行縮放
sx	Number	是		源圖像的矩形選擇框的左上角 X 坐標(biāo)
sy	Number	是		源圖像的矩形選擇框的左上角 Y 坐標(biāo)
sWidth	Number	是		源圖像的矩形選擇框的寬度
sHeight	Number	是		源圖像的矩形選擇框的高度

示例

掃碼體驗

代碼示例

請使用百度APP掃碼

圖片示例

代碼示例 1

在開發(fā)者工具中打開

在開發(fā)者工具中打開

在 WEB IDE 中打開

• SWAN
• JS

代碼示例 2：把用戶正方形圖片繪制成圓形

在開發(fā)者工具中打開

在開發(fā)者工具中打開

在 WEB IDE 中打開

• JS

 
 
 

  
  
  
Page({
  
  
  
 onLoad() {
  
  
  
 const context = swan.createCanvasContext('myCanvas')
  
  
  
 context.beginPath();
  
  
  
 context.arc(110, 60, 30, 0, 2 * Math.PI);
  
  
  
 context.clip();
  
  
  
 context.drawImage('/image/faceDetect.png', 80,30,60,60); // 推進去圖片，這里注意頭像坐標(biāo)要在圓形區(qū)域內(nèi)
  
  
  
 context.draw();
  
  
  
 }
  
  
  
})
 
 
 

當(dāng)前名稱：創(chuàng)新互聯(lián)百度小程序教程：CanvasContext.drawImage
網(wǎng)站URL：http://www.5511xx.com/article/codpisd.html