<!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.onload=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基于HTML5的canvas...JS canvas标签制作色相球</title> </head> <body> <canvas></canvas> [removed] var canvas,ctx,max,p,count; [removed]=function(){ var a,b,r; canvas = do
本教程将详细讲解如何利用JavaScript和HTML5的Canvas API来制作一个包含多个小球碰撞的动画效果。 首先，我们需要在HTML文件中创建一个`<canvas>`元素，它是画布的基础，用于渲染图形。例如： ```html <!DOCTYPE ...
而`js`文件可能是将JavaScript代码分离出来，便于管理和维护。在实际项目中，将JavaScript代码放在单独的文件中是一个良好的实践，因为这样可以提高代码的可读性和可维护性。 总结一下，创建“太空星球运动”Canvas...
本主题将深入探讨如何利用JavaScript与Canvas结合，实现一个交互式的功能：拖动和缩放球体。这个功能在网页游戏、数据可视化以及用户界面设计中非常常见。 首先，我们需要在HTML页面上创建一个`<canvas>`元素，并...
为了使这些旧版IE浏览器能够兼容HTML5的canvas标签，开发者通常会利用名为"excanvas"的JavaScript库。 Excanvas是一个由G_v2开发的开源项目，其主要目标就是为旧版IE浏览器提供canvas的支持。它通过VML（Vector ...
使用canvas实现的炫彩小球案例，有利于理解canvas使用
用canvas和requestAnimationFrame制作的小球动画，用requestAnimationFrame代替setInterval和setTimeout计时器，解决后台动画播放带来的耗cpu / 耗电、计时器设置频率太高，cpu排队太多的情况
个人博客程序中经常会使用的一个功能叫标签云，就是把许多标签文字...今天要分享的就是一款基于HTML5 Canvas的3D球形标签云动画，你可以定义任意的文字，然后调用HTML5代码初始化一个3D的球形标签云，效果非常不错。
在本文中，我们将深入探讨如何使用HTML5的Canvas API实现一个跨浏览器的文字云（标签云）效果，特别关注对IE9及更高版本的支持。Canvas是HTML5中的一个强大的绘图工具，允许开发者直接在网页上进行图形绘制。下面，...
js和html5实现碰撞球动画 使用 html5 中的 canvas, 实现小球相互碰撞并反弹,反弹算法比较简单
通过`<canvas>`标签，我们可以创建一个画布，然后使用JavaScript的Canvas API进行绘图。Chart.js正是利用了这个特性，将数据转化为可视化的图表。 2. **Chart.js安装**：Chart.js通常通过npm或CDN引入到项目中。...
好了，canvas的介绍就先到这里，下面我们来看看javascript结合canvas实现图片的裁剪代码： 代码如下: var selectObj = null; function ImageCrop(canvasId, imageSource, x, y, width, height) { var c
然后，我们可以通过JavaScript获取这个`canvas`元素，并在其上进行绘图。例如，我们可以用`fillRect`方法画一个矩形： ```javascript var canvas = document.getElementById('myCanvas'); var ctx = canvas....
在Canvas上绘制任何图形或动画，首先需要获取Canvas元素并创建2D渲染上下文。这可以通过JavaScript来完成，如下所示： ```javascript var canvas = document.getElementById('myCanvas'); var ctx = canvas....
`tagcanvas.min.js`是专为实现标签云效果设计的JavaScript插件，它处理了复杂的3D渲染和动画逻辑。 在HTML5 Canvas中，我们通常通过`<canvas>`元素在文档中定义画布，并通过JavaScript的`CanvasRenderingContext2D`...
"canvas粒子球"就是一个利用Canvas实现的酷炫效果，它通过JavaScript进行动态计算和渲染，创造出一个旋转的粒子球。接下来，我们将深入探讨这个效果的实现原理和技术细节。 首先，我们需要理解Canvas的基本结构。...
接下来，我们用JavaScript获取canvas元素，并创建一个绘图环境（context）： ```javascript var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ``` 图片裁剪的核心在于两个...
JavaScript制作桌球游戏是一个有趣且具有挑战性的编程项目，它涉及到网页交互、物理模拟和图形渲染等多个技术领域。在这个项目中，我们将深入探讨JavaScript的基本语法、DOM操作、事件处理、Canvas API以及简单的...