js canvas drawimage,,小程序中canvas的drawImage方法参数使用详解

本文主要介绍了小程序中canvas的drawImage方法的参数的详细说明。通过示例代码详细介绍，对大家的学习或工作有一定的参考价值。有需要的朋友下面跟边肖学习。

最近在开发小程序和海报生成的过程中，需要不断的在carvas中添加图片，但是小程序的drawImage参数不是很清楚。这一次，我很疑惑。

示例代码

写作有三种版本：

drawImage(imageResource，dx，dy)

drawImage(imageResource，dx，dy，dWidth，dHeight)

从1.9.0开始支持DrawImage(图像资源，SX，SY，Swidth，SHEIGHT，DX，DY，Dwidth，Dheight)。

const CTX=wx . createcanvascontext(' my canvas ')

wx.chooseImage({

成功：函数(res){

CTX . draw image(RES . tempfile paths[0]，0，0，150，100)

ctx.draw()

}

})

该方法与native canvas的方法相同，如下所示

HTML5中引入了新的元素canvas，它的drawImage方法允许将其他图像(img和canvas元素)插入canvas。DrawImage函数有三个函数原型：

drawImage(image，dx，dy)

drawImage(图像，dx，dy，dw，dh)

drawImage(图像，sx，sy，sw，sh，dx，dy，dw，dh)

第一个参数image是要绘制的图片资源。

作为一个参数。Dx和dy是图像在画布中定位的坐标值；Dw和dh是图像在画布中要绘制的区域的宽度和高度值(相对于dx和dy坐标的偏移量)；Sx和sy是要绘制的图像的起始位置，sw和sh是图像要绘制的区域的宽度和高度值(相对于图像的sx和sy坐标的偏移量)。

这就是本文的全部内容。希望对大家的学习有帮助，支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。