您的位置 首页 > 数码极客

html5canvas如何选择本地图片

1、首先还是使用之前讲过的Image()函数来预加载图像。

在调用图像之前,需创建一个事件监听器,为其保证图像已经正确的加载。

如下图:

监听图片已经正确加载

2、把图像显示在画布上面,这里将不再使用createPattern(),改而使用drawImage()函数来实现

提示:createPattern()用在图像填充,而drawImage()是直接加载图像。两者有明显的区别,不要混淆了哦!

drawImage()中包含9个参数,第一个参数:Image对象,也就是图片。第二个和第三个参数定义画布上图像左上角的起始点。第四个和第五个参数定义图像的大小。第六个和第七个参数表示复制图像后的目标位置。第八个和第九个参数定义被复制的图形的大小。

具体用法如下:

图片加载代码

图片加载预览效果

责任编辑: 鲁达

1.内容基于多重复合算法人工智能语言模型创作,旨在以深度学习研究为目的传播信息知识,内容观点与本网站无关,反馈举报请
2.仅供读者参考,本网站未对该内容进行证实,对其原创性、真实性、完整性、及时性不作任何保证;
3.本站属于非营利性站点无毒无广告,请读者放心使用!

“html5canvas如何选择本地图片”边界阅读