html5没有drawimage,没有css的html
HTML5中drawImage使用时遇到的问题及解决方法
HTML5中drawImage使用时遇到的问题及解决方法
HTML5中drawImage使用时遇到的问题及解决方法
使用Image遇到的问题：
$(function() {
var jsCanv = document.getElementById("canv");
var oCanv = jsCanv.getContext("2d");
var img = new Image();
img.src = "img.png";
oCanv.drawImage(img, 220, 30);
})
浏览器不支持
其实这种写法是有错误的，实际上只要一刷新图片就不显示出来。要想保证刷新正常显示需要在Image onload的`时候重绘一次才行。测试在chrome 19下会出现的问题。
解决方案
$(function() {
var jsCanv = document.getElementById("canv");
var oCanv = jsCanv.getContext("2d");
var img = new Image();
img.src = "img.png";
img.onload = function() {
oCanv.drawImage(img, 220, 30);
}
})
浏览器不支持
希望本文所述对大家的html5程序设计有所帮助。
;
html5 drawImage 无法显示绘制图片！
你的脚本是放在script标签中的吗？另外ctx=c.get.Context("2d");
多了个点，应该是ctx=c.getContext("2d");
使用如下代码绘图没有问题：
img?id="A"?src="A.jpg"?alt="A"?width="300"?height="300"?/
br?/
canvas画板
br?/
canvas?id="canvas_A"?width="500"?height="350"?style="border:1px?solid?black;"
你的浏览器不支持html5
/canvas
script
var?c,ctx,img;
c=document.getElementById("canvas_A");
ctx=c.getContext("2d");
img=document.getElementById("A");
ctx.drawImage(img,10,10);
/script
HTML5 Canvas drawImage不显示
你的脚本是放在script标签中的吗？另外ctx=c.get.Context("2d");多了个点，应该是ctx=c.getContext("2d");
使用如下代码绘图没有问题：
img id="A" src="A.jpg" alt="A" width="300" height="300" /br /canvas画板br /canvas id="canvas_A" width="500" height="350" style="border:1px solid black;"你的浏览器不支持html5/canvasscriptvar c,ctx,img;c=document.getElementById("canvas_A");ctx=c.getContext("2d");img=document.getElementById("A");ctx.drawImage(img,10,10);/script
这样可以么？
有关HTML5的drawImage()和ImageData的问题
通常不会. 但是在加载image的时候最好用onload事件判断图片是否加载完成. 然后再getImageData或者putImageData:
var canvas = document.getElementById('canvas');
canvas.width = 200;
canvas.height = 200;
var ctx = canvas.getContext('2d');
var imgDat;
var img = new Image();
img.onload = function() {
ctx.drawImage(img, 0, 0);
imgDat = ctx.getImageData(0, 0, canvas.width, canvas.height);
console.log(imgDat); // Output imageData;
}
img.src = 'comment.gif';