放大镜~canvas

        最近看了下canvas吧。不得不吐槽画布绘制时的某些繁碎特性。具体不说啦。自己学了就知道了。这篇就放干货，准确的说是水货。。。因为有些细节没去完善它。好吧，主要想实现的功能是，如下图：

没错~就是那个放大镜的特效。canvas能获取image的所有像素信息，所以简直就是操作图像的瑞士军刀，什么特效都能玩~

那么这个放大镜的特效是怎么实现的呢？

<script>
var imageData=null;


var canvas=document.createElement("canvas");
canvas.setAttribute("width",1000);
canvas.setAttribute("height",800);
canvas.setAttribute("id","canvas");


document.getElementsByTagName("body")[0].appendChild(canvas);


var context=canvas.getContext("2d");


var image=new Image();
image.src="1.jpg";
image.onload=function(){
context.drawImage(image,0,0,1000,800);
imageData=context.getImageData(0,0,1000,800);
}


function windowToCanvas(canvas,x,y){
var canvasRectangle=canvas.getBoundingClientRect();
return {
x:x-canvasRectangle.left,
y:y-canvasRectangle.top
};
}




canvas.addEventListener("mousemove",function(e){
var mouseXY=windowToCanvas(canvas,e.clientX,e.clientY);

context.putImageData(imageData,0,0);

context.save();
context.beginPath();
context.strokeStyle="white";
context.fillStyle="rgba(123,20,20,0.2)"
context.lineWidth=30;
context.arc(mouseXY.x,mouseXY.y,50,0,2*Math.PI,false);
context.stroke();
context.fill();
context.clip();


context.drawImage(canvas,mouseXY.x-30,mouseXY.y-40,100,100,mouseXY.x-100,mouseXY.y-100,300,300);

context.restore();
})

</script>

    很干货吧，简单暴力~主要是使用canvas的getImageData获取最初的图像数据imageData，再使用clip剪辑context范围，从而抓去当前鼠标位置的圆形面积，再调用drawImage的九参绘图方法完成放大的效果。当鼠标移动时，清空画布再将imageData绘入，再调用drawImage。如此来实现放大镜的功能。

    当然，这里我是用了偷懒的方法。imageData记录的是整个画布的数据，导致重绘时是整个画布重绘，合理方法应该是抓取记录当前放大镜区域的像素数据，重绘为前个鼠标位置的像素信息。不必整张画布重绘。这也是我想吐槽的地方，画布重绘的api做得比较羞涩~~当然我也是刚接触canvas，对其特性掌握的不够熟练。熟练了就会随心点了。

    总的来说，还是非常喜欢canvas滴~不过我真正的目标是webGL。哈哈，虽然目前H5在移动开发的位置比较尴尬，而且性能以及渲染上都有瓶颈存在。但web的便捷性还是很有他的优势滴。多用这些有趣的技术做多点有趣的东东~~