1、canvas
<canvas id="canvas"></canvas>
2、js代码
var elements = 1000; // more the merrier var shiftmod = 1/6; // modifier for the x&y distance between each element: DEFAULT=1 var angle = 37; // degree to rotate the canvas between each element var scale = 5; // number of elements that would fit in the available height var colorstep = 0.75; // how quickly to adjust the color each frame var coloralpha = 0.50; // alpha to render elements in var colorcap = 255; // maximum color brightness var rotation = 1/10; // how much to rotate the canvas each frame var clearScreenAlpha = 0.90; // alpha value for the screen erase each frame var zoom = 1.50; // zoom level var triheight = 0.10; // modifier for the triangle height (lower is shorter) //////////////////// function start() { resize(); init(); tick(); } var colors = new Array(elements); var increments = new Array(elements); var size; var shift; function init() { var targetheight = canvas.height*zoom; shift = targetheight/elements*shiftmod; size = Math.max(1, targetheight/scale); for( var i = 0; i < elements; i++ ) { increments[i] = 0; colors[i] = Math.round(colorcap - colorcap*i/elements); } } var framesRendered = 0; function draw() { var canvas = document.getElementById("canvas"); if (canvas.getContext) { var context = canvas.getContext("2d"); context.setTransform(1, 0, 0, 1, 0, 0); clearCanvas(context); // set the origin context.translate(canvas.width/2, canvas.height/2); // rotate the canvas based on the frame context.rotate(2 * Math.PI/360 *framesRendered*rotation); // draw them all for( var i = 0; i < elements; i++ ) { if( getRandom(1, 5) == 1 ) { if( increments[i] !== 0 ) increments[i] = 0; else increments[i] = getRandom(-1, 1) * colorstep; } colors[i] += increments[i]; if( colors[i] < 0 ) { colors[i] = 0; increments[i] = colorstep; } else if( colors[i] > colorcap ) { colors[i] = colorcap; increments[i] = -colorstep; } context.fillStyle = "rgba(" + Math.floor(colors[i]) + "," + Math.floor(colors[i]) + "," + "0, " + coloralpha + ")"; context.rotate(2 * Math.PI/360 * angle); context.beginPath(); context.moveTo(i*shift - size/2, size*triheight + i*shift); context.lineTo(i*shift, i*shift); context.lineTo(i*shift + size/2, size*triheight + i*shift); context.closePath(); context.fill(); } framesRendered++; } } function tick(){ // draw a frame draw(); // trigger the timer for the next frame... requestAnimFrame(tick); } function clearCanvas(context) { context.fillStyle = "rgba(0, 0, 0, " + clearScreenAlpha + " )"; context.fillRect (0, 0, canvas.width, canvas.height); } window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000 / 60); }; })(); // mafs function getRandom (min, max) { return Math.round(Math.random() * (max - min) + min); } function resize(){ var canvas = document.getElementById("canvas"); if (canvas.getContext) { canvas.width = parseInt(getComputedStyle(document.body).width) - 4; canvas.height = parseInt(getComputedStyle(document.body).height) - 4; } } start();
一款用于在网页上生成五彩纸屑特效的JavaScript库——Canvas Confetti
上面是“canvas黑洞漩涡(canvas+js)”的全面内容,想了解更多关于 好玩 内容,请继续关注web建站教程。
当前网址:https://ipkd.cn/webs_2542.html
workflows工作流
- 令人着迷的一只老虎ComfyUI工作流
- 一对葫芦ComfyUI工作流
- 王家卫电视剧繁花海报效果comfyui工作流
- 图生图局部重绘ComfyUI工作流
- 一匹热血沸腾的汗血宝马庄严地站立着ComfyUI工作流
- 一个戴着破旧莎帽子的机械忍者站在冰林中
- 一群邪恶的小黄人ComfyUI工作流
- 一个男孩在吃西瓜ComfyUI工作流
猜你喜欢
声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!