<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<canvas id="mycanvas" style="display: block;border: 1px solid silver;margin: 0 auto;"></canvas>
<canvas id="offcanvas" style="display: none;"></canvas>
<canvas id="seccanvas" style="display: none;border: 1px solid silver;margin: 0 auto;"></canvas>
<script type="text/javascript">
//画布对象
var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");
//离屏canvas（放大器）
var offcanvas = document.getElementById("offcanvas");
var offctx = offcanvas.getContext("2d");
//离屏canvas（水印）
var seccanvas = document.getElementById("seccanvas");
var secctx = seccanvas.getContext("2d");
//背景图片
var bg = new Image();
bg.src = "img/1.jpg";
//判断鼠标左键是否是点击状态
var isMouseDown = false;
var scale;
window.onload = function() {
canvas.width = 907;
canvas.height = 595;
offcanvas.width = bg.width;
offcanvas.height = bg.height;
scale = 0.8;
ctx.drawImage(bg, 0, 0, canvas.width, canvas.height);
offctx.drawImage(bg, 0, 0);
seccanvas.width = 200;
seccanvas.height = 60;
secctx.font = "bold 30px Arial";
secctx.fillStyle = "rgba(255,255,255,0.5)";
secctx.textBaseline = "middle";
secctx.fillText("来源:Z·N",10,30);
ctx.drawImage(seccanvas,canvas.width - seccanvas.width,canvas.height - seccanvas.height);
}
function winToCanvas(x, y) {
var bbox = canvas.getBoundingClientRect();
return {
x: x - bbox.left,
y: y - bbox.top
};
}
canvas.onmousedown = function(e) {
e.preventDefault();
var point = winToCanvas(e.clientX, e.clientY);
isMouseDown = true;
draw(true , point);
}
canvas.onmousemove = function(e) {
e.preventDefault();
if(isMouseDown == true) {
var point = winToCanvas(e.clientX, e.clientY);
/*console.log(point.x,point.y);*/
draw(true , point);
}
}
canvas.onmouseup = function(e) {
e.preventDefault();
isMouseDown = false;
draw(false);
}
canvas.onmouseout = function(e) {
e.preventDefault();
isMouseDown = false;
draw(false);
}
function draw(isTures , point){
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.drawImage(bg, 0, 0, canvas.width, canvas.height);
if(isTures == true){
drawBig(point);
}
ctx.drawImage(seccanvas,canvas.width - seccanvas.width,canvas.height - seccanvas.height);
}
function drawBig(point){
var bigx = point.x * scale;
var bigy = point.y * scale;
var mr = 100;
var sx = bigx - mr;
var sy = bigy - mr;
var dx = point.x - mr;
var dy = point.y - mr;
ctx.save();
ctx.beginPath();
ctx.lineWidth = 10;
ctx.strokeStyle = "red";
ctx.arc(point.x, point.y, mr, 0, Math.PI*2);
ctx.stroke();
ctx.clip();
ctx.drawImage(offcanvas ,sx , sy,2*mr,2*mr,dx,dy,2*mr,2*mr);
ctx.restore();
}
</script>
</body>
</html>
要找一张比画布大的图片才可以看出效果