制作圖片的放大效果我考慮到的方法是將原始圖片繪制到canvas上，然后在對(duì)canvas進(jìn)行局部裁剪最后對(duì)裁剪的部分進(jìn)行放大，這樣就可以實(shí)現(xiàn)放大鏡的效果。
創(chuàng)新互聯(lián)建站主營白朗網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,成都app軟件開發(fā),白朗h5小程序定制開發(fā)搭建,白朗網(wǎng)站營銷推廣歡迎白朗等地區(qū)企業(yè)咨詢
這里我給出一個(gè)實(shí)現(xiàn)這個(gè)想法的示例。該示例實(shí)際上就是運(yùn)用HTML5?canvas中對(duì)畫布進(jìn)行裁剪與保存畫布狀態(tài)的相關(guān)知識(shí)實(shí)現(xiàn)的。
上面是給出示例的效果圖。這是不是你想要的放大鏡效果呢？
下面我們來看下示例代碼：在這個(gè)示例中當(dāng)你點(diǎn)擊圖片時(shí)圖片就會(huì)出現(xiàn)上圖效果，再一次點(diǎn)擊時(shí)就變成原始圖片了。
!DOCTYPE html
html
head
meta charset="utf-8"
title放大鏡/title
!—HTML代碼設(shè)計(jì)：一個(gè)簡單的canvas元素--
/head
body
div id="result-stub" class="well hidden"
canvas id="canvas" width="345" height="345"
p你的瀏覽器不支持canvas元素/p
/canvas
/div
script
window.onload=function() {
//獲取canvas對(duì)象以及圖片對(duì)象
var
canvas = document.getElementById('canvas'),
img = new Image(),
context = null,
dataUrl = null,
//設(shè)置一個(gè)標(biāo)記，該標(biāo)記的作用是控制我們點(diǎn)擊canvas時(shí)放大鏡效果的消失和出現(xiàn)
isMagnified = false,
//init函數(shù)只要是在圖片加載時(shí)繪制出圖形
init = function() {
img.onload = function() {
//繪制原始圖片
context.drawImage(img, 0, 0);
//將圖片信息轉(zhuǎn)化為二進(jìn)制信息或者URL信息存儲(chǔ)在dataUrl中方便后面調(diào)用
dataUrl = canvas.toDataURL();
}
img.src = 'fist-pump-baby.jpg';
//設(shè)置標(biāo)記值
isMagnified = false;
},
//magnify函數(shù)的作用是繪制具有放大鏡效果的圖形
magnify = function() {
//保存當(dāng)前畫布的繪制狀態(tài)即畫布繪制原始圖片的狀態(tài)。方便我們?cè)诤竺婊謴?fù)到繪制原始圖片的狀態(tài)
context.save();
//因?yàn)榉糯箸R的圓圈和把手是通過canvas繪制的這里設(shè)置了一些繪制把手和圓圈的樣式屬性。
context.lineWidth = 10;//?線條寬度
context.shadowColor = '#000';//?陰影的顏色黑色
context.shadowBlur = 15;//?模糊級(jí)別為15
context.shadowOffsetX = 5;//?形狀與陰影的水平距離5
context.shadowOffsetY = 5;//?形狀與陰影的垂直距離5
//保存畫布當(dāng)前狀態(tài)即我們?cè)O(shè)置陰影屬性后的狀態(tài)方便后面使用
context.save();
//繪制出放大鏡把手的圖形
context.beginPath();
context.moveTo(230, 230);
context.lineCap = 'round';
context.lineWidth = 30;
context.lineTo(285, 285);
context.stroke();
//對(duì)圖片進(jìn)行裁剪，裁剪出的圖形是一個(gè)圓形。
context.beginPath();
context.arc(
150,
150,
115,
0,
Math.PI * 2,
true);
context.clip();
//創(chuàng)建一個(gè)新的Image對(duì)象，這個(gè)Image對(duì)象的圖片資源是前面存儲(chǔ)在dataUrl中的圖片資源。所以這個(gè)Image對(duì)象和之前初始化的Image對(duì)象是完全一樣的。
var magnified = new Image();
magnified.src = dataUrl;
//對(duì)Image對(duì)象進(jìn)行放大1.5倍，并進(jìn)行繪制。注意此時(shí)的畫布狀態(tài)時(shí)裁剪為一個(gè)圓形的狀態(tài)，所以這里繪制的也僅僅是圖片中的一個(gè)圓形區(qū)域。這里為了繪制出圖片中娃娃的臉設(shè)置了繪制的圖片有一定的偏移量。
context.scale(1.5, 1.5);
context.drawImage(img, -40, -40);
//調(diào)用restore()函數(shù)將畫布狀態(tài)恢復(fù)到繪制把放大鏡把手時(shí)的狀態(tài)，即具有陰影屬性
context.restore();
//繪制放大鏡的圓圈，即繪制剛剛我們裁剪出來圖片的邊框。這樣剛剛裁剪出來的圓形圖形就會(huì)正好處于放大鏡的圓圈中。
context.arc(
150,
150,
115,
0,
Math.PI * 2,
true);
context.stroke();
//重置畫布，將畫布恢復(fù)到繪制元素圖片的狀態(tài)，以方便繪制出放大效果后，再次點(diǎn)擊是繪制原始圖片。
context.restore()；
//設(shè)置標(biāo)記值，實(shí)現(xiàn)點(diǎn)擊后放大效果消失。
isMagnified = true;
};
//加載初始化代碼，即當(dāng)運(yùn)行頁面時(shí)會(huì)在頁面繪制出一個(gè)原始圖像
init();
//監(jiān)聽畫布的點(diǎn)擊事件，當(dāng)點(diǎn)擊頁面的圖像時(shí)會(huì)根據(jù)標(biāo)記的值來進(jìn)行判斷是否對(duì)畫布進(jìn)行方大處理
$('canvas').click(function() {
if (isMagnified) {
init();//繪制原始圖像
}
else {
magnify();//繪制放大的圖像
}
});
}
/script
script src="jquery.js"/script
/body
/html
對(duì)于這些知識(shí)在一個(gè)叫秒秒學(xué)的教程網(wǎng)站上有相關(guān)的學(xué)習(xí)資料，有興趣的可以自己去看看，希望對(duì)你有幫助。
你可以試試2個(gè)div都設(shè)一下背景，一個(gè)模糊的放底層，清晰的放上層，通過控制清晰的那個(gè)div的位置和背景位移來達(dá)到你要的效果，或者你網(wǎng)上搜一下模糊濾鏡的js腳本來實(shí)現(xiàn)，當(dāng)然，如果你那個(gè)清晰的圓形的位置是固定不變的，那么你還是把這個(gè)效果用ps做成一張圖是最好的，這也是最方便的，做網(wǎng)頁設(shè)計(jì)不要糾結(jié)于技巧，能用最簡單的方式達(dá)到效果是最好的方式，如果是我，我肯定就是做2個(gè)圖片來實(shí)現(xiàn)效果最簡單快捷
HTML5中canvas元素，繪制圓形需要使用路徑，開始時(shí)要取得圖形上下文，首先使用路徑來勾勒?qǐng)D形的輪廓，然后設(shè)置顏色，進(jìn)行繪制。
arc(cx,cy,radius,start_angle,end_angle,direction);
cx 水平坐標(biāo)
cy 垂直坐標(biāo)
radius 圓心
start-angel 圓周起始位置 （以圓心為參考點(diǎn)，不是以坐標(biāo)原點(diǎn)為參考點(diǎn)。下面配圖詳細(xì)解釋）
end_angle 圓周結(jié)束位置 Math.PI是半圓 Math.PI*2是整個(gè)圓 0.5為四分之一
direction 順、逆時(shí)針 false為順時(shí)針，true為逆時(shí)針（決定了圓弧的方向）
例：(點(diǎn)擊查看效果）
!DOCTYPE html
head
meta charset="UTF-8" /
script
function draw(id) {
var canvas = document.getElementById(id);
if (canvas == null) return false;
var context = canvas.getContext('2d');
context.fillStyle = "#EEEEFF";
context.fillRect(0, 0, 400, 300);
var n = 0;
for (var i = 0; i 10; i++) {
context.beginPath();
context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);
context.closePath();
context.fillStyle = 'rgba(255, 0, 0, 0.25)';
context.fill();
}
}
/script
/head
body onLoad="draw('canvas');"
canvas id="canvas" width="400" height="300"/
/body
/html
context.beginPath();
該方法不使用參數(shù)，通過調(diào)用該方法，開始路徑的繪制。在幾次循環(huán)的創(chuàng)建路徑的過程中，每次開始創(chuàng)建是都要調(diào)用beginPath函數(shù)。
context.arc(x,y,radius,startAngle,endAngle,anticlockwise)
該方法使用六個(gè)參數(shù)，x為繪制圓形的起點(diǎn)橫坐標(biāo)，y為繪制圓形圖形的起點(diǎn)坐標(biāo)，radius為繪制圓形半徑，
starAngle為開始角度（以圓心為參考點(diǎn)，繞圓心旋轉(zhuǎn)，不是以坐標(biāo)原點(diǎn)為參考點(diǎn)），endAngle為結(jié)束角度，anticlockwise為是否按順時(shí)針方向進(jìn)行繪制。
arc方法不僅可以用來繪制圓形，也可以用來繪制圓弧。
context.closePath();
將路徑關(guān)閉后，路徑的創(chuàng)建工作就完成了，但還沒有真正繪制任何圖形。
context.fillStyle = 'rgba(255, 0, 0, 0.25)';
context.fill();
使用創(chuàng)建好的路徑繪制圖形。
!doctype?html
html
style
.img:hover{border-radius:50%}
/style
body
img?src="xxx.jpg"?class="img"/
/body
/html
重慶分公司
重慶分公司
