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

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

創(chuàng)新互聯(lián)專注于固安網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供固安營銷型網(wǎng)站建設(shè)，固安網(wǎng)站制作、固安網(wǎng)頁設(shè)計、固安網(wǎng)站官網(wǎng)定制、微信小程序開發(fā)服務(wù)，打造固安網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供固安網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

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

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

html5怎么給畫實心圓 博客園

var?canvas=document.getElementById("canvas");

var?cxt=canvas.getContext("2d");

//畫一個空心圓

cxt.beginPath();

cxt.arc(200,200,50,0,360,false);

cxt.lineWidth=5;

cxt.strokeStyle="green";

cxt.stroke();//畫空心圓

cxt.closePath();

//畫一個實心圓

cxt.beginPath();

cxt.arc(200,100,50,0,360,false);

cxt.fillStyle="red";//填充顏色,默認(rèn)是黑色

cxt.fill();//畫實心圓

cxt.closePath();

//空心和實心的組合

cxt.beginPath();

cxt.arc(300,300,50,0,360,false);

cxt.fillStyle="red";

cxt.fill();

cxt.strokeStyle="green";

cxt.stroke();

cxt.closePath();

html5 canvas 畫圓形用什么方法

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

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

cx 水平坐標(biāo)

cy 垂直坐標(biāo)

radius 圓心

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

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為繪制圓形的起點橫坐標(biāo)，y為繪制圓形圖形的起點坐標(biāo)，radius為繪制圓形半徑，

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

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

context.closePath();

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

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

context.fill();

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

如何使用html5中的canvas標(biāo)簽，畫一個圓及一個矩形

Cavas的英文解釋是畫布，使用這個Html5的Canvas標(biāo)簽可以創(chuàng)建畫布，結(jié)合JavaScript可以畫出很多圖形，我們先以畫一個藍(lán)色矩形為例，說明一下這個標(biāo)簽的使用方法，

首先需要建立一個HTML5的網(wǎng)頁，方法是：

進(jìn)入DW后，選擇：文件--新建

在彈出的對話框中選擇文件類型為Html5

選擇“創(chuàng)建”后，即會形成一個空白網(wǎng)頁，選擇“文件”--"保存“

起名為：juxing

這個名字可以依據(jù)自己的喜好起，但最好名字與網(wǎng)頁內(nèi)容相關(guān)，以后好找，另外一個需要注意的是，最好不用漢字。

我們將視圖切換為”代碼“視圖

并將標(biāo)題改為”畫出矩形“

標(biāo)題也可以依據(jù)自己的喜好進(jìn)行設(shè)定，并不影響網(wǎng)頁的運行。

Html是標(biāo)記型語言，各種功能都需要在對應(yīng)的標(biāo)簽里面才可以，所以我們首先需要添加標(biāo)簽。

我們只需輸入c，就會看到提示列表里出現(xiàn)我們所需要的標(biāo)簽canvas，按下回車鍵，即可完成輸入。

之后，我們每一次按下空格、或輸入相關(guān)字母，都會有提示列表，我們只需選擇所需的項目，按下回車即可，并不需要完整輸入字串，可以避免輸入時的拼寫錯誤。在本例中，只有引號內(nèi)的”mycanvas“是需要完整輸入的，其他部分的關(guān)鍵字都可以通過提示列表進(jìn)行輸入。

命令為：canvas id="mycanvas" width="600" height="400"/canvas

只有Canvas標(biāo)記是不能直接畫出圖來的，需要配合JavaScript語言，首先需要寫出對應(yīng)的程序標(biāo)記。

Html語言中的標(biāo)記都是成對出現(xiàn)的，我們?yōu)榱吮苊忮e誤，可以先將標(biāo)記的起始、標(biāo)記的結(jié)束寫好

寫好前后標(biāo)記后，我們就可以在標(biāo)記中使用JavaScript語言，調(diào)用Canvas標(biāo)記，畫出我們所需要圖形了，方法是：

var canvas=document.getElementById('mycavas');

將變量canvas，賦值為我們之前在html中定義的畫布”mycanvas，以方便JavaScript調(diào)用

var ctxt=canvas.getContext('2d');

將變量 ctxt賦值為利用剛定義的“canvas”返回的二維繪圖環(huán)境對象，使用這個對象就可以繪圖了

使用fillStyle方法設(shè)置顏色，是十六進(jìn)制表示的三原色分量范圍是從“#000000”至“FFFFFF”

ctx.fillStyle='#0066cc';

我們將顏色設(shè)置為一種藍(lán)色，這個顏色也可以隨自己喜好 更改。

ctx.fillRect(50,50,400,200);

填充的起始位置設(shè)置為（50，50），矩形寬度為400，高度為200

選擇在瀏覽器中瀏覽后，即可看到我們所需要的矩形

html5如何使用canvas畫空心圓與實心圓

stroke()是描邊，就是空心圓。fill()是填充，就是實心圓

//空心

var canvas = document.getElementById("myCanvas").getContext('2d');

canvas.beginPath();

canvas.arc(圓心x坐標(biāo),圓心y坐標(biāo),半徑,0,2*Math.PI,true);

canvas.closePath();

canvas.strokeStyle='black';

canvas.stroke();

//實心

var canvas = document.getElementById("myCanvas").getContext('2d');

canvas.beginPath();

canvas.arc(圓心x坐標(biāo),圓心y坐標(biāo),半徑,0,2*Math.PI,true);

canvas.closePath();

canvas.fillStyle='black';

canvas.fill();