HTML5 canvas中 drawImage() 在chrome浏览器中各种画出不来的问题,虚心求详细解答其中的原因。
必须等到图片完全加载后才能对其进行操作, 浏览器通常会在页面脚本执行的同时异步加载图片。 如果试图在图片未完全加载之前就将其呈现到canvas 上,将不会显示任何图片.
var img= new Image();
img.src = "bark.jpg";
// 图片加载完后,将其显示在canvas 上
img.onload = function () {
drawCanvas();
}
var img= new Image();
img.src = "bark.jpg";
// 图片加载完后,将其显示在canvas 上
img.onload = function () {
drawCanvas();
}
温馨提示:答案为网友推荐,仅供参考
第1个回答 2014-04-20
var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
var drawStop=function(canvas){
var linGrad = context.createLinearGradient(0, 450, 1000, 450);
linGrad.addColorStop(0.0,"red");
linGrad.addColorStop(0.5,"yellow");
linGrad.addColorStop(0.7,"orange");
linGrad.addColorStop(1.0,"purple");
context.fillStyle = linGrad;
context.fillRect(0, 450, 1000, 450);
};
drawStop();
多照着别人的例子照抄几遍就会了,画不出来无非是没获取到id,context,canvas定义出差
你好像没有太清楚我说的是什么,不过还是很感谢你的回答。
追答哦,看了你的问题,不过没有源码,我也不知道问题出在哪里,不过建议你多安几个浏览器分别试一下,做html5尽量用chrome和火狐或者opera,其他浏览器兼容性可能不是太好
本回答被网友采纳