html5圆形图片自动旋转,HTML5/Canvas 彩虹小方块圆盘旋转
JavaScript
语言:
JaveScriptBabelCoffeeScript
确定
var canvas,
ctx,
width,
height,
xCenter,
yCenter,
squares;
function square(opt) {
this.x = opt.x;
this.y = opt.y;
this.size = opt.size;
this.rotation = opt.rotation;
this.hue = opt.hue;
this.speed = opt.speed;
this.angle = this.rotation;
this.scale = 1;
this.xBase = this.x;
this.yBase = this.y;
this.xTarget = this.x + Math.cos(this.angle) * this.speed;
this.yTarget = this.y + Math.sin(this.angle) * this.speed;
}
square.prototype.step = function(i) {
this.rotation -= 0.05;
this.x = this.xBase + (this.xTarget - this.xBase) * (1 + Math.sin(tick / 25));
this.y = this.yBase + (this.yTarget - this.yBase) * (1 + Math.sin(tick / 25));
};
square.prototype.draw = function(i) {
ctx.save();
ctx.translate(this.x, this.y);
ctx.scale(this.scale, this.scale);
ctx.rotate(this.rotation);
ctx.fillStyle = 'hsla( ' + this.hue + ' , 80%, 60%, 1)';
ctx.fillRect(-this.size / 2, -this.size / 2, this.size, this.size);
ctx.restore();
ctx.save();
ctx.translate(xCenter, yCenter);
ctx.rotate(Math.PI);
ctx.scale(this.scale, this.scale * 1);
ctx.translate(-xCenter + this.x, -yCenter + this.y);
ctx.scale(this.scale, this.scale);
ctx.rotate(this.rotation);
ctx.fillStyle = 'hsla( ' + this.hue + ' , 80%, 60%, 1)';
ctx.fillRect(-this.size / 2, -this.size / 2, this.size, this.size);
ctx.restore();
};
function squareRow(count, size, radius, speed, hue) {
if (count <= 1) return;
for (var i = 0; i < count; i++) {
var angle = (Math.PI + (i / (count - 1)) * Math.PI) || 0,
x = xCenter + Math.cos(angle) * radius,
y = yCenter + Math.sin(angle) * radius;
squares.push(new square({
x: x,
y: y,
size: size,
rotation: angle,
hue: hue,
speed: speed
}));
}
}
function init() {
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
squares = [];
reset();
loop();
}
function reset() {
width = window.innerWidth;
height = window.innerHeight;
xCenter = width / 2;
yCenter = height / 2;
squares.length = 0;
canvas.width = width;
canvas.height = height;
tick = 0;
}
function create() {
if (tick == 0) {
for (var i = 0, length = 7; i < length; i++) {
var count = 7 + i * 2,
size = 5 + i,
radius = 20 + i * 20,
speed = 30,
hue = 360 - ((i + 1) / length) * 360;
squareRow(count, size, radius, speed, hue);
}
}
}
function step() {
var i = squares.length;
while (i--) {
squares[i].step(i);
}
}
function clear() {
ctx.clearRect(0, 0, width, height);
}
function draw() {
ctx.fillStyle = '#fff';
ctx.fillRect(0, 0, width, height / 2);
ctx.fillStyle = '#000';
ctx.fillRect(0, yCenter, width, height / 2);
var i = squares.length;
while (i--) {
ctx.save();
ctx.translate(xCenter, yCenter);
ctx.rotate(tick / 100);
ctx.translate(-xCenter, -yCenter);
squares[i].draw(i);
ctx.restore();
}
}
function loop() {
requestAnimationFrame(loop);
create();
step();
clear();
draw();
tick++;
}
function onresize() {
reset();
}
window.addEventListener('resize', onresize);
init();
html5圆形图片自动旋转,HTML5/Canvas 彩虹小方块圆盘旋转相关推荐
- html5圆形图片轮播,jQuery超酷响应式圆形图片轮播图特效
mislider是一款效果非常酷的jQuery响应式圆形图片轮播图特效插件.该轮播图特效可以将图片以圆形图片显示,然后使图片无限循环形成轮播图或旋转木马特效.该轮播图插件的特点有: 使用简单 在同一个 ...
- html5+实现图片自动切换,js图片自动切换效果处理代码
var curIndex=0; //时间间隔 单位毫秒 var timeInterval=1000; var arr=new Array(); arr[0]="1.jpg"; ar ...
- html5 背景图片自动换,网站背景图片自动切换特效css代码
背景图片自动切换特效-sbkko.com body { background: #000; background-attachment: fixed; word-wrap: break-word; - ...
- html图片自动剪裁,HTML canvas图像裁剪
canvas drawImage方法的图像裁剪理解可能会比较耗时,记录一下,以便供人翻阅! context.drawImage(img,sx,sy,swidth,sheight,x,y,width,h ...
- 用canvas实现小方块的音符跳动
//绘制小方块function videobg(x,y,canvasGradient){var c1 = document.getElementById("canvas");//v ...
- html5实现图片自动旋转,html5实现图片的3D旋转效果
我们先来看一下实现效果: (学习视频分享:html视频教程) H5旋转3D相册,鼠标放置暂停,图片灰度级为0,有放大效果. 该实例运用H5和CSS3动画效果,未用javascript.提高了本人对CS ...
- html5给图片加圆圈,js+canvas制作的用鼠标绘制圆形图案,可叠加产生不同色
脚本代码(For Alixixi.com)如下: Document body{ font-family: 微软雅黑; } canvas{ display:block; border:1px dotte ...
- html5 简单图片效果,【HTML5】Canvas绘制简单图片教程,
[HTML5]Canvas绘制简单图片教程, 获取Image对象,new出来 定义Image对象的src属性,参数:图片路径 定义Image对象的onload方法,调用context对象的drawIm ...
- html怎样让图片自动转圈,html5怎样做出图片转圈的动画效果
这次给大家带来html5怎样做出图片转圈的动画效果,h5做出图片转圈的动画效果的注意事项有哪些,下面就是实战案例,一起来看一下. @mixin ani-btnRotate{ @keyframes bt ...
最新文章
- EntityFramework用法探索(二)CodeFirst
- 万分之二用百分之怎么表示_2020年元旦放假通知!周三放1天!不挪假连休,你打算怎么安排?...
- Python之路----------内置函数
- 用Visual Studio 2019 开发stm32,cortex-m3, arm
- java循环基础知识_java基础知识—循环结构
- [渝粤教育] 西安工业大学 园中画境 中国古典园林造园艺术 参考 资料
- 零基础逆向工程24_C++_01_类_this指针_继承本质_多层继承
- 一个设计项调另一个设计项(支持多选传值)
- mysql zerofill设置方法_在MySQL中使用ZEROFILL设置自定义自动增量
- python label显示图片_高大上的YOLOV3对象检测算法,使用python也可轻松实现
- [笔记].浅析在Nios II中的两种寄存器映射方法的异同
- JAVA SE、JAVA EE、JAVA ME的联系与区别
- 预科阶段:快速实战入门
- 全网最全数据分析师面试干货-业务逻辑篇
- OpenGL 颜色混合、图元的反走样(五)
- linux系统如何检测网络打印机,Linux系统配置工具网络与打印机与硬件侦测
- SQL的多条件查询语句
- ssm项目---人事管理系统:员工与部门、职位实现一对一
- 深入浅出,五次课程,带您进入数据分析的世界
- 将SpringBoot项目部署到腾讯云
热门文章
- vue报错Uncaught (in promise) NavigationDuplicated:Avoided redundant navigation
- 0 至 10 之间,10以内的儿童数学题 生成工具 代码段 JavaScript
- 1/769 江大第一交互成长日记
- 无处不在的传感器,物联网到底是什么?
- 深度长文:深入理解Ceph存储架构
- 如何使用notepad++查看和替换回车换行符
- tushare 之get_today_all修复接口完整code
- angularjs : wui-date 插件源码修改【接收返回日期格式字符串改为接收返回日期类型】
- java时序图工具_快速学习时序图:时序图简介、画法及实例
- 离职因多写3个字被索赔2.9万,看完这家公司我拳头摁了......