canvas--离屏效果（添加水印）

最新推荐文章于 2024-08-15 21:13:46 发布

小水91

最新推荐文章于 2024-08-15 21:13:46 发布

阅读量821

点赞数

本文链接：https://blog.csdn.net/lsy__lsy/article/details/80349924

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>离屏canvas</title>
<style>
body{ background: #000;}
</style>
</head>
<body>
<!--离屏canvas:将第二个canvas加到第一个canvas中-->
<div class="">
     <canvas id="canvas"  width="1024" height="768" style="background: #fff; border: 1px solid #aaa; display: block; margin:100px auto 0"></canvas>     
     <!--html滑杆标签range-->
     <input type="range" id="scale-range" 
     	style="display: block; margin: 20px auto; width: 800px;" 
     	min="0.5" max="3.0" step="0.01" value="1">
</div>
<!--水印-->
<p>水印</p>
<canvas id="watermark-canvas" style=" display: block; margin: 0 auto; border: 1px solid #aaa;"></canvas>
<script>
var canvas=document.getElementById('canvas');
var context=canvas.getContext("2d")
var slider=document.getElementById("scale-range")
var watermarkcanvas=document.getElementById("watermark-canvas")
var watermarkcontext=watermarkcanvas.getContext("2d")
var image=new Image()
window.οnlοad=function(){
	 canvas.width=768;
	 canvas.height=768;
	 var scale=slider.value;	 
	 image.src="timg.jpg";	 
	 image.οnlοad=function(){
	    drawImageByScale(scale)
	    slider.οnmοusemοve=function(){		
	    		scale=slider.value;
	    		drawImageByScale(scale)
		}	
	 }	 
}
//setup watermark canvas
watermarkcanvas.width=600
watermarkcanvas.height=100
watermarkcontext.font="bold 50px Arial"
watermarkcontext.fillStyle="rgba(255,255,255,0.5)"
watermarkcontext.textBaseline="middle";
watermarkcontext.fillText("liuyingshuiyin",20,50)
function drawImageByScale(scale){
	context.clearRect(0,0,canvas.width,canvas.height);  //清空画布
 	var imageWidth=768*scale;
    var imageHeight=768*scale ;
    var dx=canvas.width/2-imageWidth/2
    var dy=canvas.height/2-imageHeight/2
    context.drawImage(image,dx,dy,imageWidth,imageHeight);
    context.drawImage(watermarkcanvas,canvas.width-watermarkcanvas.width,canvas.height-watermarkcanvas.height);
}
</script>
</body>
</html>