首页 > 其他分享 >JS canvas 标签制作色相球

JS canvas 标签制作色相球

时间:2023-06-26 20:01:30浏览次数:41  
标签:count canvas 色相 ctx JS 400 var max


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>JS canvas标签制作色相球</title>
</head>
<body>
<canvas></canvas>
<script type="text/javascript">
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<max;a++){
        p.push([Math.cos(r),Math.sin(r),0]);
        r+=Math.PI*2/max;
    }
    for(a=0;a<max;a++)p.push([0,p[a][0],p[a][1]]);
    for(a=0;a<max;a++)p.push([p[a][1],0,p[a][0]]);
    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<p.length;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<max;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);
}
</script>
</body>
</html>

 

效果图:

JS canvas 标签制作色相球_html


 

 

 

 

 

 

标签:count,canvas,色相,ctx,JS,400,var,max
From: https://blog.51cto.com/u_16171388/6557290

相关文章

  • NodeJS系列(4)- ECMAScript 6 (ES6) 语法(二)
    在“NodeJS系列(3)-ECMAScript6(ES6)语法(一)”里,我们介绍并演示let、const、Symbol等ES6语法和概念。本文在“NodeJS系列(2)-NPM项目Import/ExportES6模块”的npmdemo 项目的基础上,继续介绍并演示函数扩展、类等ES6语法和概念。NodeJSES6:https://nodejs.org......
  • 【js学习笔记八】如何写一个简单的前端回调函数
     目录前言导语代码部分 运行结果总结前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷导语书写一......
  • 【js学习笔记九】前端异步请求逐步进行一回调
     目录前言导语前言运行结果解决方案运行结果前言我是歌谣我有个兄弟巅峰的时候排名c站总榜19叫前端小歌谣曾经我花了三年的时间创作了他现在我要用五年的时间超越他今天又是接近兄弟的一天人生难免坎坷大不了从头再来歌谣的意志是永恒的放弃很容易但是坚持一定很酷导语......
  • jsp http大文件断点续传上传
    ​ javaweb上传文件上传文件的jsp中的部分上传文件同样可以使用form表单向后端发请求,也可以使用ajax向后端发请求    1.通过form表单向后端发送请求         <formid="postForm"action="${pageContext.request.contextPath}/UploadServlet"method="post"e......
  • elk 入门 - 分析nginx日志 + json格式 + 有调试的意识 + elk7.2.0
    1.本次采用的一台主机,将所有的软件安装一台上进行测试工作。2.安装部署:https://blog.51cto.com/hwg1227/22999953.简单调试输出rubydebuginput{file{path=>"/usr/local/log_test/*/*/*.log"start_position=>"beginning"}}output{e......
  • NodeJS本地环境安装及设置
    背景作为一个后端,服务接口自然不在话下。分分钟给安装上百个接口。但是交互。。。postman,postman,,,,,可视化和交互上那简直真的就是都长这样:想搞个React前端页面。先使用一下单表的增删改查操作。用来操作数据库玩玩一、概念1、Node.js是什么?Node.js是一个开源和跨......
  • Three.js教程:gui.js库(可视化改变三维场景)
    推荐:将NSDT场景编辑器加入你的3D工具链其他系列工具:NSDT简石数字孪生gui.js库(可视化改变三维场景)gui.js库(可视化改变三维场景)dat.gui.js说白了就是一个前端js库,对HTML、CSS和JavaScript进行了封装,学习开发的时候,借助dat.gui.js可以快速创建控制三维场景的UI交互界面,你打开......
  • Redfish是一种现代、开放且标准化的远程管理和监控接口,由DMTF(Distributed Management
    Redfish是一种现代、开放且标准化的远程管理和监控接口,由DMTF(DistributedManagementTaskForce)开发和维护。它基于RESTfulAPI设计,使用JSON或OData格式进行数据交换。Redfish旨在提供简化、灵活和可互操作的远程管理解决方案,取代或与传统的远程管理技术(如IPMI)配合使用。Redfish......
  • js三位分节法(数字大于1000时以,分割)
    1console.log(newIntl.NumberFormat().format(1000))//1,0002console.log(newIntl.NumberFormat('zh-CN').format(1000))//1,000中文3console.log(newIntl.NumberFormat('en-US').format(1000))//1,000英文4constformatter=ne......
  • fabricjs实现虚线流动动画效果
    要在Fabric.js中实现虚线流动的动画效果,你可以使用Fabric.js的动画功能来改变虚线的位置或属性。以下是一个示例代码,展示了如何在Fabric.js中实现虚线流动的动画效果://创建画布varcanvas=newfabric.Canvas('canvas');//创建虚线对象vardashedLine=newfabri......