js圓的代碼,圓的代碼怎麼寫

本文目錄一覽：

• 1、怎麼在圖片上畫圓網頁代碼
• 2、javascript計算圓的周長和面積，求代碼
• 3、javascript帶參數的構造函數定義一個對象Circle（圓）
• 4、js 怎麼設置這個圓的起始位置

怎麼在圖片上畫圓網頁代碼

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

第一步:實現思路。

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); // 半徑，勾股定理

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

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、重新刷新頁面，圖片恢復原樣。

javascript計算圓的周長和面積，求代碼

function circle(r){

   var zc=2*3.1415926*r;

   var mj=3.1415926*r*r;

   console.log(‘圓的周長為:’+zc);

   console.log(‘圓的面積為:’+mj);

}

circle(2);

輸入半徑r即可輸出對應周長和面積

javascript帶參數的構造函數定義一個對象Circle（圓）

script type=”text/javascript”

function Circle(x,y,radius){

this.x=x;

this.y=y;

this.radius=radius;

}

Circle.prototype.getDiameter=function(){

return 2*this.radius;

}

Circle.prototype.getCircumference=function(){

return Math.PI*2*this.radius;

}

Circle.prototype.getArea=function(){

return Math.PI*this.radius*this.radius;

}

//test for the object;

var circle1=new Circle(10,10,10);

alert(circle1.getDiameter());

alert(circle1.getCircumference());

alert(circle1.getArea());

/script

js 怎麼設置這個圓的起始位置

你說的“頂部為起點” 是什麼意思。你現在的起始點，是從 0 弧度開始畫的，只要改變起始弧度，和終止弧度，也就改變了扇形的位置。