为什么把ctx引入到offctx的时候不显示图片

首页课程实战体系课手记专栏慕课教程

来源：9-2 编程练习

慕工程1453923

2018-07-17 12:55:14

<!DOCTYPE html>

<html>

<head>

<title>canvas离屏</title>

<style>

#canvas{

border:1px solid red;

}

#offcanvas{

border:1px solid blue;

}

</style>

</head>

<body>

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

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

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

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

//补充代码

var img=new Image();

img.src="http://climg.mukewang.com/5aa6633400017bc704170220.jpg";

img.onload=function(){

ctx.drawImage(img,0,0,300,200);

}

// ctx.font="50px 微软雅黑";

// ctx.strokeText("456464456",100,100);

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

var offctx=offcanvas.getContext("2d");

offctx.font="50px 微软雅黑";

offctx.strokeText("==www.imooc.com=",50,600);

console.log(canvas);

// offctx.drawImage(canvas,0,0);

ctx.drawImage(offcanvas,0,0);

</script>

</body>

</html>

为什么 offctx.drawImage(canvas,0,0);时，在offctx上图片不能显示，而 ctx.drawImage(offcanvas,0,0);能把文字显示在ctx上呢？麻烦老师了

写回答

1回答

好帮手慕糖

2018-07-17

已采纳

你好，这里要把offctx.drawImage(canvas,0,0);放在img.onload中，确认图片加载完之后哦。

若能解决你的疑问，望采纳。

祝学习愉快~

0 学习 · 4826 问题

查看课程

相似问题

logo的引入

回答 1

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

回答 2

6-4 如何让图片水平、垂直居中

回答 1

该视频中ctx定义的是什么，听不清楚？

回答 1

用生成名片按钮后，曲线的长度总是达不到口号的长度效果

回答 2

打开慕课网App查看更多内容