• 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。

方法参数

示例

扫码体验

代码示例

请使用百度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://www.csdahua.cn/qtweb/news2/240452.html

网站建设、网络推广公司-快上网，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 快上网