pydick
2016-07-24 06:03canvas画圆,保存和取出重点看不懂不懂,这js能详细解释下么?放大镜效果
<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>
- 点赞
- 回答
- 收藏
- 复制链接分享
1条回答
为你推荐
- html2canvas要截element的固定表头的 表格 截图不全
- html5
- vue.js
- javascript
- 1个回答
- 如何将HTML5 Canvas保存为服务器上的图像?
- javascript
- ajax
- php
- 7个回答
- 我可以在HTML canvas javascript中使用PHP wordwrap吗?
- html5
- javascript
- canvas
- php
- 2个回答
- 为什么PHP不能使用Javascript?
- html
- javascript
- scripting
- php
- 3个回答
- Canvas不会保存服务器端PHP
- canvas
- javascript
- ajax
- jquery
- php
- 1个回答
换一换