在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5  HTML/ 大佬，canvas怎么加文字水印啊？

大佬，canvas怎么加文字水印?。?/h1>

代碼如下

<html>
<script>
function watermark(str){
   var img = document.getElementById("img");
   var canvas=document.getElementById("cvs");
   var ctx=canvas.getContext("2d");
   ctx.drawImage(img,0,0);
   ctx.font="20px microsoft yahei";
   ctx.fillStyle = "rgba(255,255,255,0.5)";
   ctx.fillText(str,100,100);
}
</script>
<canvas id="cvs" width="1000" height="500" >
Your browser does not support the HTML5 canvas tag.
</canvas>
<image id="img" src="https://gd1.alicdn.com/imgextra/i2/183574891/TB2fvT9dwjN8KJjSZFgXXbjbVXa_!!183574891.png" > </image>
<button onclick="watermark('Hello world')">add watermark</button>
</html>

請問老司機怎么將 Hello world 文字直接不通過button點擊后顯示在圖片上，我是做網(wǎng)站圖片水印用的，直接打開網(wǎng)站有圖片的直接顯示 Hello world 文字？還有怎么顯示在右下角啊？

效果圖
圖片描述

回答
編輯回答
凝雅

看來你對前端一無所知，改成下面：

PS: 請把你的script放到canvas元素的下方

<script>
function watermark(str){
   var img = document.getElementById("img");
   var canvas=document.getElementById("cvs");
   var ctx=canvas.getContext("2d");
   ctx.drawImage(img,0,0);
   ctx.font="20px microsoft yahei";
   ctx.fillStyle = "rgba(255,255,255,0.5)";
   ctx.fillText(str,100,100);
}
watermark('Hello world')
</script>

在線demo地址： https://codepen.io/zhipenglu/...

2018年9月9日 07:37