javascript+html5實(shí)現(xiàn)繪制圓環(huán)的方法
更新時(shí)間：2015年07月28日 12:29:07 作者：yak
這篇文章主要介紹了javascript+html5實(shí)現(xiàn)繪制圓環(huán)的方法,實(shí)例分析了javascript實(shí)現(xiàn)html5基于canvas繪制圓環(huán)的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
本文實(shí)例講述了javascript+html5實(shí)現(xiàn)繪制圓環(huán)的方法。分享給大家供大家參考。具體如下：
<!DOCTYPE html>
<html>
<head>
<title> </title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<body>
<fieldset>
<canvas id="myCanvas" width="400px" height="400px" >Your browser does not support the HTML5 canvas tag.</canvas>
</fieldset>
<script type="text/javascript">
function yuanhuan(ctx,data,option){
var cood=option.cood;
var radius=option.radius;
var lastpos=pos=0;
for(var i=0;i<data.length;i++){
ctx.beginPath();
ctx.moveTo(cood.x,cood.y);
ctx.fillStyle = data[i].bgcolor;
pos=lastpos+Math.PI*2*data[i].value/100;
ctx.arc(cood.x,cood.y,radius,lastpos,pos,false);
ctx.fill();
lastpos=pos;
}
ctx.beginPath();
ctx.fillStyle ="white";
radius*=0.5;
ctx.arc(cood.x,cood.y,radius,0,Math.PI*2 ,false);
ctx.fill();
}
var data=[
{bgcolor:'yellowgreen',value:30},
{bgcolor:'green',value:30},
{bgcolor:'yellow',value:40}
];
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
yuanhuan(ctx,data,{cood:{x:200,y:200},radius:150})
</script>
</body>
</html>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
JS實(shí)現(xiàn)Fisheye效果動(dòng)感放大菜單代碼
這篇文章主要介紹了JS實(shí)現(xiàn)Fisheye效果動(dòng)感放大菜單代碼,涉及JavaScript事假監(jiān)聽(tīng)機(jī)制及定時(shí)函數(shù)等相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
解決layui動(dòng)態(tài)加載復(fù)選框無(wú)法選中的問(wèn)題
今天小編就為大家分享一篇解決layui動(dòng)態(tài)加載復(fù)選框無(wú)法選中的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
js前端實(shí)現(xiàn)登錄拼圖驗(yàn)證功能
行為驗(yàn)證碼通過(guò)用戶的操作來(lái)完成驗(yàn)證,常見(jiàn)的行為驗(yàn)證碼有拖動(dòng)式和點(diǎn)觸式,下面這篇文章主要給大家介紹了關(guān)于js前端實(shí)現(xiàn)登錄拼圖驗(yàn)證功能的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
javascript(js) join函數(shù)使用方法介紹
javascript(js) join函數(shù)使用方法介紹...2007-11-11
在JavaScript中,事件默認(rèn)行為是指在特定的事件發(fā)生時(shí)瀏覽器自動(dòng)執(zhí)行的操作,本文主要介紹了JavaScript 阻止事件默認(rèn)行為,感興趣的可以了解一下2024-05-05
javascript 延遲加載技術(shù)(lazyload)簡(jiǎn)單實(shí)現(xiàn)
延遲加載技術(shù)(簡(jiǎn)稱lazyload)并不是新技術(shù), 它是js程序員對(duì)網(wǎng)頁(yè)性能優(yōu)化的一種方案.2011-01-01
這篇文章主要介紹了JS彈出層的絕對(duì)定位居中是如何實(shí)現(xiàn)的,需要的朋友可以參考下2014-02-02
el-form實(shí)現(xiàn)表單和圖片手動(dòng)上傳和校驗(yàn)功能
在寫(xiě)項(xiàng)目時(shí),難免遇到需要上傳表單,圖片等文件,且表單內(nèi)容需進(jìn)行驗(yàn)證及必填項(xiàng)提示,圖片需要和信息一起傳遞且圖片載入后需可預(yù)覽,這篇文章給大家介紹el-form實(shí)現(xiàn)表單和圖片手動(dòng)上傳和校驗(yàn)功能,感興趣的朋友一起看看吧2024-01-01
原生JS+HTML5實(shí)現(xiàn)的可調(diào)節(jié)寫(xiě)字板功能示例
這篇文章主要介紹了原生JS+HTML5實(shí)現(xiàn)的可調(diào)節(jié)寫(xiě)字板功能,涉及javascript結(jié)合HTML5屬性動(dòng)態(tài)操作頁(yè)面元素實(shí)現(xiàn)繪圖功能相關(guān)技巧,需要的朋友可以參考下2018-08-08
JS中setTimeout的巧妙用法前端函數(shù)節(jié)流
這篇文章主要介紹了JS中setTimeout的巧妙用法前端函數(shù)節(jié)流 的相關(guān)資料,需要的朋友可以參考下2016-03-03