HTML径向效果,HTML5版径向渐变梯度色彩
HTML5版径向渐变梯度色彩
有个读者问我如何用HTML5生成一个径向梯度色彩效果,而不使用图片。仔细思考下,其实这个问题一点都不难,请看代码。
HTML
HTML5 Radial Gradient | Script Tutorials
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;
}
}
以上就是HTML5版径向渐变梯度色彩的内容,更多相关内容请关注PHP中文网(www.gxlcms.com)!
本条技术文章来源于互联网,如果无意侵犯您的权益请点击此处反馈版权投诉
本文系统来源:php中文网
HTML径向效果,HTML5版径向渐变梯度色彩相关推荐
- html5渐变的两种方式,HTML5的渐变色 渐变的两种类型 createLinearGradient
和createRadialGradient...
今天又再看了html5的颜色渐变API,发现没有第一次看那么复杂. 不过我对这个颜色渐变存在着一个疑惑就是两种色带之间,那段是属于两种颜色混合的,有点模糊. 比如从红色变成黄色,在红与黄之间的那个地方 ...
- jmgraph前端画图组件(html5版)
jmgraph前端画图组件(html5版) 原文:jmgraph前端画图组件(html5版) jmgraph是一个基于html5的WEB前端画图组件. 前端画图对象控件化,支持鼠标和健盘事件响应,可 ...
- Html5版音乐游戏制作及分享(H5音乐游戏)
这里实现了Html5版的音乐游戏的核心玩法. 游戏的制作借鉴了,很多经典的音乐游戏玩法,通过简单的代码将音乐的节奏与操作相结合. 可以通过手机进行游戏,准确点击下落时的目标,进行得分. 点击试玩 游戏 ...
- html5 版街头霸王,html5版街头霸王源码
压缩包内容概览: html5版街头霸王源码-StreetFighter-master ; 图像 ; 索引 ; 自述文件 ; 声音 ; 打效果 ; 魔法 ; 在后面 ; 战斗机的影子 ; 前面 ; 加载 ...
- html5 生存游戏,html5版生命游戏
html5版生命游戏 只有一个.html文件,无任何依赖. 使用canvas 1.[文件] index.html ~ 4KB 下载(206) canvas { background: #eee ...
- 手机 html 折叠效果,HTML5仿苹果手机的面板合拢折叠效果
passbook仿苹果手机的面板合拢折叠效果-html5特效 .pocket{ width:300px; height:460px; padding: 10px; overflow: hidden; ...
- uploadify插件html5,免费的HTML5版uploadify送上
相信有不少同学用过uploadify这一款文件上传插件,它支持多文件选择.能显示进度条.可配置性高,总体来说是比较好用的.官网有两个版本供下载,分别是flash版和HTML5版.不过令人惋惜的是,HT ...
- ps4看b站 f怎么调html5,b站html5,b站怎么切换到HTML5版播放器?
b站怎么切换到HTML5版播放器? 目前来说B站只能使用HTML5播放器,因为FIASH已经停止维护,所以现在不需要设置,只能使用HTML5播放器 b站怎么做切换到html5视频播放器 1. 在网页上 ...
- Unity Shader-Command Buffer的使用(景深与描边效果重置版)
Unity Shader-Command Buffer的使用(景深与描边效果重置版) https://blog.csdn.net/puppet_master/article/details/72669 ...
最新文章
- 如何做EL表达式能调用的函数-小例子(转)
- .NET设计模式(8):适配器模式(Adapter Pattern)
- (2) freemarker入门案例2
- cmd下pip安装mysql_pip安装MySQLpython
- 牛客网暑期ACM多校训练营(第五场)
- 使用lt;jsp:includegt;,不想写死URL,动态生成URL的解决的方法
- cookie 和 token 都存放在 header 中,为什么不会劫持 token?____token和cookie的区别
- relativelayout常用属性
- 理解图像配准中的LMeds、M-estimators与RANSAC算法
- java kafka client_Kafka Client API 基本使用
- php文件通常包含和一些,php函数导入与文件包含:include() 和 require() 语句的区别...
- redis 端口_「建议收藏」手把手教你搭建redis集群
- python判断成语是abac型_abac型词语成语大全
- 如何实现必须关注公众号才能使用微信小程序,从而通过微信小程序免费为公众号吸粉。#微信营销#微信公众号吸粉#微信小程序吸粉
- 咸鱼Maya笔记—Maya 热键
- Vue知识(一)Vue基础语法
- 火狐浏览器Firefox上DownThemAll插件
- havc是什么意思_H.264/AVC是什么?
- 个人理解ToB和ToC业务的不同点
- java实现PDF转tif(图片清晰度高)