HTML5 canvas做的一个图片局部放大的效果
看到老外做HTML5的越来越多了,今天看到一个其中用HTML5做的效果不错,
是在canvas上画的圈,做放大器,并且监视了鼠标的相关事件,代码如下:
HTML部分
<!DOCTYPE html><html lang="en" > <head> <meta charset="utf-8" /> <title>HTML5 canvas - Image zoomer | Script Tutorials</title> <link href="css/main.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script> <script type="text/javascript" src="js/script.js"></script> </head> <body> <div width="800" height="533"></canvas> </div> <footer> <h2>HTML5 canvas - Image zoomer</h2> [url=http://www.script-tutorials.com/html5-canvas-image-zoomer/]Back to original tutorial on <span>Script Tutorials</span>[/url] </footer> </body></html>
CSS部分:
*{ margin:0; padding:0;}body { background-color:#bababa; color:#fff; font:14px/1.3 Arial,sans-serif;}footer { background-color:#212121; bottom:0; box-shadow: 0 -1px 2px #111111; display:block; height:70px; left:0; position:fixed; width:100%; z-index:100;}footer h2{ font-size:22px; font-weight:normal; left:50%; margin-left:-400px; padding:22px 0; position:absolute; width:540px;}footer a.stuts,a.stuts:visited{ border:none; text-decoration:none; color:#fcfcfc; font-size:14px; left:50%; line-height:31px; margin:23px 0 0 110px; position:absolute; top:0;}footer .stuts span { font-size:22px; font-weight:bold; margin-left:5px;}.container { color:#000; margin:20px auto; position:relative; width:800px;}#panel { border:1px #000 solid; box-shadow:4px 6px 6px #444444; cursor:crosshair;}script.js
// variablesvar canvas, ctx;var image;var iMouseX, iMouseY = 1;var bMouseDown = false;var iZoomRadius = 100;var iZoomPower = 2;// drawing functionsfunction clear() { // clear canvas function ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);}function drawScene() { // main drawScene function clear(); // clear canvas if (bMouseDown) { // drawing zoom area ctx.drawImage(image, 0 - iMouseX * (iZoomPower - 1), 0 - iMouseY * (iZoomPower - 1), ctx.canvas.width * iZoomPower, ctx.canvas.height * iZoomPower); ctx.globalCompositeOperation = 'destination-atop'; var oGrd = ctx.createRadialGradient(iMouseX, iMouseY, 0, iMouseX, iMouseY, iZoomRadius); oGrd.addColorStop(0.8, "rgba(0, 0, 0, 1.0)"); oGrd.addColorStop(1.0, "rgba(0, 0, 0, 0.1)"); ctx.fillStyle = oGrd; ctx.beginPath(); ctx.arc(iMouseX, iMouseY, iZoomRadius, 0, Math.PI*2, true); ctx.closePath(); ctx.fill(); } // draw source image ctx.drawImage(image, 0, 0, ctx.canvas.width, ctx.canvas.height);}$(function(){ // loading source image image = new Image(); image.onload = function () { } image.src = 'images/image.jpg'; // creating canvas object canvas = document.getElementById('panel'); ctx = canvas.getContext('2d'); $('#panel').mousemove(function(e) { // mouse move handler var canvasOffset = $(canvas).offset(); iMouseX = Math.floor(e.pageX - canvasOffset.left); iMouseY = Math.floor(e.pageY - canvasOffset.top); }); $('#panel').mousedown(function(e) { // binding mousedown event bMouseDown = true; }); $('#panel').mouseup(function(e) { // binding mouseup event bMouseDown = false; }); setInterval(drawScene, 30); // loop drawScene});一个在线效果在:http://www.script-tutorials.com/demos/167/index.html要用chrome,firefox,safri等浏览器看