• CanvasContext.drawImage
  • 方法参数
  • 示例
    • 图片示例
    • 代码示例 1
    • 代码示例 2：把用户正方形图片绘制成圆形

CanvasContext.drawImage

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

公司主营业务：成都网站设计、做网站、成都外贸网站建设公司、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联推出蛟河免费做网站回馈大家。

解释：绘制图像到画布。
Web 态说明： 由于 Web 态遵循浏览器对 W3C 标准的实现程度，因此使用此 API 时如果只传入 imageResource、dx 和 dy 三个参数，就会在画布指定位置绘制原图。Web 态最终效果会跟 iOS 端小程序保持一致，与 Android 端小程序有差异，建议开发者按照参数说明中所有参数必填的方式来使用此 API。

方法参数

参数名	属性	必填	默认值	说明
imageResource	String	是		所要绘制的图片资源（外联需要使用 https）view
dx	Number	是		图像的左上角在目标 canvas 上 X 轴的位置
dy	Number	是		图像的左上角在目标 canvas 上 Y 轴的位置
dWidth	Number	是		在目标画布上绘制图像的宽度，允许对绘制的图像进行缩放
dHeight	Number	是		在目标画布上绘制图像的高度，允许对绘制的图像进行缩放
sx	Number	是		源图像的矩形选择框的左上角 X 坐标
sy	Number	是		源图像的矩形选择框的左上角 Y 坐标
sWidth	Number	是		源图像的矩形选择框的宽度
sHeight	Number	是		源图像的矩形选择框的高度

示例

扫码体验

代码示例

请使用百度APP扫码

图片示例

代码示例 1

在开发者工具中打开

在开发者工具中打开

在 WEB IDE 中打开

• SWAN
• JS

代码示例 2：把用户正方形图片绘制成圆形

在开发者工具中打开

在开发者工具中打开

在 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); // 推进去图片，这里注意头像坐标要在圆形区域内
  
  
  
 context.draw();
  
  
  
 }
  
  
  
})
 
 
 

分享题目：创新互联百度小程序教程：CanvasContext.drawImage
分享地址：http://cdbrznjsb.com/article/codpisd.html