小程序中canvas的drawImage方法参数使用详解


Posted in Javascript onJuly 04, 2019

最近在开发小程序,海报生成的过程中,要在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的drawImage方法参数使用详解

这个方法跟原生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坐标的偏移量)的宽度和高度值。

小程序中canvas的drawImage方法参数使用详解

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

Javascript 相关文章推荐
Mozilla中显示textarea中选择的文字
Sep 07 Javascript
js确定对象类型方法
Mar 30 Javascript
node.js中的fs.chmod方法使用说明
Dec 18 Javascript
javascript性能优化之DOM交互操作实例分析
Dec 12 Javascript
jquery ztree实现模糊搜索功能
Feb 25 Javascript
javascript实现瀑布流动态加载图片原理
Aug 12 Javascript
深入探讨Vue.js组件和组件通信
Sep 12 Javascript
jQuery插件ajaxFileUpload使用实例解析
Oct 19 Javascript
微信小程序 定义全局数据、函数复用、模版等详细介绍
Oct 27 Javascript
微信小程序之页面拦截器的示例代码
Sep 07 Javascript
iconfont的三种使用方式详解
Aug 05 Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
Sep 25 Javascript
vue如何限制只能输入正负数及小数
Jul 04 #Javascript
Vue项目中ESlint规范示例代码
Jul 04 #Javascript
你或许不知道的一些npm实用技巧
Jul 04 #Javascript
中高级前端必须了解的JS中的内存管理(推荐)
Jul 04 #Javascript
angular6开发steps步骤条组件
Jul 04 #Javascript
13 个npm 快速开发技巧(推荐)
Jul 04 #Javascript
微信小程序在线客服自动回复功能(基于node)
Jul 03 #Javascript
You might like
PHP连接SQLServer2005的实现方法(附ntwdblib.dll下载)
2012/07/02 PHP
PHP实现PDO的mysql数据库操作类
2014/12/12 PHP
PIGCMS 如何关闭聊天机器人
2015/02/12 PHP
php正则表达式学习笔记
2015/11/13 PHP
round robin权重轮循算法php实现代码
2016/05/28 PHP
使用PHP开发留言板功能
2019/11/19 PHP
jQuery+jqmodal弹出窗口实现代码分明
2010/06/14 Javascript
JavaScript及jquey实现多个数组的合并操作
2014/09/06 Javascript
javaScript中Math()函数注意事项
2015/06/18 Javascript
javascript 闭包详解
2015/07/02 Javascript
javascript判断复选框是否选中的方法
2015/10/16 Javascript
简单对比分析JavaScript中的apply,call与this的使用
2015/12/04 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
2016/08/24 Javascript
vue双向数据绑定原理探究(附demo)
2017/01/17 Javascript
利用angularjs1.4制作的简易滑动门效果
2017/02/28 Javascript
bootstrap table插件的分页与checkbox使用详解
2017/07/23 Javascript
JavaScript实现无刷新上传预览图片功能
2017/08/02 Javascript
vue中render函数的使用详解
2018/10/12 Javascript
[00:32]DOTA2上海特级锦标赛 Ehome战队宣传片
2016/03/03 DOTA
在Python中调用ggplot的三种方法
2015/04/08 Python
Python中threading模块join函数用法实例分析
2015/06/04 Python
python根据京东商品url获取产品价格
2015/08/09 Python
Windows上配置Emacs来开发Python及用Python扩展Emacs
2015/11/20 Python
python下实现二叉堆以及堆排序的示例
2017/09/29 Python
解决matplotlib库show()方法不显示图片的问题
2018/05/24 Python
用python爬虫批量下载pdf的实现
2020/12/01 Python
什么是网络协议
2016/04/07 面试题
高级文秘工作总结的自我评价
2013/09/28 职场文书
餐饮部总监岗位职责范文
2014/02/13 职场文书
企业总经理助理岗位职责
2014/09/12 职场文书
公司股东出资证明书
2014/11/01 职场文书
学子宴致辞大全
2015/07/27 职场文书
2016公务员年度考核评语
2015/12/01 职场文书
关于flex 上下文中自动 margin的问题(完整例子)
2021/05/20 HTML / CSS
【DOTA2】当街暴打?PSG LGD vs VG - DPC 2022 WINTER TOUR CN
2022/04/02 DOTA
Pandas 数据编码的十种方法
2022/04/20 Python