html5 canvas 畫圓形用什么方法

HTML5中canvas元素，繪制圓形需要使用路徑，開始時要取得圖形上下文，首先使用路徑來勾勒圖形的輪廓，然后設(shè)置顏色，進行繪制。

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供萬柏林網(wǎng)站建設(shè)、萬柏林做網(wǎng)站、萬柏林網(wǎng)站設(shè)計、萬柏林網(wǎng)站制作等企業(yè)網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計與制作、萬柏林企業(yè)網(wǎng)站模板建站服務(wù)，10年萬柏林做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡(luò)服務(wù)。

arc(cx,cy,radius,start_angle,end_angle,direction);

cx 水平坐標

cy 垂直坐標

radius 圓心

start-angel 圓周起始位置 （以圓心為參考點，不是以坐標原點為參考點。下面配圖詳細解釋）

end_angle 圓周結(jié)束位置 Math.PI是半圓 Math.PI*2是整個圓 0.5為四分之一

direction 順、逆時針 false為順時針，true為逆時針（決定了圓弧的方向）

例：(點擊查看效果）

!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)

該方法使用六個參數(shù)，x為繪制圓形的起點橫坐標，y為繪制圓形圖形的起點坐標，radius為繪制圓形半徑，

starAngle為開始角度（以圓心為參考點，繞圓心旋轉(zhuǎn)，不是以坐標原點為參考點），endAngle為結(jié)束角度，anticlockwise為是否按順時針方向進行繪制。

arc方法不僅可以用來繪制圓形，也可以用來繪制圓弧。

context.closePath();

將路徑關(guān)閉后，路徑的創(chuàng)建工作就完成了，但還沒有真正繪制任何圖形。

context.fillStyle = 'rgba(255, 0, 0, 0.25)';

context.fill();

使用創(chuàng)建好的路徑繪制圖形。

HTML5 CSS半圓形邊框末端寬度漸變怎么辦？

這個為啥要用邊框呀我的天，兩個大小不同的圓進行重疊就行了，下面的黑色大點，上面的白色小點，然后在大圓的左下角，就是一個大盒子包裹一個小盒子。

很簡單的

太極圖案用html5怎樣

%@ page language="java" contentType="text/html; charset=utf-8"

pageEncoding="utf-8"%

!DOCTYPE HTML

html

body

canvas id="myCanvas" width="600" height="400" style="background-color: #EED2EE; "

/canvas

script type="text/javascript"

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

//繪制左側(cè)的白色半圓直徑都是150

cxt.fillStyle="#FFFFFF";

cxt.beginPath();

cxt.arc(300,200,150,1.5*Math.PI,Math.PI/2,false);

cxt.closePath();

cxt.fill();

//繪制右側(cè)的黑色半圓

cxt.fillStyle="#000000";

cxt.beginPath();

cxt.arc(300,200,150,Math.PI/2,1.5*Math.PI,false);

cxt.closePath();

cxt.fill();

//繪制下面的黑色圓

cxt.fillStyle="#000000";

cxt.beginPath();

cxt.arc(300,275,75,0,2*Math.PI,false);

cxt.closePath();

cxt.fill();

//繪制上面的白色圓

cxt.fillStyle="#FFFFFF";

cxt.beginPath();

cxt.arc(300,125,75,0,2*Math.PI,false);

cxt.closePath();

cxt.fill();

//繪制兩個小圓

cxt.fillStyle="FFFFFF";

cxt.beginPath();

cxt.arc(300,275,10,0,2*Math.PI,false);

cxt.closePath();

cxt.fill();

//繪制黑色小圓

cxt.fillStyle="#000";

cxt.beginPath();

cxt.arc(300,125,10,0,2*Math.PI,false);

cxt.closePath();

cxt.fill();

/script

/body

/html

HTML5畫圓，且每個圓之間隔一個半圓，重復(fù)多次

不使用任何js就可以實現(xiàn)，兼容各個主要瀏覽器，ie8以下除外

html結(jié)構(gòu)

ul class='cirBox'

li1/li

li2/li

li3/li

li4/li

/ul

css結(jié)構(gòu)

style

.cirBox li{ float:left; border-radius:50%; width:100px; height:100px; background-color:#F00;}

.cirBox li:nth-of-type(even){width:50px;border-radius:100px 0 0 100px; }/*獲取偶數(shù)項li 并設(shè)置為半圓*/

/style

用html5怎么畫左側(cè)半圓？

1. 可以使用html，css做一個圓，然后把右側(cè)的部分隱藏。

2. 可以嵌入svg，畫一個半圓。

3. 可以用canvas畫一個半圓。

HTML5 里面我在畫一個圓形，里面的cxt.arc(70,18,15,0,Math.PI*2,true)；

cxt.arc(100,100,30,0,Math.PI*2,true); 括號內(nèi)第一個和第二個參數(shù)，代表圓心坐標。第三個參數(shù)是圓的半徑。第四個參數(shù)代表圓周起始位置。0 PI就是起始位置。沿順時針路線，分別是0.5 PI（正下方），1 PI和1.5 PI（正上方），為畫餅圖提供了扇形范圍的依據(jù)。 第五個參數(shù)是弧長Math.PI*2就是整個圓，Math.PI是半圓。第六個參數(shù)是一個布爾值，true是順時針false是順時針。

本文標題：html5半圓,HTML5圓角
網(wǎng)站網(wǎng)址：http://chinadenli.net/article19/dsehhgh.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、動態(tài)網(wǎng)站、企業(yè)建站、App開發(fā)、云服務(wù)器、自適應(yīng)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)