小程序中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 面向对象 继承
May 13 Javascript
TreeView 用法(有代码)(asp.net)
Jul 15 Javascript
使用jquery prev()方法找到同级的前一个元素
Jul 11 Javascript
使用jquery解析XML的方法
Sep 05 Javascript
SuperSlide标签切换、焦点图多种组合插件
Mar 14 Javascript
javascript实现画不相交的圆
Apr 07 Javascript
全面解析Bootstrap布局组件应用
Feb 22 Javascript
BootStrapTable服务器分页实例解析
Dec 20 Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
Jan 19 Javascript
Vue实现固定定位图标滑动隐藏效果
May 30 Javascript
vue路由守卫及路由守卫无限循环问题详析
Sep 05 Javascript
node.js使用http模块创建服务器和客户端完整示例
Feb 10 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获取Google AJAX Search API 数据的代码
2010/03/12 PHP
ThinkPHP提交表单时默认自动转义的解决方法
2014/11/25 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
客户端 使用XML DOM加载json数据的方法
2010/09/28 Javascript
深入理解JavaScript系列(6) 强大的原型和原型链
2012/01/15 Javascript
使用jquery获取网页中图片高度的两种方法
2013/09/26 Javascript
JS实现遮罩层效果的简单实例
2013/11/12 Javascript
js获取select标签选中值的两种方式
2014/01/09 Javascript
js实现圆盘记速表
2015/08/03 Javascript
JavaScript制作淘宝星级评分效果的思路
2020/06/23 Javascript
JS 拼凑字符串的简单实例
2016/09/02 Javascript
让浏览器崩溃的12行JS代码(DoS攻击分析及防御)
2016/10/10 Javascript
Javascript实现图片懒加载插件的方法
2016/10/20 Javascript
JavaScript实现数组降维详解
2017/01/05 Javascript
微信小程序 滚动到某个位置添加class效果实现代码
2017/04/19 Javascript
AngularJS学习笔记之表单验证功能实例详解
2017/07/06 Javascript
Vue组件通信实践记录(推荐)
2017/08/15 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
2017/12/19 Javascript
JavaScript实现职责链模式概述
2018/01/25 Javascript
详解vuex的简单使用
2018/03/12 Javascript
JS如何监听div的resize事件详解
2020/12/03 Javascript
[03:31]DOTA2英雄基础教程 大地之灵
2013/12/17 DOTA
[54:10]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
python文件绝对路径写法介绍(windows)
2019/12/25 Python
Django框架之中间件MiddleWare的实现
2019/12/30 Python
Pytorch保存模型用于测试和用于继续训练的区别详解
2020/01/10 Python
PyTorch中Tensor的数据统计示例
2020/02/17 Python
详解torch.Tensor的4种乘法
2020/09/03 Python
极度干燥澳大利亚官方网站:Superdry澳大利亚
2019/03/28 全球购物
澳大利亚排名第一的露营和户外设备在线零售商:Outbax
2020/05/06 全球购物
学生处主任岗位职责
2013/12/01 职场文书
社区党建工作方案
2014/06/10 职场文书
公司员工活动策划方案
2014/08/20 职场文书
2015元旦文艺汇演主持稿(开场白+结束语)
2014/12/14 职场文书
同意报考公务员证明
2015/06/17 职场文书
windows server 2012安装FTP并配置被动模式指定开放端口
2022/06/10 Servers