小程序中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 相关文章推荐
用JavaScript玩转游戏物理(一)运动学模拟与粒子系统
Jun 19 Javascript
自己动手制作jquery插件之自动添加删除行的实现
Oct 13 Javascript
jQuery点击弹出下拉菜单的小例子
Aug 01 Javascript
javascript获取文档坐标和视口坐标
May 26 Javascript
jQuery实现监控页面所有ajax请求的方法
Dec 10 Javascript
JavaScript获取IP获取的是IPV6 如何校验
Jun 12 Javascript
浅谈Vue 初始化性能优化
Aug 31 Javascript
Vue.js获取被选择的option的value和text值方法
Aug 24 Javascript
vue init webpack 建vue项目报错的解决方法
Sep 29 Javascript
vue 实现小程序或商品秒杀倒计时
Apr 14 Javascript
node静态服务器实现静态读取文件或文件夹
Dec 03 Javascript
es6函数中的作用域实例分析
Apr 18 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中目录,文件操作详谈
2007/03/19 PHP
php cookie的操作实现代码(登录)
2010/12/29 PHP
Yii中的relations数据关联查询及统计功能用法详解
2016/07/14 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
Yii框架where查询用法实例分析
2019/10/22 PHP
javascript flash下fromCharCode和charCodeAt方法使用说明
2008/01/12 Javascript
JavaScript设置获取和设置属性的方法
2015/03/04 Javascript
浅谈javascript语法和定时函数
2015/05/03 Javascript
详解AngularJS 模态对话框
2016/04/07 Javascript
Bootstrap每天必学之附加导航(Affix)插件
2016/04/25 Javascript
jQuery实现的tab标签切换效果示例
2016/09/05 Javascript
ajax实现动态下拉框示例
2017/01/10 Javascript
xmlplus组件设计系列之选项卡(Tabbar)(5)
2017/05/03 Javascript
纯js实现动态时间显示
2020/09/07 Javascript
Angular2仿照微信UI实现9张图片上传和预览的示例代码
2017/10/19 Javascript
Node.js笔记之process模块解读
2018/05/31 Javascript
Vue文件配置全局变量的实例
2018/09/06 Javascript
koa源码中promise的解读
2018/11/13 Javascript
Vuejs学习笔记之使用指令v-model完成表单的数据双向绑定
2019/04/29 Javascript
vue 地图可视化 maptalks 篇实例代码详解
2019/05/21 Javascript
开源一个微信小程序仪表盘组件过程解析
2019/07/30 Javascript
原生js滑动轮播封装
2020/07/31 Javascript
利用JavaScript为句子加标题的3种方法示例
2021/01/05 Javascript
python自然语言编码转换模块codecs介绍
2015/04/08 Python
pandas数据框,统计某列数据对应的个数方法
2018/04/11 Python
Python操作Oracle数据库的简单方法和封装类实例
2018/05/07 Python
Python模块、包(Package)概念与用法分析
2019/05/31 Python
利用Python将多张图片合成视频的实现
2020/11/23 Python
Flask中jinja2的继承实现方法及实例
2021/03/03 Python
纯CSS实现聊天框小尖角、气泡效果
2014/04/04 HTML / CSS
HTML5 本地存储之如果没有数据库究竟会怎样
2013/04/25 HTML / CSS
Linux的主要特性
2016/09/03 面试题
怎样自定义一个异常类
2016/09/27 面试题
小学生春游活动方案
2014/08/20 职场文书
学习党的群众路线教育实践活动心得体会范文
2014/11/03 职场文书
西游记读书笔记
2015/06/25 职场文书