小程序中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/jQuery 表单美化插件小结
Feb 14 Javascript
javascript中关于break,continue的特殊用法与介绍
May 24 Javascript
window.event.keyCode兼容IE和Firefox实现js代码
May 30 Javascript
js 采用delete实现继承示例代码
May 20 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
Dec 24 Javascript
学习JavaScript设计模式之状态模式
Jan 08 Javascript
详细谈谈javascript的对象
Jul 31 Javascript
判断数组的最佳方法(推荐)
Oct 11 Javascript
bootstrap多种样式进度条展示
Dec 20 Javascript
vue params、query传参使用详解
Sep 12 Javascript
微信小程序实现留言板(Storage)
Nov 02 Javascript
通过JS深度判断两个对象字段相同
Jun 14 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
业余方法DIY电子管FM收音机
2021/03/02 无线电
php 生成饼图 三维饼图
2009/09/28 PHP
Yii Framework框架获取分类下面的所有子类方法
2014/06/20 PHP
destoon会员注册提示“数据校验失败(2)”解决方法
2014/06/21 PHP
DEDECMS首页调用图片集里的多张图片
2015/06/05 PHP
php常用数组函数实例小结
2016/12/29 PHP
学习YUI.Ext第七日-View&JSONView Part Two-一个画室网站的案例
2007/03/10 Javascript
Jquery 设置标题的自动翻转
2009/10/03 Javascript
ExtJS Ext.MessageBox.alert()弹出对话框详解
2010/04/02 Javascript
javascript date格式化示例
2013/09/25 Javascript
javascript创建数组之联合数组的使用方法示例
2013/12/26 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
2015/03/26 Javascript
JavaScript调用浏览器打印功能实例分析
2015/07/17 Javascript
初探JavaScript 面向对象(推荐)
2017/09/03 Javascript
利用jsonp与代理服务器方案解决跨域问题
2017/09/14 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
2017/09/20 jQuery
解决vue组件中使用v-for出现告警问题及v for指令介绍
2017/11/11 Javascript
浅谈Webpack 是如何加载模块的
2018/05/24 Javascript
原生JS实现的简单轮播图功能【适合新手】
2018/08/17 Javascript
Vue项目中最新用到的一些实用小技巧
2018/11/06 Javascript
Vue 实现从文件中获取文本信息的方法详解
2019/10/16 Javascript
[46:49]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.19
2020/12/24 DOTA
python实现从web抓取文档的方法
2014/09/26 Python
python pandas 对时间序列文件处理的实例
2018/06/22 Python
Python线程之定位与销毁的实现
2019/02/17 Python
如何在Cloud Studio上执行Python代码?
2019/08/09 Python
如何基于Python代码实现高精度免费OCR工具
2020/06/18 Python
python爬虫快速响应服务器的做法
2020/11/24 Python
Python实现疫情地图可视化
2021/02/05 Python
美国指甲油品牌:Deco Miami
2017/01/30 全球购物
澳大利亚最大的在线美发和美容零售商之一:My Hair Care & Beauty
2019/08/24 全球购物
应用化学专业本科生求职信
2013/09/29 职场文书
幼儿教师工作感言
2014/02/14 职场文书
教师求职信
2014/06/17 职场文书
2019年工作总结范文
2019/05/21 职场文书
幼儿园教师辞职信
2019/06/21 职场文书