What’s on our mind?
Canvas 22건이 검색되었습니다.
index16 const stars = document.getElementById('stars'); const starsCtx = stars.getContext('2d'); let screen, starsElements, starsParams = { speed: 4, number: 300, extinction: 4 }; setupStars(); updateStars(); window.onresize = function () { setupStars(); }; function Star() { this.x = Math.random() * stars.width; this.y = Math.random() * stars.height; this.z = Math.random() * stars.width; this.mo..
@webs
Canvas
const canvas = document.createElement('canvas'), width = canvas.width = window.innerWidth, height = canvas.height = window.innerHeight, context = canvas.getContext('2d'), particles = [] document.body.appendChild(canvas) for (let i = 0; i < 100; i++) { const x = Math.random() * width, y = Math.random() * height, scale = Math.random() * 1 + 10, vx = Math.random() * 2 - 2, vy = Math.random() * 2 - ..
@webs
Canvas
const c = document.querySelector('canvas'), ctx = c.getContext('2d'); c.width = window.innerWidth; c.height = window.innerHeight; const circleDegrees = [], delay = [], pointAngle = [], speed = [], count = []; let startDegree = 270; for (let i = 0; i < 15; i++) { circleDegrees[i] = startDegree; startDegree = startDegree === 360 ? 0 : startDegree += 24; } for (let i = 0; i < circleDegrees.length; ..
@webs
Canvas
const rand = function (min, max) { return Math.random() * (max - min) + min; } let canvas = document.getElementById('canvas'); let ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; window.addEventListener('resize', function () { canvas.width = window.innerWidth; canvas.height = window.innerHeight; ctx = canvas.getContext('2d'); ctx.globalComposi..
@webs
Canvas
index12 class Canvas { constructor() { this.canvas = document.getElementById('canvas'); this.dpr = window.devicePixelRatio || 1; // this.dpr = 1; this.radius = 8 * this.dpr; this.spread = this.radius * 0.5 / this.dpr; this.ctx = this.canvas.getContext('2d'); this.ctx.scale(this.dpr, this.dpr); this.mouse = { x: 0, y: 0, }; this.setCanvasSize = this.setCanvasSize.bind(this); this.handleClick = th..
@webs
Canvas
index11 let canvas = document.getElementById('mitosys'), ctx = canvas.getContext('2d'), winW = canvas.width = window.innerWidth, winH = canvas.height = window.innerHeight, ticker = 0, Balls = [], maxBalls = 10, easing = 1 / 10; class Ball { constructor(options) { Object.assign(this, options); this.r = 100 + Math.random() * 100; this.pos = { x: Math.random() * winW, y: Math.random() * winH }; thi..
@webs
Canvas
* index10 var settings = { numParticles: 180, opacityDecay: 0.20, }; var canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d"); function fill(rgb, amt) { ctx.beginPath(); ctx.rect(-canvas.width / 2, -canvas.height / 2, canvas.width, canvas.height); ctx.fillStyle = "rgba(" + [...rgb, amt] + ")"; ctx.fill(); } function drawCircle(x, y, radius, color) { ctx.beginPath(); ctx.a..
@webs
Canvas
* index9 var canvas = document.createElement('canvas') var canvas2 = document.createElement('canvas') document.getElementsByTagName('body')[0].appendChild(canvas) document.getElementsByTagName('body')[0].appendChild(canvas2) var ctx = canvas.getContext('2d') var ctx2 = canvas2.getContext('2d') var numParticles = 400 var bg = [18, 10, 34] var cols = ['#FF5722', '#FF9800', '#FF9800', '#FF9800', '#..
@webs
Canvas
* index8 class Circle { constructor(x, y) { this.x = x; this.y = y; this.r = 3; this.done = false; } draw() { ctx.beginPath(); ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2); setRandomColor(); ctx.fill(); } } let canvas; let ctx; let w, h; let circles; let colors; function setup() { canvas = document.querySelector("#canvas"); ctx = canvas.getContext("2d"); reset(); window.addEventListener("resi..
@webs
Canvas
* index7 var PI2 = Math.PI * 2; var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var circles = [] var mouse = { x: Math.random() * window.innerWidth, y: Math.random() * window.innerHeight }; var options = { totalCircles: 10, maxRadius: 300, maxLineWidth: 150, colors: ["#105187", "#2C8693", "#F19722", "#C33325"] }; function init() { onWindowResize(); window.a..
@webs
Canvas
index6 class TextDesintegrator { constructor(el, options) { const defaultOptions = { padding: 160, density: 4, duration: 6000 }; this.step = 0; this.count = 0; this.data = []; this.scale = 2; this.el = el; this.el.style.position = "relative"; this.el.innerHTML = `${this.el.textContent}`; this.inner = this.el.querySelector("span"); this.options = { ...defaultOptions, ...options }; this.reverse = ..
@webs
Canvas
* index5 class Vector { constructor(x, y) { this.x = x; this.y = y; } set(x, y) { this.x = x; this.y = y; return this; } clone() { return new Vector(this.x, this.y); } add(v) { this.x += v.x; this.y += v.y; return this; } sub(v) { this.x -= v.x; this.y -= v.y; return this; } setFromAngle(angle) { this.x = Math.cos(angle); this.y = Math.sin(angle); } addFromScalar(x, y) { this.x += x; this.y += y..
@webs
Canvas
** index4 (function () { var pi = Math.PI; var pi2 = 2 * Math.PI; this.Waves = function (holder, options) { var Waves = this; Waves.options = extend(options || {}, { resize: false, rotation: 45, waves: 15, width: 100, hue: [1, 14], // amplitude: 0.5, amplitude: 1.5, background: true, preload: true, speed: [0.001, 0.008], debug: false, fps: false, }); Waves.waves = []; Waves.holder = document.que..
@webs
Canvas
** index3 const canvas = document.getElementById("canvas"); const ctx = canvas.getContext("2d"); const cw = (canvas.width = 500); const ch = (canvas.height = 400); const rad = Math.PI / 180; ctx.lineWidth = 0.1; ctx.lineJoin = "round"; let shapes = []; let m = {x: 200, y: 200}; const fl = 300; let vp = {x: cw / 2, y: ch / 8 }; let vertices = 4; let numShapes = 1020; let increment = 2 * Math.PI /..
@webs
Canvas
** index2 var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); var cw = canvas.width = window.innerWidth, cx = cw / 2; var ch = canvas.height = window.innerHeight, cy = ch / 2; ctx.fillStyle = "#000"; var circlesRy = []; var circlesNum = 15; var requestId = null; function Circle() { this.r = randomIntFromInterval(25, 170); this.x = randomIntFromInterval(this.r, cw -..
@webs
Canvas
var Vector2 = (function() { function Vector2(x, y) { this.x = x || 0; this.y = y || 0; } return Vector2; })(); Vector2.prototype.add = function(addend) { this.x += addend.x; this.y += addend.y; }; var RainDrop = (function() { function RainDrop(parent) { this.size = 3; this.parent = parent; this.init(); } return RainDrop; })(); RainDrop.prototype.init = function() { this.life = 0; this.ttl = Math..
@webs
Canvas
** var canvas = document.querySelector("canvas"); var ctx = canvas.getContext("2d"); var ww = window.innerWidth; var wh = window.innerHeight; var hearts = []; function init(){ requestAnimationFrame(render); canvas.width = ww; canvas.height = wh; for(var i=0; i ww || this.x + this.width wh || this.y+this.height < 0){ t..
@webs
Canvas
const canvas = document.querySelector('#testCanvas'); const c = canvas.getContext('2d'); let canvasWidth = window.innerWidth; let canvasHeight = window.innerHeight; canvas.width = canvasWidth; canvas.height = canvasHeight; const colors = [ '#0a3948', '#426165', '#adb0bd', '#d0cdd7', ]; let mouseX; let mouseY; window.addEventListener('mousemove', e => { mouseX = e.clientX; mouseY = e.clientY; });..
@webs
Canvas
class Point { constructor(index, x, y) { this.x = x; this.y = y; this.maxY = y; this.speed = 0.05; this.currentPos = index; this.maxHeight = Math.random() * 100 + 10; } update() { this.currentPos += this.speed; this.y = this.maxY + Math.sin(this.currentPos) * this.maxHeight; } } class Wave { constructor(index, totalPoints, color) { this.index = index; this.totalPoints = totalPoints; this.color =..
@webs
Canvas
const canvas = document.querySelector("#testCanvas"); const ctx = canvas.getContext("2d"); //캔버스 크기 설정 canvas.width = window.innerWidth; canvas.height = window.innerHeight; //캔버스 위치 설정 let centerX = canvas.width / 2; let centerY = canvas.height / 2; //위치 설정 class Point { constructor(x = 0, y = 0, index = 0) { this.x = x; this.y = y; this.originY = y; this.speed = 0.05; this.index = index; this.p..
@webs
Canvas
class Circle { constructor({ x = 0, y = 0, radius = 10, ctx, randomSize, color }) { this.ctx = ctx; this.color = color; this.x = x; this.y = y; this.radius = radius; this.randomSize = randomSize; this.angle1 = 0; this.angle2 = 0; this.circleStartAngle = 0; this.circleEndAngle = Math.PI * 2; this.counterClockWise = false; } update(time, index) { this.angle1 += 0.02; this.angle2 += 0.06; this.ctx...
@webs
Canvas