第二个离屏已经做完能够显示，但是调用的时候始终显示不出来是为什么？

<!DOCTYPE html>

<html>

<head>

<title>canvas离屏</title>

<style>

#canvas2{

background-color: black;

}

</style>

</head>

<body>

<canvas width="800px" height="600px" id="canvas">您的浏览器不支持canvas</canvas>

<canvas width="800px" height="600px" id="canvas2">您的浏览器不支持canvas</canvas>

var canvas=document.getElementById("canvas");

var ctx=canvas.getContext("2d");

var canvas2=document.getElementById("canvas2");

var ctx2=canvas2.getContext("2d");

ctx2.font="50px sans-serif";

ctx2.textAlign="center";

ctx2.textBaseline="middle";

ctx2.fillStyle="rgba(255,255,255,0.3)"

ctx2.fillText("==www.imooc.com=",400,450);

var img=new Image();

img.src="http://img1.sycdn.imooc.com/climg//5aa6633400017bc704170220.jpg";

img.onload=function(){

ctx.drawImage(img,0,0,800,600);

ctx.drawImage(ctx2,0,0,ctx2.width,ctx2.height,0,0,ctx.width,ctx.height)

};

</script>

</body>

</html>

慕用0863198 2019-05-20

源自：HTML5 Canvas绘图基础 9-2 编程练习

收起

2回答

好帮手慕慕子回答被采纳获得+3积分 2019-05-21 11:20:07

同学你好，因为在img.onload中使用drawImage方法参数写错了，语法规定第一个参数传入的是画布也就是你这里获取的canvas。但是你传入的ctx只是一个用于在画布上绘图的环境

另，你这里使用ctx.width的方式不能获取到画布的宽高，需要直接使用画布来获取宽高。建议修改：

如果帮助到了你，欢迎采纳！

祝学习愉快~~~

收起回答

慕用0863198 提问者 #1

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas离屏</title> <style> #canvas2{ background-color: black; } </style> </head> <body> <canvas width="800px" height="600px" id="canvas">您的浏览器不支持canvas</canvas> <canvas width="800px" height="600px" id="canvas2">您的浏览器不支持canvas</canvas> <script> var canvas=document.getElementById("canvas"); var canvas=canvas.getContext("2d"); var canvas2=document.getElementById("canvas2"); var canvas2=canvas2.getContext("2d"); canvas2.font="50px sans-serif"; canvas2.textAlign="center"; canvas2.textBaseline="middle"; canvas2.fillStyle="rgba(255,255,255,0.3)" canvas2.fillText("==www.imooc.com=",400,450); var img=new Image(); img.src="http://img1.sycdn.imooc.com/climg//5aa6633400017bc704170220.jpg"; img.onload=function(){ canvas.drawImage(img,0,0,800,600); canvas.drawImage(canvas2,0,0,canvas2.width,canvas2.height,0,0,canvas.width,canvas.height); }; </script> </body> </html> 全部改完，还是没有效果

2019-05-21 15:22:58

好帮手慕慕子 2019-05-21 18:55:29

同学你好，你第一次粘贴的代码只需要修改老师截图红框圈起来的地方就可以了。示例代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>canvas离屏</title>
    <style>
    #canvas2 {
        background-color: black;
    }
    </style>
</head>
<body>
    <canvas width="800px" height="600px" id="canvas">您的浏览器不支持canvas</canvas>
    <canvas width="800px" height="600px" id="canvas2">您的浏览器不支持canvas</canvas>
    <script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var canvas2 = document.getElementById("canvas2");
    var ctx2 = canvas2.getContext("2d");
    ctx2.font = "50px sans-serif";
    ctx2.textAlign = "center";
    ctx2.textBaseline = "middle";
    ctx2.fillStyle = "rgba(255,255,255,0.3)"
    ctx2.fillText("==www.imooc.com=", 400, 450);
    var img = new Image();
    img.src = "http://img1.sycdn.imooc.com/climg//5aa6633400017bc704170220.jpg";
    img.onload = function() {
        ctx.drawImage(img, 0, 0, 800, 600);
        ctx.drawImage(canvas2, 0, 0, canvas2.width, canvas2.height, 0, 0, canvas.width, canvas.height)
    };
    </script>
</body>
</html>

同学可以下去测试一下效果哦~~~

如果帮助到了你，欢迎采纳！

祝学习愉快~~~

收起回答