html实现颜料效果,JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
本文实例讲述了JS基于HTML5的canvas标签实现色相球效果。分享给大家供大家参考,具体如下:
运行效果截图如下:
具体代码如下:
JS canvas标签制作色相球
var canvas,ctx,max,p,count;
window.οnlοad=function(){
var a,b,r;
canvas = document.getElementsByTagName('canvas')[0];
ctx = canvas.getContext('2d');
canvas.width=canvas.height=400;
ctx.fillRect(0,0,400,400);
max=80;
count=150;
p=[];
r=0;
for(a=0;a
p.push([Math.cos(r),Math.sin(r),0]);
r+=Math.PI*2/max;
}
for(a=0;a
for(a=0;a
rus();
};
function rus(){
var a,b,c,d,e,s,tim,p2,xp,yp,xp2,yp2,x,y,z,x1,y1,z1;
ctx.globalCompositeOperation = "source-over";
ctx.fillStyle="rgba(0,0,0,0.03)";
ctx.fillRect(0,0,canvas.width,canvas.height);
ctx.globalCompositeOperation = "lighter";
tim=count/5;
for(e=0;e<3;e++){
tim*=1.7;
s=1-e/3;
a=tim/59;
yp=Math.cos(a);
yp2=Math.sin(a);
a=tim/23;
xp=Math.cos(a);
xp2=Math.sin(a);
p2=[];
for(a=0;a
x=p[a][0];y=p[a][1];z=p[a][2];
y1=y*yp+z*yp2;
z1=y*yp2-z*yp;
x1=x*xp+z1*xp2;
z=x*xp2-z1*xp;
z1=Math.pow(2,z*s);
x=x1*z1;
y=y1*z1;
p2.push([x,y,z]);
}
s*=120;
for(d=0;d<3;d++){
for(a=0;a
b=p2[d*max+a];
c=p2[((a+1)%max)+d*max];
ctx.beginPath();
ctx.strokeStyle="hsla("+((a/max*360)|0)+",70%,60%,0.15)";
ctx.lineWidth=Math.pow(6,b[2]);
ctx.lineTo(b[0]*s+200,b[1]*s+200);
ctx.lineTo(c[0]*s+200,c[1]*s+200);
ctx.stroke();
}
}
}
count++;
requestAnimationFrame(rus);
}
PS:由于这里使用了HTML5的相关技术,建议读者使用火狐、谷歌、opera等支持HTML5效果较好的浏览器运行该上述代码。
希望本文所述对大家JavaScript程序设计有所帮助。
html实现颜料效果,JS基于HTML5的canvas标签实现炫目的色相球动画效果实例相关推荐
- html5录音功能代码,recorder.js 基于 HTML5 实现录音功能
recorder.js 基于 HTML5 实现录音功能2020-06-23 01:49:56 recorder.js microphone基于HTML5的录音功能,输出格式为mp3文件. 前言 完全依 ...
- HTML5 JS录音功能,简单介绍recorder.js 基于Html5录音功能的实现
这篇文章主要介绍了recorder.js 基于Html5录音功能的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 recor ...
- 【web前端特效源码】使用HTML5+CSS3制作一个会促销广告滚动字幕3D动画效果~~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会促销广告滚动字幕3D动画效果~~适合初学者~超简单~ |前端开发|IT软件 效果图: 完整代码: <!DOCTYPE ...
- 神奇的canvas——点与线绘制的绚丽动画效果
代码地址如下: http://www.demodashi.com/demo/11636.html 前言 之前在某网站上看到了一个canvas绘制的动画效果,虽然组成的元素很简单,只有点和线,但是视觉效 ...
- flash图片如何镜像翻转_在canvas上实现元素图片镜像翻转动画效果的方法
这篇文章主要介绍了在canvas上实现元素图片镜像翻转动画效果的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧! 一.Canvas图片水平镜像翻转效果预览 ...
- 使用HTML5的Canvas标签实现绘图板内拖拽元素
第一次在csdn发表文章,纯属试水之作.希望各位多多指教. 直奔主题吧.本人使用了一下HTML5的Canvas标签之后,挺好用的各种画线条,图案等.能实现对Canvas标签内的像素进行随意编辑.加上各 ...
- html5文字飞入插件,jquery使用CSS3实现文字动画效果插件Textillate.js
jquery使用CSS3实现文字动画效果插件Textillate.js Textillate是一款基于CSS3动画效果的 JavaScript 库,您可非常轻轻松地把这些动画效果应该于网页中的任何文字 ...
- 前端笔记(Html+CSS+JS+DOM+网页特效+jQuery+HTML5+CSS3+canvas 标签+web开发重难点+面向对象+AJAX)
第1章Html Html:超级文本标记语言(HyperText Markup Language),在浏览器上运行的一种标记语言. 就是给文本加上含有语义的标签. 接下来应该学习更多具体语义标签: 一. ...
- 拆红包动态效果html5,用React加CSS3实现微信拆红包动画效果
微信红包曾经引爆过一系列的营销热潮,相信大家对于这种红包形式并不陌生,这里本着娱乐至上的精神用React简单地实现了拆红包的动画效果,供大家一起交流学习 用CSS3绘制红包 .redpack { he ...
最新文章
- SpringMVC异常处理机制详解[附带源码分析]
- 二、JavaScript语言--JS基础--JavaScript进阶篇--DOM对象 控制HTML元素
- overleaf文章管理
- 2.1 Java程序的构成
- 怎样快速画出一个正方体_人教版小学数学五年级下册 长方体和正方体的体积 教案、课件,公开课视频...
- 今天微软关闭Silverlight官网,Sivlerlight真得要死了吗?
- 2接口详解_java集合【2】——— Collection接口详解
- c基础学汇编语言,王爽《汇编语言》学习笔记、习题(第一章 基础知识)
- java 常用集合list与Set、Map区别及适用场景总结
- ACM-树重心的性质及动态维护
- Oracle账户的umask,AIX的Umask
- [BZOJ 1212][HNOI2004]L语言(AC自动机)
- pytorch 查看编号_最完整的PyTorch数据科学家指南(2)
- 计算机网络:自顶向下(Top-Down)学习笔记_1.1
- Banner图片轮播控件
- 知识库构建前沿:自动和半自动知识提取
- linux下proc文件夹详解
- 如何查找网络虚假谣言信息?
- 阿里云国际站-阿里云在其云峰会上推出新的直播电子商务解决方案
- JavaSSM-Mybatis框架使用
热门文章
- xshell连接centos vi编辑器不能使用小键盘
- 中建二测线上测评、笔试
- 什么是SpringMVC中的@ModelAttribute?
- 学习神器Toast Fish(附下载链接)
- 数据通信与网络(五)
- csdn的程序员们,大家佛系一点不好吗?何必剑拔弩张?
- MySQL数据库优化的几种方式(笔面试必问)
- 小甲鱼python003答案_小甲鱼Python第003讲:插曲之变量和字符串|课后测验及参考答案...
- 医用耗材管理系统的模式的应用实践-盘谷
- 【2022-09-15】蚂蚁金服秋招笔试三道编程题