HTML5Canvas绘制图⽚不显⽰的问题
⼀、问题
慕名赶来，却⼀脚踩空，低头⼀看，地上⼀个⼤坑。
事情是这样的，在我看完w3c的介绍和很有说服⼒和教学⼒的demo后，本着实践出真知的思想决定上⼿⼀试，这⼀试不要紧~
蜗牛扑克我按照流⽔线⼯程铺设以下⼏点基本⼯作:
1. canvas标签+id
电脑壁纸图片<div >
<canvas id="myCanvas2" width="700" height="400" >
Your browser does not support the canvas element.
</canvas>
</div>
2. getContext('2d')准备画布
var c2 = ElementById("myCanvas2");
国际洗发水排行榜var cxt2 = c2.getContext("2d");
3. new⼀个Image()对象，并付给他的属性
var img = new Image();
img.src = "canvasTest1.jpg";
4. 终于到了绘图。兴冲冲的写下这段代码：
cxt2.drawImage(img,30,20,640,360);
返岗申请书流着哈喇⼦，我在浏览器按下了F5。
然后⼀⽚死寂...
以为代码写错了，再回去仔细检查⼀遍，没错啊。
复制w3c的关键属性名及⽅法再检查⼀遍，确实没错啊。
图⽚打印出来，也有这个（⼈）图啊！
后来观察w3c的案例，和我代码的区别就是他的图⽚是在html⾥边的。
然后我就学着向html⾥边插⼊了图⽚，
<img src="./images/background.jpg" id="imgs" ></img>
并且⽤getElementById获取这个元素，
var bgImg = ElementById('imgs')
再次执⾏绘图竟然可以了。
他竟然可以了！
难过的想，就必须要实体吗？不就是放到了canvas标签前边嘛！js加载也有实体啊，⽽且我还是⽤new的啊，⽐真⼈差哪了！
对啊，不就是放到前边了嘛。这就涉及到⼀个顺序问题啊！
原因分析：js⾥加载的图⽚是放在绘图前边没错，但是图⽚加载进来还需要个时间啊。需要给图⽚缓冲的时间。等图⽚加载成功后才可以进⾏绘制。⽽drawImage这个⽅法，当图⽚在没加载完的情况下使⽤，他会不被调⽤。绘制就会失败。原来如此！
中国移动企业文化就有⼈抬杠说img标签⾥的图⽚不需要时间加载吗？这时候drawImage就不受限制了？！但是你不要忽略了，js开头的 load 的啊，就算图⽚加载再慢，就算图⽚标签的顺序在canvas标签的后边，但是我有load罩着，我图⽚加载不完，你drawImage就没戏啊对不对。
⼤概顺序是这样的：
<img src="">
drawImage
}
如果不是在html结构中插⼊的图⽚，就被我的粗⼼绕过了这个限制:
图⽚作为⼀个资源请求，在js中加载时，⾃然也会有⼀个图⽚加载的时间。
但是因为没有限制，极⼤的情况是当图⽚还没有加载完毕就调⽤了drawImage，此⽅法他是不起作⽤的。
⼆、解决
那有没有好的⽅法解决因图⽚加载顺序导致drawImage绘图失败的情况呢？
我总结了以下三种⽅法：
1. 标签+load
<img src="">
context.drawImage()
}
这种做法解决的核⼼是onload，将图⽚和drawImage分开加载，img先加载，确保加载完毕以后再使⽤绘图
1-2. 后期插⼊标签？是否可⾏
有⼀种情况是，使⽤截图功能时，也可以⽤drawImage,⽽截图⼜不不是截⾃⼰既有的图⽚,⽽是⽤⼀个图⽚的地址当参数.
我想这种的就需要js来创建⼀个img，并将地址赋给它.然后⽣成图⽚再来截图了
var myImg = ateElement('img');
myImg.src = '///';
document.body.appendChild(myImg);
ctx1.drawImage(myImg,0,0,wWidth,wHeight);
不想加多余的标签？必要像下边这样⽤js来new⼀个image对象？
var bgImg = new Image();
bgImg.src = 'images/background.jpg';
前边说了，这种使⽤ new Image() 创建的图⽚，需要给图⽚缓冲的时间。等图⽚加载成功后才可以进⾏绘制。
图⽚对象是准备好了，但你怎么知道图⽚什么时候真的加载完成呢?好，还有办法：
js任务执⾏中，你嫌我离你执⾏的时间太近是不，那把我单独拎出来重新排队，等会再执⾏可以否？
2. 定时器异步实现
setTimeout(function(){
ctx1.drawImage(bgImg,0,0,wWidth,wHeight);
},10)
这⾥为什么延迟写了10，没写⼤家熟悉的1000或者0呢？
因为在我的特定wifi环境特定台式机电脑的测试下，10能在图⽚加载完后刚好图⽚出来，⽽不像0那样不出来，也不想1000那样等半天出来。
可是试想⼀下，换⼀个更⼤的图，这个10还适⽤吗？wifi换成2g这个10还适⽤吗?
所以，定时器的缺点就是，不能保证时间到了以后图⽚已经加载进来了，⽹不快的话照样挂掉。
3. load
使⽤img的加载事件，监听图⽚加载成功后，再执⾏canvas的绘图效果.并且这种⽅法靠谱⼀些。
console.log("图⽚加载完成！");
cxt2.drawImage(img,30,20,640,360);
}
其实这三种⽅法都是⼀个核⼼，就是让图⽚先加载。即图⽚预加载。但是对于缓存图⽚，图⽚预加载还需要解决的是，当页⾯不刷新时监听缓存图⽚的问题。
发布评论