小程序中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 相关文章推荐
JQuery学习笔记 nt-child的使用
Jan 17 Javascript
基于jQuery的简单的列表导航菜单
Mar 02 Javascript
基于jquery的动态创建表格的插件
Apr 05 Javascript
javascript遇到html5的一些表单属性
Jul 05 Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
Jan 18 Javascript
js中实现字符串和数组的相互转化详解
Jan 24 Javascript
js本地图片预览实现代码
Oct 09 Javascript
JavaScript实现弹窗效果代码分析
Mar 09 Javascript
深入学习 JavaScript中的函数调用
Mar 23 Javascript
js使用generator函数同步执行ajax任务
Sep 05 Javascript
js实现动态添加上传文件页面
Oct 22 Javascript
vue实现书本翻页动画效果实例详解
Apr 08 Vue.js
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
综合图片计数器
2006/10/09 PHP
Yii1.1中通过Sql查询进行的分页操作方法
2017/03/16 PHP
解决windows上php xdebug 无法调试的问题
2020/02/19 PHP
iis6+javascript Add an Extension File
2007/06/13 Javascript
JS 文件传参及处理技巧分析
2010/05/13 Javascript
对jQuery的事件绑定的一些思考(补充)
2013/04/20 Javascript
js的回调函数详解
2015/01/05 Javascript
js实现对table动态添加、删除和更新的方法
2015/02/10 Javascript
JavaScript实现简单的二级导航菜单实例
2015/04/15 Javascript
jquery实现的伪分页效果代码
2015/10/29 Javascript
js获取对象、数组的实际长度,元素实际个数的实现代码
2016/06/08 Javascript
百度搜索框智能提示案例jsonp
2016/11/28 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
2017/04/13 Javascript
js 简易版滚动条实例(适用于移动端H5开发)
2017/06/26 Javascript
详解Vue微信公众号开发踩坑全记录
2017/08/21 Javascript
Vue 多层组件嵌套二种实现方式(测试实例)
2017/09/08 Javascript
利用nginx + node在阿里云部署https的步骤详解
2017/12/19 Javascript
JavaScript中arguments和this对象用法分析
2018/08/08 Javascript
基于elementUI实现图片预览组件的示例代码
2019/03/31 Javascript
JS+DIV实现拖动效果
2020/02/11 Javascript
python flask实现分页效果
2017/06/27 Python
详解Python 模拟实现生产者消费者模式的实例
2017/08/10 Python
pyqt5简介及安装方法介绍
2018/01/31 Python
pycharm中成功运行图片的配置教程
2018/10/28 Python
Python实现将通信达.day文件读取为DataFrame
2018/12/22 Python
Python 正则表达式 re.match/re.search/re.sub的使用解析
2019/07/22 Python
Python实现企业微信机器人每天定时发消息实例
2020/02/25 Python
OpenCV实现机器人对物体进行移动跟随的方法实例
2020/11/09 Python
Python中Qslider控件实操详解
2021/02/20 Python
利用css3径向渐变做一张优惠券的示例
2018/03/22 HTML / CSS
html5 canvas 简单画板实现代码
2012/01/05 HTML / CSS
英国潮流网站:END.(全球免邮)
2017/01/16 全球购物
意大利领先的线上奢侈品销售电商:Eleonora Bonucci
2017/10/17 全球购物
俄罗斯花园种植材料批发和零售网上商店:Беккер
2019/07/22 全球购物
2015年六一儿童节活动方案
2015/05/05 职场文书
学校趣味运动会开幕词
2016/03/04 职场文书