下面这串代码，哪里出问题了，图片不能够载入，谢谢！
<html>
<body>
<canvas id="myc" width="200" height="200" style="border:1px solid #c3c3c3"></canvas>
<script type="text/javascript">
var c=document.getElementById("myc")
var cxt=c.getContext("2d")
var img=new Image()
img.src="www.w3school.com.cn/i/eg_flower.png"
cxt.drawImage=(img,0,0)
</script>
</body>
</html>
我用的火狐，chrome浏览器都不能够显示。但是我看w3的例子是会显示出来的。
原因是你浏览器卡,图片没读出来,等一会就行了,或者用我写的代码
<!DOCTYPE HTML>
<html>
<body>
<head>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
window.onload = function(){
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image();
img.src="http://www.w3school.com.cn/i/eg_flower.png";
cxt.drawImage(img,0,0);
}
</script>
</head>
</body>
</html>
<!DOCTYPE HTML>
<html>
<body>
<head>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script type="text/javascript">
window.onload = function(){
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image();
img.src="http://www.w3school.com.cn/i/eg_flower.png";
cxt.drawImage(img,0,0);
}
</script>
</head>
</body>
</html>
温馨提示：答案为网友推荐，仅供参考
第1个回答 推荐于2016-10-06
定义和用法
<canvas> 标签定义图形，比如图表和其他图像。
<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。
实例
如何通过 canvas 元素来显示一个红色的矩形：
<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>
<canvas> 标签定义图形，比如图表和其他图像。
<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。
实例
如何通过 canvas 元素来显示一个红色的矩形：
<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>
第2个回答 2012-05-11
应该使用下面这样的方式进行绘图，因为用脚本创建一个新的 Image 对象。当脚本执行后，图片开始装载。若调用 drawImage 时，图片没装载完，就会无法显示。因此需要使用onload事件进行处理。
img.onload = function() {
//绘图代码
}
img.onload = function() {
//绘图代码
}
第3个回答 2012-05-10
我用 JQuery 帮你调整一下
var img = new Image();
var myc = document.getElementById('myc');
img.src = '图片网址';
img.onload = function() {
var ctx = myc.getContext ? myc.getContext('2d') : null;
ctx.drawImage(img, 0, 0);
}
var img = new Image();
var myc = document.getElementById('myc');
img.src = '图片网址';
img.onload = function() {
var ctx = myc.getContext ? myc.getContext('2d') : null;
ctx.drawImage(img, 0, 0);
}
