小程序中canvas的drawImage方法参数使用详解
更新时间：2019年07月04日 10:12:26 作者：小时光
这篇文章主要介绍了小程序中canvas的drawImage方法参数使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
最近在开发小程序，海报生成的过程中，要在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的一样，具体如下
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坐标的偏移量）的宽度和高度值。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
innerHTML innerText textContent使用区别示例详解
这篇文章主要为大家介绍了innerHTML innerText textContent使用区别示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
这篇文章主要介绍了Webpack的dll功能使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
本篇文章主要介绍了js实现截图功能的代码示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
JS 组件系列之BootstrapTable的treegrid功能
这篇文章主要介绍了JS 组件系列之BootstrapTable的treegrid功能,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-06-06
适用于Asp。 在主域名设置的Cookie，在各子域名共用；适用于博客等提供二级域名。这个问题，以网上有众多帖子，可惜都没有完整解决。2008-08-08
这篇文章主要为大家详细介绍了js仿微信语音播放的实现思路，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要介绍了JS获取当前时间的实例代码(昨天、今天、明天) ,需要的朋友可以参考下2018-11-11
Javascript 中 null、NaN和undefined的区别总结
js中的数据类型有undefined,boolean,number,string,object等5种，前4种为原始类型，第5种为引用类型，接下来与大家分享下它们之间的区别2013-04-04
这篇文章主要为大家详细介绍了微信小程序版翻牌小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-01-01
yepnope.js是一个能够根据输入条件来选择性异步加载资源文件的js脚本，可以在页面上仅加载用户需要的js/css。2011-09-09
最新评论