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

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

我們注重客戶提出的每個要求，我們充分考慮每一個細(xì)節(jié)，我們積極的做好成都網(wǎng)站設(shè)計、做網(wǎng)站服務(wù)，我們努力開拓更好的視野，通過不懈的努力，創(chuàng)新互聯(lián)公司贏得了業(yè)內(nèi)的良好聲譽，這一切，也不斷的激勵著我們更好的服務(wù)客戶。 主要業(yè)務(wù)：網(wǎng)站建設(shè),網(wǎng)站制作,網(wǎng)站設(shè)計,微信小程序定制開發(fā),網(wǎng)站開發(fā),技術(shù)開發(fā)實力，DIV+CSS，PHP及ASP，ASP.Net，SQL數(shù)據(jù)庫的技術(shù)開發(fā)工程師。

網(wǎng)頁制作 HTML5 動畫 繪制一個圓,該圓左右水平移動,繪制姓名文字,該文字左右水平移動。

!DOCTYPE?html

html

head

meta?charset=utf-8

titleHTML5-canvas/title

script

var?r?=?20;

var?x?=?250?-?r;

var?y?=?0;

var?h?=?0;

var?w?=?3;

function?draw()?{

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

var?width?=?canvas.width;

var?height?=?canvas.height;

chr.strokeStyle?=?"rgba(255,0,0,1)";

chr.clearRect(0,?0,?width,?height);

chr.fillStyle?=?"#c81623";

chr.beginPath();

chr.arc(x,?y,?r,?0,?Math.PI?*?2,?1);

chr.fill();

chr.font?=?"30px?Verdana";

var?gradient?=?chr.createLinearGradient(0,?0,?width,?0);

gradient.addColorStop("0",?"magenta");

gradient.addColorStop("0.5",?"blue");

gradient.addColorStop("1.0",?"red");

chr.fillStyle?=?gradient;

chr.fillText("ya死性子",?x?-?10,?y?+?110);

chr.closePath();

x?+=?w;

y?+=?h;

x?=?x??width?-?r???width?-?r?:?x;

x?=?x??r???r?:?x;

y?=?y??height?-?r???height?-?r?:?y;

y?=?y??r???r?:?y;

if?(w??0??x?=?width?-?r?||?w??0??x?=?r)?{

w?=?-w;

}

if?(h??0??y?=?height?-?r?||?h??0??y?=?r)?{

h?=?-h;

}

}

/script

/head

body

div?style="margin:0px?auto;?width:500px;"

canvas?id="canvas"?width="500"?height="200"?style="border:1px?solid?#c81623"/canvas

br?/

input?onclick="clearInterval(window.interval);window.interval=setInterval(draw,5);"?value="開始"?type="button"?/

input?onclick="clearInterval(window.interval);"?value="停止"?type="button"?/

?/div

/body

如何使用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中我畫一個圓，可以為這個圓綁定超鏈接或者單擊事件嘛？

目前還不可以，但是你可以通過別的技巧來實現(xiàn)，比如在這個圓上加一層透明的div之類的，然后為其設(shè)置超鏈接就可以了

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();

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圓,html5圓形進(jìn)度條
分享URL：http://chinadenli.net/article10/dsdsgdo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、營銷型網(wǎng)站建設(shè)、標(biāo)簽優(yōu)化、小程序開發(fā)、外貿(mào)建站、網(wǎng)站維護(hù)

廣告

聲明：本網(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)