html5--用canvas做个放大镜

来源：互联网发布：上古卷轴4捏脸数据编辑：程序博客网时间：2024/05/17 23:37

做好这个转战CSS3

CSS:

canvas{    background-color:white;    position:absolute;}canvas#canvas1{    z-index:1;}canvas#canvas2{    z-index:2;    left:0px;    top:0px;    border:thin dashed black;    border-radius: 200px;    -moz-border-radius: 200px;    -o-border-radius: 200px;    -webkit-border-radius: 200px;    display:none;

HTML:

<body onLoad="windows_load()"><canvas id="canvas1" width=700px height=600px></canvas><canvas id="canvas2" width=200px height=200px></canvas></body>

JS:

<script type="text/javascript">function windows_load(){var canvas1;canvas1=document.getElementById("canvas1"); var image=new Image();image.src="美女.jpg";context=canvas1.getContext('2d');context.drawImage(image,0,0);canvas1.onmousemove=mousemove;canvas1.onmouseout=mouseout;}function mousemove(ev){var canvas1,canvas2;var IX;var IY;var drawwidth;var drawheight;canvas1=document.getElementById("canvas1");    canvas2=document.getElementById("canvas2");context2=canvas2.getContext('2d');canvas2.style.display="inline";context2.clearRect(0,0,canvas2.width,canvas2.height);IX=ev.pageX-canvas1.offsetLeft;IY=ev.pageY-canvas1.offsetTop; var image2=new Image();image2.src="美女.jpg";     drawwidth=100; drawheight=100;canvas2.style.left=ev.pageX+"px";canvas2.style.top=ev.pageY+"px";context2.fillStyle="red";context2.fillRect(0,0,100,100);context2.drawImage(image2,IX,IY,drawwidth,drawheight,0,0,drawwidth*2,drawheight*2);}function mouseout(ev){canvas2=document.getElementById("canvas2");canvas2.style.display="none";}</script>

1.关于事件的调用，我初步认为，在标签中调用采用on..="..()"的方式单独调用采用对象.属性=...的方式
2.关于document.getElementById这个函数
实验发现通过这样获取到的canvas不具有公用性，也就是说不能定义一个全局变量cnavas获取一次之后再在其他函数中调用，只能在每个函数中分别调用。

0 0