最近在开发小程序,海报生成的过程中,要在carvas中不断去添加图片,对小程序的drawImage参数不是很明确,这次解惑。

示例代码

有三个版本的写法:

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函数有三种函数原型:

drawImage(image, dx, dy)

drawImage(image, dx, dy, dw, dh)

drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

第一个参数image是所要绘制的图片资源

作为参数。dx和dy是image在canvas中定位的坐标值;dw和dh是image在canvas中即将绘制区域(相对dx和dy坐标的偏移量)的宽度和高度值;sx和sy是image所要绘制的起始位置,sw和sh是image所要绘制区域(相对image的sx和sy坐标的偏移量)的宽度和高度值。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

java drawimage 参数_小程序中canvas的drawImage方法参数使用详解相关推荐

  1. html5 drawimage参数,小程序中canvas的drawImage方法参数详解

    最近在开发小程序,海报生成的过程中,要在carvas中不断去添加图片,对小程序的drawImage参数不是很明确,这次解惑. 示例代码 有三个版本的写法: drawImage(imageResourc ...

  2. 微信小程序setinterval_微信小程序中setInterval的使用方法

    微信小程序中setinterval的使用方法 看了下小程序的画布功能,简单的使用了一下,用蹩脚的逻辑做了个 "弹啊弹,弹走鱼尾纹的小球",一起来看下吧.过程不重要主要是画布的使用哦 ...

  3. wxss 点击样式_微信小程序点击控件修改样式实例详解

    微信小程序点击控件修改样式实例详解 现在要在微信小程序中实现点击控件修改样式,如下: 微信小程序中不支持直接操作dom,要实现这种效果,我们需要通过设置data,然后利用数据和界面的双向绑定来实现它. ...

  4. 微信小程序中下载app的方法

    微信小程序中下载app的方法 因为微信小程序本身是不推荐引流到外部的,所以正规的方法其实都是被禁止掉的,大致方向是打开内部浏览器,进入应用宝下载页面(如果app接入应用宝),或者是通过右上角的在系统浏 ...

  5. 微信小程序云开发入门(二)-数据库详解

    微信小程序云开发入门(二)-数据库详解 接上一篇:微信小程序云开发入门(一) 摘要: 因为微信小程序云数据库有点类似传统的关系型数据库,但又有所不同.所以刚入手的时候会有点困扰,经过一段时间的学习和摸 ...

  6. php微信小程序物流进度推送,微信小程序 消息推送php服务器验证实例详解

    微信小程序 消息推送php服务器验证实例详解 设置页面("设置">>"开发设置"): 1.设置服务器域名 注意http和https协议的不同. 2. ...

  7. python frozenset_Python中set与frozenset方法和区别详解

    set(可变集合)与frozenset(不可变集合)的区别: set无序排序且不重复,是可变的,有add(),remove()等方法.既然是可变的,所以它不存在哈希值.基本功能包括关系测试和消除重复元 ...

  8. mysql去重函数的使用方法_MySQL中使用去重distinct方法的示例详解

    一 distinct 含义:distinct用来查询不重复记录的条数,即distinct来返回不重复字段的条数(count(distinct id)),其原因是distinct只能返回他的目标字段,而 ...

  9. 公众号获取用户手机号_小程序中如何获取微信用户绑定的手机号

    小程序官方文档中介绍: 获取微信用户绑定的手机号,需先调用wx.login接口. 因为需要用户主动触发才能发起获取手机号接口,所以该功能不由 API 来调用,需用 button 组件的点击来触发. 注 ...

最新文章

  1. python 管道 非阻塞_python – 非阻塞Scrapy管道到数据库
  2. python3.7安装numpy pandas失败的处理方案
  3. 马斯克“口无遮拦”发推特又挨批,被指无视法院命令
  4. 【问链-Eos公开课】第5课 组建单机多节点EOS网络
  5. 怎么安装python_零基础入门必看篇:浅析python,PyCharm,Anaconda三者之间关系
  6. IP-guard应用攻略:如何防范外置网卡泄密
  7. CSS3 Media Query 响应式媒体查询
  8. python可以做科学计算吗_python能做什么科学计算
  9. jsp中接收java的返回值_jsp中request的一些方法返回值
  10. Happens before
  11. select标签multiple属性的使用方法
  12. 按头安利 好看又实用的布纹 布料贴图素材看这里
  13. .NET西安社区「拥抱开源,又见 .NET:壹周年Party」活动简报
  14. C#顺时针逆时针旋转图片
  15. 第1章 PyTorch和神经网:1.1 PyTorch和神经网络
  16. 双六(挑战程序设计竞赛)
  17. 拆弹专家【爆改车间主任】学习笔记(2)小结
  18. 建筑师妹岛和世为日本西武设计新型旗舰“球形车头”列车
  19. 计算机图形学 绘制正四面体
  20. 终身免费!微软数据恢复工具,界面版体验

热门文章

  1. c#双缓冲绘图(不闪烁的几种方法)
  2. ios15 LJScrollPageVC第三方框架的使用
  3. msf aux模块使用
  4. Android调用系统相机和相册(更换微信头像)
  5. flask mysql环境配置_Flask干货:访问数据库——Flask-SQLAlchemy初始化
  6. 2018年python薪资_2018年国内就业薪资高的7大编程语言排行
  7. goland go test_七天用Go写个docker(第一天)
  8. No relevant classes found. No output generated、metaObject连接错误
  9. mysql_fetch_array 失败_无语的出错,mysql_fetch_array()
  10. input 中的autoComplete属性