demo
<!doctype html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=640,user-scalable=no,target-densitydpi=device-dpi" />
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta name="format-detection" content="telephone=no"/>
<title>放大鏡+水印</title>
<style>
*{
margin:0;
padding: 0;
}
#Mycanvas{
margin:0 auto;
display:block;
border:1px solid #fff;
}
#points{
width: 80%;
margin: 120px auto;
display: block;
}
</style>
</head>
<body style="background: #000;">
<canvas id="Mycanvas">
</canvas>
<div style="display:none;";>
<input type="range" id="points" min="0.5" max="3" step="0.1" value="1"/>
</div>
</body>
<script>
!(function(win,doc){
var bol="ontouchstart" in win?true:false,
tapstart=bol?"touchstart":"mousedown",
tapmove=bol?"touchmove":"mousemove",
tapend=bol?"touchend":"mouseout",
canvas=doc.getElementById("Mycanvas"),
range=doc.getElementById("points"),
canvas2=doc.createElement("canvas"),
bigCan=doc.createElement("canvas"),
bigctx=bigCan.getContext("2d"),
ctx2=canvas2.getContext("2d"),
ctx=canvas.getContext("2d"),
img=new Image();
img.src="1.jpg";
scale=range.value;
console.log(bol);
img.οnlοad=function(){
canvas.width=bigCan.width=this.width;
canvas.height=bigCan.height=this.height;
craetCanvas();
draw(this,this.width,this.height,scale);
bigctx.drawImage(img,0,0);
}
/**
* *drawImage
* @param {[type]} img [description]
* @return {[type]} [description]
*/
function craetCanvas(){
canvas2.width=200;
canvas2.height=100;
ctx2.font="50px Arial";
ctx2.fillStyle="rgba(255,255,255,0.7)";
ctx2.fillText("周俊熙",10,50);
ctx2.fill();
}
function draw(img,w,h,scale){
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.drawImage(img,(canvas.width-w*scale)/2,(canvas.height-h*scale)/2,w*scale,h*scale);
ctx.drawImage(canvas2,canvas.width-canvas2.width,canvas.height-canvas2.height);
}
range.addEventListener(tapmove,move,false);
/**
* *range move
* @return {[type]} [description]
*/
function move(){
scale=range.value;
draw(img,canvas.width,canvas.height,scale);
}
/**
* *擷取坐标
* @param {[type]} x [description]
* @param {[type]} y [description]
* @return {[type]} [description]
*/
function getPox(x,y){
var top=y-canvas.offsetTop,
left=x-canvas.offsetLeft;
return {"x":left,"y":top};
}
/**
* *清除+渲染圖檔
* @return {[type]} [description]
*/
function drawBigImg(){
ctx.clearRect(0,0,canvas.width,canvas.height);
draw(img,canvas.width,canvas.height,scale);
}
canvas.addEventListener(tapmove,canMove,false);
canvas.addEventListener(tapend,canEnd,false);
function canMove(e){
e.preventDefault();
drawBigImg();
craetCanvas();
var pos=getPox(e.clientX,e.clientY),
mr=50;
if(bol&&event.targetTouches.length==1){
var touches=e.targetTouches[0],
pos=getPox(touches.pageX,touches.pageY);
}
ctx.save();
ctx.beginPath();
ctx.lineWidth=10;
ctx.strokeStyle="#069";
ctx.arc(pos.x,pos.y,2*mr,0,Math.PI*2,false);
ctx.stroke();
ctx.clip();
ctx.drawImage(bigCan,pos.x-mr,pos.y-mr,2*mr,2*mr,pos.x-2*mr,pos.y-2*mr,4*mr,4*mr);
ctx.restore();
}
function canEnd(){
drawBigImg();
}
})(window,document)
</script>
</html>
