<script type="text/javascript">
window.onload=function(){
var bigcanvas=document.getElementById("bigcanvas");
var bigContext=bigcanvas.getContext("2d");
var mycanvas=document.getElementById("mycanvas");
var mycanvasContext=mycanvas.getContext("2d");
var image=new Image();
image.src="img.jpg";
image.onload=function(){
bigContext.drawImage(image,0,0,bigcanvas.width,bigcanvas.height);
mycanvasContext.drawImage(image,0,0,mycanvas.width,mycanvas.height);
}
var mr=100;
var ismousedown=false;
mycanvas.onmousedown=function(event){
ismousedown=true;
var bbox=mycanvas.getBoundingClientRect();
var minx=event.clientX-bbox.left;
var miny=event.clientY-bbox.top;
//console.log(minx,miny);
var bigx=minx*3;
var bigy=miny*3;
mycanvasContext.clearRect(0,0,mycanvas.width,mycanvas.height);
mycanvasContext.drawImage(image,0,0,mycanvas.width,mycanvas.height);
mycanvasContext.drawImage(bigcanvas,bigx-mr,bigy-mr,200,200,minx-mr,miny-mr,200,200);
}
mycanvas.onmouseup=function(event){
ismousedown=false;
mycanvasContext.clearRect(0,0,mycanvas.width,mycanvas.height);
mycanvasContext.drawImage(image,0,0,mycanvas.width,mycanvas.height);
}
mycanvas.onmouseover=function(event){
ismousedown=false;
}
mycanvas.onmousemove=function(){
if( ismousedown==true){
var bbox=mycanvas.getBoundingClientRect();
var minx=event.clientX-bbox.left;
var miny=event.clientY-bbox.top;
//console.log(minx,miny);
var bigx=minx*3;
var bigy=miny*3;
mycanvasContext.clearRect(0,0,mycanvas.width,mycanvas.height);
mycanvasContext.drawImage(image,0,0,mycanvas.width,mycanvas.height);
mycanvasContext.drawImage(bigcanvas,bigx-mr,bigy-mr,200,200,minx-mr,miny-mr,200,200);
}
}
}
</script>
canvas画圆,保存和取出重点看不懂不懂,这js能详细解释下么?放大镜效果
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
- 邀请回答
-
1条回答
- Go 旅城通票 2016-07-24 10:01关注
就是基本的canvas对象操作而已,
getBoundingClientRect
canvas getContext对象方法和属性详细介绍解决 无用评论 打赏 举报
悬赏问题
- ¥35 平滑拟合曲线该如何生成
- ¥100 c语言,请帮蒟蒻写一个题的范例作参考
- ¥15 名为“Product”的列已属于此 DataTable
- ¥15 安卓adb backup备份应用数据失败
- ¥15 eclipse运行项目时遇到的问题
- ¥15 关于#c##的问题:最近需要用CAT工具Trados进行一些开发
- ¥15 南大pa1 小游戏没有界面,并且报了如下错误,尝试过换显卡驱动,但是好像不行
- ¥15 自己瞎改改,结果现在又运行不了了
- ¥15 链式存储应该如何解决
- ¥15 没有证书,nginx怎么反向代理到只能接受https的公网网站