Пример:
Кликните на блок для обновления окружностей
HTML:
|
1 |
<canvas id="canvas"></canvas> |
CSS:
|
1 2 3 4 5 6 |
#canvas { height: 500px; width: 100%; border: 4px solid #BFE2FF; margin: 20px 0; } |
JS:
Количество окружностей задается в переменной shapeNum для разной ширины канваса, а их обновление функцией onResize (в примере оно происходит по клику)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 |
window.addEventListener('load', function () { var canvas = document.getElementById('canvas'); if (!canvas || !canvas.getContext) { return false; } function rand(min, max) { return Math.floor(Math.random() * (max - min + 1) + min); } var ctx = canvas.getContext('2d'); var X = canvas.width = canvas.offsetWidth; var Y = canvas.height = canvas.offsetHeight; var shapes = []; var shapeNum = 18; if (X < 768) { shapeNum = 10; } window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || function(cb) { setTimeout(cb, 17); }; function Shape(ctx, x, y, i) { this.ctx = ctx; this.init(x, y, i); } Shape.prototype.init = function(x, y, i) { this.x = x; this.y = y; this.r = rand(5, 10); this.lw = this.r / 30; this.a = rand(0, 360); this.rad = this.a * Math.PI / 180; this.num = rand(5, 20); this.angles = []; this.getAngles(); this.as = Math.random() * 2; }; Shape.prototype.getAngles = function() { for (var i = 0; i < this.num; i++) { var sAngle = rand(0, 360) * Math.PI / 180; var eAngle = rand(sAngle, 360) * Math.PI / 180; var angle = [sAngle, eAngle]; this.angles.push(angle); } }; Shape.prototype.draw = function() { var ctx = this.ctx; ctx.save(); ctx.lineWidth = this.lw; ctx.strokeStyle = '#000'; ctx.beginPath(); ctx.translate(this.x, this.y); ctx.rotate(this.rad); ctx.translate(-this.x, -this.y); for (var i = 0; i < this.num; i++) { ctx.beginPath(); ctx.arc(this.x, this.y, this.r * i, this.angles[i][0], this.angles[i][1], false); ctx.stroke(); } ctx.restore(); }; Shape.prototype.updateParams = function(i) { if (i % 2 === 0) { this.a += this.as; } else { this.a -= this.as; } this.rad = this.a * Math.PI / 180; }; Shape.prototype.render = function(i) { this.updateParams(i); this.draw(); }; for (var i = 0; i < shapeNum; i++) { var s; if (i === 0) { s = new Shape(ctx, X / 2, Y / 2, i); } else { s = new Shape(ctx, rand(0, X), rand(0, Y), i); } shapes.push(s); } function drawLine() { ctx.save(); ctx.strokeStyle = '#000'; ctx.lineWidth = 0.1; for (var i = 0; i < shapes.length - 1; i++) { ctx.beginPath(); ctx.moveTo(shapes[i].x, shapes[i].y); ctx.lineTo(shapes[i + 1].x, shapes[i + 1].y); ctx.stroke(); } ctx.restore(); } function render() { ctx.clearRect(0, 0, X, Y); drawLine(); for (var i = 0; i < shapes.length; i++) { shapes[i].render(i); } requestAnimationFrame(render); } render(); function onResize() { X = canvas.width = canvas.offsetWidth; Y = canvas.height = canvas.offsetHeight; shapes = []; if (X < 768) { shapeNum = 10; } else { shapeNum = 18; } for (var i = 0; i < shapeNum; i++) { var s; if (i === 0) { s = new Shape(ctx, X / 2, Y / 2, i); } else { s = new Shape(ctx, rand(0, X), rand(0, Y), i); } shapes.push(s); } } window.addEventListener('resize', function(){ onResize(); }); canvas.addEventListener('click', function() { onResize(); }); }); |
За основу взят скрипт, найденный на codepen.io у пользователя Toshiya Marukubo
Добавить комментарий: