pbootcms网站模板|日韩1区2区|织梦模板||网站源码|日韩1区2区|jquery建站特效-html5模板网

HTML5版徑向漸變梯度色彩

有個讀者問我如何用HTML5生成一個徑向梯度色彩效果,而不使用圖片。仔細思考下,其實這個問題一點都不難,請看代碼。 HTML!DOCTYPE htmlhtml lang=quot;enquot; head meta charset=quot;utf-8quot; / met
       有個讀者問我如何用HTML5生成一個徑向梯度色彩效果,而不使用圖片。仔細思考下,其實這個問題一點都不難,請看代碼。


       HTML

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<meta name="author" content="Script Tutorials" />
<title>HTML5 Radial Gradient | Script Tutorials</title>

<!-- add styles -->
<link href="css/main.css" rel="stylesheet" type="text/css" />

<!-- add script -->
<script src="http://pic.html5code.netjs/script.js"></script>
</head>
<body>
<div class="container">
<canvas id="gradient" width="500" height="500" tabindex="1"></canvas>
</div>
</body>
</html>

       JS

// Get angle color function
function getAngleColor(angle) {
var color, d;

if (angle < Math.PI * 2 / 5) { // angle: 0-72
d = 255 / (Math.PI * 2 / 5) * angle;
color = '255,' + Math.round(d) + ',0'; // color: 255,0,0 - 255,255,0
} else if (angle < Math.PI * 4 / 5) { // angle: 72-144
d = 255 / (Math.PI * 2 / 5) * (angle - Math.PI * 2 / 5);
color = (255 - Math.round(d)) + ',255,0'; // color: 255,255,0 - 0,255,0
} else if (angle < Math.PI * 6 / 5) { // angle: 144-216
d = 255 / (Math.PI * 2 / 5) * (angle - Math.PI * 4 / 5);
color = '0,255,' + Math.round(d); // color: 0,255,0 - 0,255,255
} else if (angle < Math.PI * 8 / 5) { // angle: 216-288
d = 255 / (Math.PI * 2 / 5) * (angle - Math.PI * 6 / 5);
color = '0,'+(255 - Math.round(d)) + ',255'; // color: 0,255,255 - 0,0,255
} else { // angle: 288-360
d = 255 / (Math.PI * 2 / 5) * (angle - Math.PI * 8 / 5);
color = Math.round(d) + ',0,' + (255 - Math.round(d)) ; // color: 0,0,255 - 255,0,0
}
return color;
}

// inner variables
var iSectors = 360;
var iSectorAngle = (360 / iSectors) / 180 * Math.PI; // in radians

// Draw radial gradient function
function drawGradient() {

// prepare canvas and context objects
var canvas = document.getElementById('gradient');
var ctx = canvas.getContext('2d');

// clear canvas
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

// save current context
ctx.save();

// move to center
ctx.translate(canvas.width / 2, canvas.height / 2);

// draw all sectors
for (var i = 0; i < iSectors; i++) {

// start and end angles (in radians)
var startAngle = 0;
var endAngle = startAngle + iSectorAngle;

// radius for sectors
var radius = (canvas.width / 2) - 1;

// get angle color
var color = getAngleColor(iSectorAngle * i);

// draw a sector
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.arc(0, 0, radius, startAngle, endAngle, false);
ctx.closePath();

// stroke a sector
ctx.strokeStyle = 'rgb('+color+')';
ctx.stroke();

// fill a sector
ctx.fillStyle = 'rgb('+color+')';
ctx.fill();

// rotate to the next sector
ctx.rotate(iSectorAngle);
}

// restore context
ctx.restore();
}

// initialization
if(window.attachEvent) {
window.attachEvent('onload', drawGradient);
} else {
if(window.onload) {
var curronload = window.onload;
var newonload = function() {
curronload();
drawGradient();
};
window.onload = newonload;
} else {
window.onload = drawGradient;
}
}

演示:http://www.script-tutorials.com/demos/317/index.html

下載:HTML5 Radial Gradient.zip

【網站聲明】本站除付費源碼經過測試外,其他素材未做測試,不保證完整性,網站上部分源碼僅限學習交流,請勿用于商業用途。如損害你的權益請聯系客服QQ:2655101040 給予處理,謝謝支持。

相關文檔推薦

由于實際運行環境是在瀏覽器中,因此性能還取決于JavaScript解釋器的效率,指定的FPS幀速在低性能解釋器中可能不會達到,所以這部分不是開發者能夠決定的,開發者能作的是盡可能通
本文將使用HTML5提供的VideoAPI做一個自定義的視頻播放器,需要用到HTML5提供的video標簽、以及HTML5提供的對JavascriptAPI的擴展。,HTML5中國,中國最大的HTML5中文門戶。
隨著 Hybrid 應用的豐富,HTML5 工程師們已經不滿足于把桌面端體驗簡單移植到移動端,他們覬覦移動原生應用人性化的操作體驗,特別是原生應用與生俱來的豐富的手勢系統。HTML5 沒有提
你想要在自己網站上分享一個產品,或者是一個作品集,又或者僅僅只是一個靈感。在你發布到網上之前,你想讓它看起來有吸引力,專業,或者至少得看起來像那么回事。那么你接下
H5廣告,包括H5廣告的設計流程,究竟有什么講究,和階段。為了能幫助更多的人了解H5廣告,我專門做了一個講義。同時,也讓我意外的收到了非常好反饋和認!這是對我的極大鼓勵!我的
本文主要內容有:框架與組件、構建生態、開發技巧與調試、html、css與重構、native/hybrid/桌面開發、前端/H5優化、全棧/全端開發、研究實驗、數據分析與監控、其它軟技能、前端技術網
主站蜘蛛池模板: 苗木价格-苗木批发-沭阳苗木基地-沭阳花木-长之鸿园林苗木场 | 北京康百特科技有限公司-分子蒸馏-短程分子蒸馏设备-实验室分子蒸馏设备 | B2B网站_B2B免费发布信息网站_B2B企业贸易平台 - 企资网 | 螺钉式热电偶_便携式温度传感器_压簧式热电偶|无锡联泰仪表有限公司|首页 | 家德利门业,家居安全门,别墅大门 - 安徽家德利门业有限公司 | SMN-1/SMN-A ABB抽屉开关柜触头夹紧力检测仪-SMN-B/SMN-C-上海徐吉 | 媒介云-全网整合营销_成都新闻媒体发稿_软文发布平台 | 今日热点_实时热点_奇闻异事_趣闻趣事_灵异事件 - 奇闻事件 | 哈尔滨发电机,黑龙江柴油发电机组-北方星光 | 根系分析仪,大米外观品质检测仪,考种仪,藻类鉴定计数仪,叶面积仪,菌落计数仪,抑菌圈测量仪,抗生素效价测定仪,植物表型仪,冠层分析仪-杭州万深检测仪器网 | 广州二手电缆线回收,旧电缆回收,广州铜线回收-广东益福电缆线回收公司 | 论文查重_免费论文查重_知网学术不端论文查重检测系统入口_论文查重软件 | 耐酸泵,耐酸泵厂家-淄博华舜耐腐蚀真空泵 | 尾轮组_头轮组_矿用刮板_厢式刮板机_铸石刮板机厂家-双驰机械 | 面粉仓_储酒罐_不锈钢储酒罐厂家-泰安鑫佳机械制造有限公司 | 定制/定做衬衫厂家/公司-衬衫订做/订制价格/费用-北京圣达信 | 钢格板|热镀锌钢格板|钢格栅板|钢格栅|格栅板-安平县昊泽丝网制品有限公司 | LINK FASHION 童装·青少年装展 河南卓美创业科技有限公司-河南卓美防雷公司-防雷接地-防雷工程-重庆避雷针-避雷器-防雷检测-避雷带-避雷针-避雷塔、机房防雷、古建筑防雷等-山西防雷公司 | 纳米涂料品牌 防雾抗污纳米陶瓷涂料厂家_虹瓷科技 | 私人别墅家庭影院系统_家庭影院音响_家庭影院装修设计公司-邦牛影音 | 天然鹅卵石滤料厂家-锰砂滤料-石英砂滤料-巩义东枫净水 | 高温高压釜(氢化反应釜)百科 | 数控专用机床,专用机床,自动线,组合机床,动力头,自动化加工生产线,江苏海鑫机床有限公司 | 电主轴-高速精密电主轴-高速电机厂家-瑞德沃斯品牌有限公司 | 航空连接器,航空插头,航空插座,航空接插件,航插_深圳鸿万科 | 深圳激光打标机_激光打标机_激光焊接机_激光切割机_同体激光打标机-深圳市创想激光科技有限公司 深圳快餐店设计-餐饮设计公司-餐饮空间品牌全案设计-深圳市勤蜂装饰工程 | 钢化玻璃膜|手机钢化膜|钢化膜厂家|手机保护膜-【东莞市大象电子科技有限公司】 | Magnescale探规,Magnescale磁栅尺,Magnescale传感器,Magnescale测厚仪,Mitutoyo光栅尺,笔式位移传感器-苏州连达精密量仪有限公司 | 贵阳用友软件,贵州财务软件,贵阳ERP软件_贵州优智信息技术有限公司 | BESWICK球阀,BESWICK接头,BURKERT膜片阀,美国SEL继电器-东莞市广联自动化科技有限公司 | SRRC认证_电磁兼容_EMC测试整改_FCC认证_SDOC认证-深圳市环测威检测技术有限公司 | 上海公众号开发-公众号代运营公司-做公众号的公司企业服务商-咏熠软件 | 深圳彩钢板_彩钢瓦_岩棉板_夹芯板_防火复合彩钢板_长鑫 | 环氧树脂地坪漆_济宁市新天地漆业有限公司 | 闸阀_截止阀_止回阀「生产厂家」-上海卡比阀门有限公司 | 博客-悦享汽车品质生活| b2b网站大全,b2b网站排名,找b2b网站就上地球网 | 翅片管散热器价格_钢制暖气片报价_钢制板式散热器厂家「河北冀春暖气片有限公司」 | 餐饮小吃技术培训-火锅串串香培训「何小胖培训」_成都点石成金[官网] | 莱州网络公司|莱州网站建设|莱州网站优化|莱州阿里巴巴-莱州唯佳网络科技有限公司 | 安驭邦官网-双向万能直角铣头,加工中心侧铣头,角度头[厂家直销] 闸阀_截止阀_止回阀「生产厂家」-上海卡比阀门有限公司 |