老师，我的水平怎么跑到图片下面了

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

老师，我的水平怎么跑到图片下面了

来源：9-2 编程练习

李知恩

2020-05-07 12:29:04

<!DOCTYPE html>

<html>

<head>

<title>canvas离屏</title>

<style>

#canvas{

border:1px solid red;

background-color:#000;

}

#textCanvas{

border:1px solid red;

background-color:#000;

}

</style>

</head>

<body>

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

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

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

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

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

var textContext=textCanvas.getContext("2d");

//补充代码

var img = new Image();

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

img.onload =function(){

context.drawImage(img,0,0);

}

var str="==www.imooc.com=";

textContext.font="bold 30px sans-serif";

textContext.fillStyle="rgba(255,255,255,0.5)";

textContext.textBaseline="top";

textContext.fillText(str,0,0);

var width = textContext.measureText(str).width;

context.drawImage(textCanvas,100,200);

</script>

</body>

</html>

写回答

1回答

好帮手慕夭夭

2020-05-07

已采纳

同学你好，是因为先插的文字，当图片加载完毕之后，才加入的图片，所以被压在图片下面。建议如下修改，在图片加载之后插入文字：

祝学习愉快 ~

0 学习 · 4826 问题

查看课程

相似问题

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

回答 1

绘制图像如何对齐？

回答 1

图片的坐标为什么变了

回答 1

为什么生成名片不会清楚以前的数据

回答 1

老师看下我的为什么不居中呢

回答 1

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