水印不能显示在图片上？

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

水印不能显示在图片上？

来源：9-2 编程练习

慕哥1161892

2018-12-25 14:48:21

<!DOCTYPE html>

<html>

<head>

<title>canvas离屏</title>

<style>

#offCanvas { display:none;}

</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 context=canvas.getContext("2d");

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

var offContext=offCanvas.getContext("2d");

//补充代码

var img=new Image();

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

img.onload=function(){

context.drawImage(img,10,10);

var txt='==www.imooc.com==';

offContext.font='40px Arial';

offContext.fillStyle='rgba(255,255,255,0.5)';

offContext.fillText(txt,20,70);

context.drawImage(offCanvas,0,0,offCanvas.width,offCanvas.height,100,100,canvas.width,canvas.hegiht);

}

</script>

</body>

</html>

写回答

1回答

好帮手慕星星

2018-12-25

已采纳

同学你好，经测试是最后高度单词写错了：

应该是height。

可以调整下图片的宽度，让文字居中显示，参考：

自己测试下，祝学习愉快！

0 学习 · 626 问题

查看课程

相似问题

canvas图片有什么用呢？

回答 1

怎么让图片绘制出来是圆形的

回答 1

6-6 编程练习中的图片获取不到

回答 1

老师能给出案例代码吗，实在是不知道怎么弄成圆形

回答 1

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