html5多颜色灯笼旋转,HTML5 Canvas 漂亮的斑马条纹灯笼
JavaScript
语言:
JaveScriptBabelCoffeeScript
确定
var c = document.getElementById("c");
var ctx = c.getContext("2d");
var cw = c.width = window.innerWidth,
cx = cw / 2;
var ch = c.height = window.innerHeight,
cy = ch / 2;
var rad = (Math.PI / 180);
var Ry = [];
var a = 0;
var angulo = 20;
var R = 200;
var speed = .5;
var D = 2 * R,
d;
var y = cy + R;
var i = 0;
var num = 10;
var rx, ry, y;
var frames = 0;
var cornsilk = Grd(cx, cy, R, 35);
var fillstyle = "black";
function Draw() {
a += speed;
var last = 360 / angulo - 1;
updateRy(a, num);
ctx.clearRect(0, 0, cw, ch);
for (var l = 1; l < Ry.length; l++) {
for (var p = 1; p <= last; p++) {
ctx.fillStyle = Ry[l].points[p].color;
ctx.beginPath();
ctx.moveTo(Ry[l - 1].points[p - 1].xp, Ry[l - 1].points[p - 1].yp);
ctx.lineTo(Ry[l].points[p - 1].xp, Ry[l].points[p - 1].yp);
ctx.lineTo(Ry[l].points[p].xp, Ry[l].points[p].yp);
ctx.lineTo(Ry[l - 1].points[p].xp, Ry[l - 1].points[p].yp);
ctx.closePath();
ctx.fill();
}
ctx.fillStyle = Ry[l - 1].points[last].color;
ctx.beginPath();
ctx.moveTo(Ry[l - 1].points[last].xp, Ry[l - 1].points[last].yp);
ctx.lineTo(Ry[l].points[last].xp, Ry[l].points[last].yp);
ctx.lineTo(Ry[l].points[0].xp, Ry[l].points[0].yp);
ctx.lineTo(Ry[l - 1].points[0].xp, Ry[l - 1].points[0].yp);
ctx.closePath();
ctx.fill();
}
requestId = window.requestAnimationFrame(Draw);
}
requestId = window.requestAnimationFrame(Draw);
function buildRy(a, num) {
for (var l = -num; l <= num; l++) {
i++
var layer = {}
layer.rx = Math.sqrt(R * R - (R / num) * l * (R / num) * l);
layer.y = cy - l * (R * .9 / num);
layer.ry = layer.rx / 2;
layer.points = [];
for (var p = 0; p < 360; p += angulo) {
i++;
fillstyle = (i % 2 == 0) ? "black" : cornsilk;
var o = {}
o.color = fillstyle;
o.xp = cx + layer.rx * Math.cos((p + a) * rad);
o.yp = this.y + layer.ry * Math.sin((p + a) * rad);
layer.points.push(o);
}
Ry.push(layer);
}
}
function updateRy(a, num) {
for (var j = 0; j < Ry.length; j++) {
Ry[j].rx = Math.sqrt(R * R - (R / num) * (j - num) * (R / num) * (j - num));
Ry[j].y = cy - (j - num) * (R * .9 / num);
Ry[j].ry = Ry[j].rx / 2;
for (var p = 0; p < 360 / angulo; p++) {
Ry[j].points[p].xp = cx + Ry[j].rx * Math.cos((p * angulo + a) * rad);
Ry[j].points[p].yp = Ry[j].y + Ry[j].ry * Math.sin((p * angulo + a) * rad);
}
}
}
function Grd(x, y, r, hue) {
grd = ctx.createRadialGradient(x - R / 3, y - R / 3, 0, x, y, r);
grd.addColorStop(0, 'hsl(' + hue + ', 99%,93%)');
grd.addColorStop(1, 'hsl(' + hue + ', 99%,40%)');
return grd;
//console.log(grd)
}
buildRy(a, num);
html5多颜色灯笼旋转,HTML5 Canvas 漂亮的斑马条纹灯笼相关推荐
- html5圆形图片自动旋转,HTML5/Canvas 彩虹小方块圆盘旋转
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 var canvas, ctx, width, height, xCenter, yCenter, squa ...
- html5实现图片自动旋转,html5实现图片的3D旋转效果
我们先来看一下实现效果: (学习视频分享:html视频教程) H5旋转3D相册,鼠标放置暂停,图片灰度级为0,有放大效果. 该实例运用H5和CSS3动画效果,未用javascript.提高了本人对CS ...
- html5文字颜色怎么设置,html5如何设置文字颜色灰色
html5设置文字颜色灰色的方法:使用属性[text-shadow]向文本设置阴影,语法为[object.style.textShadow="2px 2px #ff0000"]. ...
- html5鼠标点击旋转,HTML5+WEBGL入门程序(鼠标事件,三维旋转)
WebGL中文教程 /> src="Oak3D_v_0_5_5.js"> precision mediump float; varying vec2 vTextureC ...
- HTML5+Canvas漂亮的3D烟花动画生日特效,节日特效,烟花
fireworks HTML5+Canvas漂亮的3D烟花动画生日特效,节日特效,烟花 https://github.com/louislivi/fireworks
- HTML粒子碰撞烟花,html5 canvas漂亮的粒子烟花背景动画特效
特效描述:html5 canvas 漂亮的粒子烟花 背景动画特效.html5 canvas漂亮的粒子烟花背景动画特效 代码结构 1. HTML代码 class Vector2 { constructo ...
- html5 中心点旋转,html5 canvas围绕中心点旋转
围绕中心点旋转 window.addEventListener('load',eventWindowLoaded,false); function eventWindowLoaded(){ canva ...
- HTML5 基础知识,第 3 部分 HTML5 API 之应用-介绍HTML5 API 的用法和价值,Canvas 提供的创造性,以及Web storage的离线应用
HTML5 集设计者和开发者于一身,其主要任务就是构建高效的丰富 Internet 应用程序之富网络应用 (Rich Internet Application,简称RIA),尤其是富 UI(User ...
- html5画图论文结束语,基于HTML5 Canvas画图软件的设计与实现.doc
摘要:在最近十年里,HTML5在Web开发标准完成了巨大的飞跃,和以前的版本相比,HTML5不但用来表示Web的内容,而且还把Web带入一个更高的平台.HTML5为我们带来很多新的特性,其中一个最重要 ...
最新文章
- 浅析强化学习及使用Policy Network实现自动化控制
- python双素数_python双素数_用Python打印100以下的所有双素数对
- 基于Nginx反向代理及负载均衡
- [导入]SQL Injection cheat sheet
- 线性代数与矩阵论 习题 1.2.1
- Flex的Tree全部展开收缩,ji展开选中单个节点
- How to get the android resolution
- 【VMware vSAN 6.6】5.3.硬件兼容性:vSAN硬件服务器解决方案
- 台达DVP50MC11T与威纶触摸屏ModbusTCP通信
- C++端部署pytorch, libtorc使用教程(精简版)
- 18位身份证校验代码
- 8、16、32-BIT系列单片机区别与特点
- 创意计算机产品,10款惊艳的创意产品,脑洞大就是任性!
- pdf转换器哪个软件好用还免费?来这里获得实用技巧!
- 本地环境可以,生产环境不行(持续补充)
- 《程序员面试》---你所不了解的offer话术
- python金融风控评分卡模型
- 判断对象是否可回收、垃圾回收算法
- Nexus私服的下载、安装、启动、配置教程
- DGP 论文阅读笔记
热门文章
- Markdown代码框diff,高亮显示差异、增量、修改
- pandas Dataframe表格转Markdown格式
- Linux每个用户单独配置ssh,大神全面解读如何限制SSH用户访问Linux中指定的目录...
- php中的css类怎么查找,CSS 样式表中的类和伪类
- mysql 锁24小时_MySQL中Alter table 不长时间锁表的情况汇总。
- java中ajax的用途_java Ajax的应用
- C# 编程规范 (coding standard)
- Beta版本(有更改)
- 织梦dede:channelartlist调用排除指定typeid栏目
- 在css/js代码上线之后开发人员经常会优化性能,从用户刷新网页开始,一次js请求一般情况下有哪些地方会有缓存处理?...