怎么在圖片上畫圓網(wǎng)頁代碼

JavaScript一種直譯式腳本語言，是一種動態(tài)類型、弱類型、基于原型的語言，內(nèi)置支持類型。它的解釋器被稱為JavaScript引擎，為瀏覽器的一部分，廣泛用于客戶端的腳本語言，最早是在HTML（標準通用標記語言下的一個應用）網(wǎng)頁上使用，用來給HTML網(wǎng)頁增加動態(tài)功能。

成都網(wǎng)站建設哪家好，找創(chuàng)新互聯(lián)！專注于網(wǎng)頁設計、成都網(wǎng)站建設、微信開發(fā)、微信小程序、集團成都企業(yè)網(wǎng)站建設等服務項目。核心團隊均擁有互聯(lián)網(wǎng)行業(yè)多年經(jīng)驗，服務眾多知名企業(yè)客戶；涵蓋的客戶類型包括：成都PE包裝袋等眾多領域，積累了大量豐富的經(jīng)驗，同時也獲得了客戶的一致贊譽！

第一步:實現(xiàn)思路。

1、在頁面上引入圖片，將圖片放入到一個div標簽中，將div的大小和圖片設置一致

2、借助于jquery的畫圓工具在div上畫圓，視覺上達到影響圖片的效果

2

第二步：下載jquery.min.js包。

第二步：下載jquery具體操作方法，再百度或搜狗瀏覽器中輸入“jquery下載”點擊搜索按鈕--》得到查詢結果進入下載界面--》

第二步：編輯代碼。

打開編輯工具--引入jquery--編寫代碼，具體如下所示：

!DOCTYPE html

html

head

meta charset="UTF-8"

title畫圓/title

style

#drawing {

width: 500px;

height: 500px;

border:1px solid;

position: relative;

overflow: hidden;

}

.circle {

background-color: green;

position: absolute;

}

/style

script src="js/jquery-3.3.1.js"/script

script

$(document).ready(function() {

// 圓

var $circle = null;

// 畫布

var $drawing = $("#drawing");

// 圓心位置

var centerX = 0;

var centerY = 0;

// 是否正在畫圓

var isDrawing = false;

// 按下鼠標開始畫圓

$drawing.mousedown(function(event) {

$circle = $('div/div');

centerX = event.pageX - $drawing.offset().left;

centerY = event.pageY - $drawing.offset().top;

$(this).append($circle);

isDrawing = true;

event.preventDefault();

});

// 鼠標拖動

$(document).mousemove(function(event) {

if(isDrawing) {

var radiusX = Math.abs(event.pageX - $drawing.offset().left - centerX);

var radiusY = Math.abs(event.pageY - $drawing.offset().top - centerY);

var radius = Math.sqrt(radiusX * radiusX + radiusY * radiusY); // 半徑，勾股定理

// 下面四個條件判斷是限制圓不能超出畫布區(qū)域，如果不需要這個限制可以去掉這段代碼

if(centerX - radius 0) {

radius = centerX;

}

if(centerY - radius 0) {

radius = centerY;

}

if(centerX + radius $drawing.width()) {

radius = $drawing.width() - centerX;

}

if(centerY + radius $drawing.height()) {

radius = ?$drawing.height() - centerY;

}

// 設置圓的大小和位置

$circle.css("left", centerX - radius + "px");

$circle.css("top", centerY - radius + "px");

$circle.css("width", 2 * radius + "px");

$circle.css("height", 2 * radius + "px");

$circle.css("border-radius", radius + "px");

}

});

// 鼠標松開停止畫圓

$(document).mouseup(function() {

isDrawing = false;

});

});

/script

/head

body

div id="drawing"

img width="502px;" height="502px;" src="img/cartoon/火影.jpg" /

/div

/body

/html

第四步：測試。

1、打開頁面，頁面展示一張火影圖片

2、左鍵單擊，按住拉，以左鍵第一次點擊位置為中心向外延伸出一個圓

3、重新刷新頁面，圖片恢復原樣。

jquery一個圓平均分成12份,如何確定點擊的是哪部分？

1. 可以根據(jù)幾何計算圓每個等分的坐標，然后根據(jù)當前的鼠標位置確定點擊的是哪部分。

2. 可以使用第三方插件實現(xiàn)，如circliful等。

3. 可以使用svg畫每一部分的等分圓，然后綁定點擊事件。

4. 使用canvas畫等分圓并綁定點擊事件。

使用JQuery怎么實現(xiàn)鼠標移上去背景變圓角矩形?

如果是支持CSS3的瀏覽器，定義border-radius屬性，就是盒模型的邊界圓角，值越大越圓。

用jquery做的話，就是定義一個帶border-radius的class，然后選擇相應的元素，在hover事件中使用addClass方法添加這個class。

但是，這是不好的做法，或者說是dumb way。因為直接使用css的hover偽類就可以實現(xiàn)，完全不需要借助jquery或者說js

例如你的這幾個div擁有一個class，title-div，那么只需要

.title-div:hover {

border-radius: 8px;

}

就可以實現(xiàn)鼠標一上去圓角。

不過要是需要兼容IE6/7/8這種不支持CSS3特性的瀏覽器，就得使用CSS3Pie之類的庫，你可以搜索下，在官網(wǎng)上看看他介紹。