canvas loadImage图片加载

90 阅读 0 评论 60 点赞

我是靠谱客的博主清秀流沙，这篇文章主要介绍canvas loadImage图片加载，现在分享给大家，希望可以做个参考。

canvas 图片加载以及图片切换显示

canvas 加载图片使用loadImage函数，参数传递：图片路径，当图片加载完成onImageLoaded触发，通过can.isImageLoaded(url image)判断图片是否加载成功，成功true，失败false。
isImageError(url image)判断图片加载失败，失败true。
图片加载成功后：

复制代码

1
2
3
4
var ctx = can.getContext("2d")
ctx.drawImage(curImage, 0, 0, width, height);
can.requestPaint()

canvas 绘制代码，curImage——当前图片的路径：

复制代码

1
2
3
4
5
6
7
8
9
onPaint: {
	//图片之前加载成功，在切换显示的时候，回到该页面，不会触发onImageLoaded，此时在loadImage之后直接重绘can
    if(isImageLoaded(curImage)) {
         console.log("============之前加载的图纸=============")
         var ctx = can.getContext("2d")
         ctx.drawImage(curImage, 0, 0, width, height);
     }
 }