js程序畫圓,js canvas畫圓

本文目錄一覽：

• 1、用js簡單的畫個圓
• 2、怎麼在圖片上畫圓網頁代碼
• 3、使用svg和js畫一個圓環
• 4、d3.js畫圓弧和圓的坐標、弧長計算方法
• 5、怎樣用Javascript畫個實心圓和計算器

用js簡單的畫個圓

var c=document.getElementById(“myCanvas”);

var cxt=c.getContext(“2d”);

cxt.fillStyle=”#FF0000″;

cxt.beginPath();

cxt.arc(70,18,15,0,Math.PI*2,true);

cxt.closePath();

cxt.fill();

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

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

使用svg和js畫一個圓環

var path = svgdoc.createElement(“path”);

path.setAttribute(“d”,”M400 400 L400 300 A400 400 90 0 1 500 400 Z”);

path.setAttribute(“style”,”fill:none;stroke:#00f;stroke-width:2″);

svgdoc.rootElement.appendChild(path);

這個代碼是畫四分之一個圓，圓環你自己算下坐標，用PATH畫，A是畫弧線的

path的相關知識，你百度你裡面看下，這裡就不多說了

d3.js畫圓弧和圓的坐標、弧長計算方法

svg路徑畫圓的特性：(rx ry x-axis-rotation large-arc-flag sweep-flag x y)。

rx，ry: 是橢圓的兩個半軸的長度。

x-axis-rotation: 是橢圓相對於坐標系的旋轉角度，角度數而非弧度數。

large-arc-flag: 是標記繪製大弧(1)還是小弧(0)部分。

sweep-flag: 是標記向順時針(1)還是逆時針(0)方向繪製。

x，y: 是圓弧終點的坐標。

已知兩點和半徑求弧路徑。

已知圓上兩點和半徑求弧長。

已知圓上的y軸半徑和圓心求相交的x軸坐標。

已知圓上的x軸半徑和圓心求y軸坐標。

怎樣用Javascript畫個實心圓和計算器

1、JS畫圓

script type=”text/javascript”

//功能：畫實心圓

//參數：圓心坐標，半徑，精確度，背景顏色

//主要用到了中學時的圓的一些特徵公式呵呵

function SolidCircle(centreX, centreY, radius, precision, color){

var cx = Math.abs(parseInt(centreX));

var cy = Math.abs(parseInt(centreY));

var r = parseInt(radius2 ? 60 : radius);

var p = parseInt(precision1 ? 1 : precision);

var c = color;

var y;

for(var x=cx-r; x=cx+r; x+=p){

y = cy – Math.sqrt(Math.pow(r, 2) – Math.pow(cx – x, 2));

document.write(‘img style=”background:’+c+’; border:1 solid ‘+c+’; width:’+p+’; height:’+parseInt(2*Math.sqrt(Math.pow(r, 2) – Math.pow(cx – x, 2)))+’; position:absolute; top:’+parseInt(y)+’; left:’+parseInt(x)+’;”‘);

}

//alert(“一共有 ” + document.all.length + ” 個 img”);

}

SolidCircle(450, 100, 100, 1, “green”);

/script

2、計算器的連加原理其實和連續計算的原理是一樣的，所以，在JS裡面一定要定義一個全局變量，不論是加減乘除都調用這個變量即可。下面是一段完整的計算器代碼，你可以參考一下，也可以解決你的問題。

FORM name=”Keypad” action=””

TABLE

B

TABLE border=2 width=50 height=60 cellpadding=1 cellspacing=5

TR

TD colspan=3 align=middle

input name=”ReadOut” type=”Text” size=24 value=”0″ width=100%

/TD

TD

/TD

TD

input name=”btnClear” type=”Button” value=” C ” onclick=”Clear()”

/TD

TDinput name=”btnClearEntry” type=”Button” value=” CE ” onclick=”ClearEntry()”

/TD

/TR

TR

TD

input name=”btnSeven” type=”Button” value=” 7 ” onclick=”NumPressed(7)”

/TD

TD

input name=”btnEight” type=”Button” value=” 8 ” onclick=”NumPressed(8)”

/TD

TD

input name=”btnNine” type=”Button” value=” 9 ” onclick=”NumPressed(9)”

/TD

TD

/TD

TD

input name=”btnNeg” type=”Button” value=” +/- ” onclick=”Neg()”

/TD

TD

input name=”btnPercent” type=”Button” value=” % ” onclick=”Percent()”

/TD

/TR

TR

TD

input name=”btnFour” type=”Button” value=” 4 ” onclick=”NumPressed(4)”

/TD

TD

input name=”btnFive” type=”Button” value=” 5 ” onclick=”NumPressed(5)”

/TD

TD

input name=”btnSix” type=”Button” value=” 6 ” onclick=”NumPressed(6)”

/TD

TD

/TD

TD align=middleinput name=”btnPlus” type=”Button” value=” + ” onclick=”Operation(‘+’)”

/TD

TD align=middleinput name=”btnMinus” type=”Button” value=” – ” onclick=”Operation(‘-‘)”

/TD

/TR

TR

TD

input name=”btnOne” type=”Button” value=” 1 ” onclick=”NumPressed(1)”

/TD

TD

input name=”btnTwo” type=”Button” value=” 2 ” onclick=”NumPressed(2)”

/TD

TD

input name=”btnThree” type=”Button” value=” 3 ” onclick=”NumPressed(3)”

/TD

TD

/TD

TD align=middleinput name=”btnMultiply” type=”Button” value=” * ” onclick=”Operation(‘*’)”

/TD

TD align=middleinput name=”btnDivide” type=”Button” value=” / ” onclick=”Operation(‘/’)”

/TD

/TR

TR

TD

input name=”btnZero” type=”Button” value=” 0 ” onclick=”NumPressed(0)”

/TD

TD

input name=”btnDecimal” type=”Button” value=” . ” onclick=”Decimal()”

/TD

TD colspan=3

/TD

TD

input name=”btnEquals” type=”Button” value=” = ” onclick=”Operation(‘=’)”

/TD

/TR

/TABLE

/TABLE

/B

/FORM

/CENTER

font face=”Verdana, Arial, Helvetica” size=2

SCRIPT LANGUAGE=”JavaScript”

!– Begin

var FKeyPad = document.Keypad;

var Accum = 0;

var FlagNewNum = false;

var PendingOp = “”;

function NumPressed (Num) {

if (FlagNewNum) {

FKeyPad.ReadOut.value = Num;

FlagNewNum = false;

}

else {

if (FKeyPad.ReadOut.value == “0”)

FKeyPad.ReadOut.value = Num;

else

FKeyPad.ReadOut.value += Num;

}

}

function Operation (Op) {

var Readout = FKeyPad.ReadOut.value;

if (FlagNewNum PendingOp != “=”);

else

{

FlagNewNum = true;

if ( ‘+’ == PendingOp )

Accum += parseFloat(Readout);

else if ( ‘-‘ == PendingOp )

Accum -= parseFloat(Readout);

else if ( ‘/’ == PendingOp )

Accum /= parseFloat(Readout);

else if ( ‘*’ == PendingOp )

Accum *= parseFloat(Readout);

else

Accum = parseFloat(Readout);

FKeyPad.ReadOut.value = Accum;

PendingOp = Op;

}

}

function Decimal () {

var curReadOut = FKeyPad.ReadOut.value;

if (FlagNewNum) {

curReadOut = “0.”;

FlagNewNum = false;

}

else

{

if (curReadOut.indexOf(“.”) == -1)

curReadOut += “.”;

}

FKeyPad.ReadOut.value = curReadOut;

}

function ClearEntry () {

FKeyPad.ReadOut.value = “0”;

FlagNewNum = true;

}

function Clear () {

Accum = 0;

PendingOp = “”;

ClearEntry();

}

function Neg () {

FKeyPad.ReadOut.value = parseFloat(FKeyPad.ReadOut.value) * -1;

}

function Percent () {

FKeyPad.ReadOut.value = (parseFloat(FKeyPad.ReadOut.value) / 100) * parseFloat(Accum);

}

// End —

/SCRIPT

補充哦，怕在百度hi上給你的留言你看不到呵呵

—————————————-

那個圓也是沒有問題的，因為給學生上課講過這個算法，它有些類似於微積分中圓的面積求法，其實是將圓沿X軸進行細分，細分的精度由precision決定，所以，當你在這段代碼中將精確降低的話，圓的邊界就很粗糙，把細分後的每一塊把它看成一個圖形，這樣累加起來，不就組成一個實習圓了嘛（截止到這兒，講的是算法問題）。然後呢，代碼的精髓在於那個For循環，(var x=cx-r; x=cx+r; x+=p)表示變量是從圓的最左邊開始的[因為圓心cx-半徑r得到最左邊，下同]，到最右邊結束[cx+r]，而每次增加多少呢，是由精度控制的[x+=p]，然後循環體內的代碼的精髓是圖片的寬度和高度那塊兒，寬度當然就等於精度了，高度的那個公式y = sqrt(r^2 – x^2)是畫圓的必備公式，你應該明白吧。好了，到此為止，這段代碼的原理和實現我都說到這兒了，希望你能明白。