canvas 관련 자바스크립트 도와주세요... 채택완료
광깔
5년 전
조회 1,808
canvas에 css 파일로 padding 0, border:0 입니다..
안에 내용이 저렇게 짤려서 보입니다..
canvas 안쪽에 여백이 있는거 같은데 .. 이 부분은 어떻게 없애줘야하는 걸까요...?
도통 찾아봐도 모르겠습니다 ㅠㅠ
</p>
<p>(function() {</p>
<p> </p>
<p> "use strict";</p>
<p> </p>
<p> var lava0;</p>
<p> var ge1doot = {</p>
<p> screen: {</p>
<p> elem: null,</p>
<p> callback: null,</p>
<p> ctx: null,</p>
<p> width: 0,</p>
<p> height: 0,</p>
<p> left: 0,</p>
<p> top: 0,</p>
<p> init: function (id, callback, initRes) {</p>
<p> this.elem = document.getElementById(id);</p>
<p> this.callback = callback || null;</p>
<p> if (this.elem.tagName == "CANVAS") this.ctx = this.elem.getContext("2d");</p>
<p> window.addEventListener('resize', function () {</p>
<p> this.resize();</p>
<p> }.bind(this), false);</p>
<p> this.elem.onselectstart = function () { return false; }</p>
<p> this.elem.ondrag = function () { return false; }</p>
<p> initRes && this.resize();</p>
<p> return this;</p>
<p> },</p>
<p> resize: function () {</p>
<p> var o = this.elem;</p>
<p> this.width = o.offsetWidth;</p>
<p> this.height = o.offsetHeight;</p>
<p> for (this.left = 0, this.top = 0; o != null; o = o.offsetParent) {</p>
<p> this.left += o.offsetLeft;</p>
<p> this.top += o.offsetTop;</p>
<p> }</p>
<p> if (this.ctx) {</p>
<p> this.elem.width = this.width;</p>
<p> this.elem.height = this.height;</p>
<p> }</p>
<p> this.callback && this.callback();</p>
<p> }</p>
<p> }</p>
<p> }</p>
<p> </p>
<p> // Point constructor</p>
<p> var Point = function(x, y) {</p>
<p> this.x = x;</p>
<p> this.y = y;</p>
<p> this.magnitude = x * x + y * y;</p>
<p> this.computed = 0;</p>
<p> this.force = 0;</p>
<p> };</p>
<p> Point.prototype.add = function(p) {</p>
<p> return new Point(this.x + p.x, this.y + p.y);</p>
<p> };</p>
<p> </p>
<p> // Ball constructor</p>
<p> var Ball = function(parent) {</p>
<p> var min = .1;</p>
<p> var max = 1.5;</p>
<p> this.vel = new Point(</p>
<p> (Math.random() > 0.5 ? 1 : -1) * (0.2 + Math.random() * 0.25), (Math.random() > 0.5 ? 1 : -1) * (0.2 + Math.random())</p>
<p> );</p>
<p> this.pos = new Point(</p>
<p> parent.width * 0.2 + Math.random() * parent.width * 0.6,</p>
<p> parent.height * 0.2 + Math.random() * parent.height * 0.6</p>
<p> );</p>
<p> this.size = (parent.wh / 15) + ( Math.random() * (max - min) + min ) * (parent.wh / 15);</p>
<p> this.width = parent.width;</p>
<p> this.height = parent.height;</p>
<p> };</p>
<p> </p>
<p> // move balls</p>
<p> Ball.prototype.move = function() {</p>
<p> </p>
<p> // bounce borders</p>
<p> if (this.pos.x >= this.width - this.size) {</p>
<p> if (this.vel.x > 0) this.vel.x = -this.vel.x;</p>
<p> this.pos.x = this.width - this.size;</p>
<p> } else if (this.pos.x <= this.size) {</p>
<p> if (this.vel.x < 0) this.vel.x = -this.vel.x;</p>
<p> this.pos.x = this.size;</p>
<p> }</p>
<p> </p>
<p> if (this.pos.y >= this.height - this.size) {</p>
<p> if (this.vel.y > 0) this.vel.y = -this.vel.y;</p>
<p> this.pos.y = this.height - this.size;</p>
<p> } else if (this.pos.y <= this.size) {</p>
<p> if (this.vel.y < 0) this.vel.y = -this.vel.y;</p>
<p> this.pos.y = this.size;</p>
<p> }</p>
<p> </p>
<p> // velocity</p>
<p> this.pos = this.pos.add(this.vel);</p>
<p> </p>
<p> };</p>
<p> </p>
<p> // lavalamp constructor</p>
<p> var LavaLamp = function(width, height, numBalls, c0, c1, c2, c3) {</p>
<p> this.step = 5;</p>
<p> this.width = width;</p>
<p> this.height = height;</p>
<p> this.wh = Math.min(width, height);</p>
<p> this.sx = Math.floor(this.width / this.step);</p>
<p> this.sy = Math.floor(this.height / this.step);</p>
<p> this.paint = false;</p>
<p> this.metaFill = createRadialGradient(width, height, width, c0, c1, c2, c3);</p>
<p> this.plx = [0, 0, 1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 0, 0, 0, 0];</p>
<p> this.ply = [0, 0, 0, 0, 0, 0, 1, 0, 0, 1, 1, 1, 0, 1, 0, 1];</p>
<p> this.mscases = [0, 3, 0, 3, 1, 3, 0, 3, 2, 2, 0, 2, 1, 1, 0];</p>
<p> this.ix = [1, 0, -1, 0, 0, 1, 0, -1, -1, 0, 1, 0, 0, 1, 1, 0, 0, 0, 1, 1];</p>
<p> this.grid = [];</p>
<p> this.balls = [];</p>
<p> this.iter = 0;</p>
<p> this.sign = 1;</p>
<p> </p>
<p> // init grid</p>
<p> for (var i = 0; i < (this.sx + 2) * (this.sy + 2); i++) {</p>
<p> this.grid[i] = new Point(</p>
<p> (i % (this.sx + 2)) * this.step, (Math.floor(i / (this.sx + 2))) * this.step</p>
<p> )</p>
<p> }</p>
<p> </p>
<p> // create metaballs</p>
<p> for (var k = 0; k < numBalls; k++) {</p>
<p> this.balls[k] = new Ball(this);</p>
<p> }</p>
<p> };</p>
<p> // compute cell force</p>
<p> LavaLamp.prototype.computeForce = function(x, y, idx) {</p>
<p> </p>
<p> var force;</p>
<p> var id = idx || x + y * (this.sx + 2);</p>
<p> </p>
<p> if (x === 0 || y === 0 || x === this.sx || y === this.sy) {</p>
<p> force = 0.6 * this.sign;</p>
<p> } else {</p>
<p> force = 0;</p>
<p> var cell = this.grid[id];</p>
<p> var i = 0;</p>
<p> var ball;</p>
<p> while (ball = this.balls[i++]) {</p>
<p> force += ball.size * ball.size / (-2 * cell.x * ball.pos.x - 2 * cell.y * ball.pos.y + ball.pos.magnitude + cell.magnitude);</p>
<p> }</p>
<p> force *= this.sign</p>
<p> }</p>
<p> this.grid[id].force = force;</p>
<p> return force;</p>
<p> };</p>
<p> // compute cell</p>
<p> LavaLamp.prototype.marchingSquares = function(next) {</p>
<p> var x = next[0];</p>
<p> var y = next[1];</p>
<p> var pdir = next[2];</p>
<p> var id = x + y * (this.sx + 2);</p>
<p> if (this.grid[id].computed === this.iter) {</p>
<p> return false;</p>
<p> }</p>
<p> var dir, mscase = 0;</p>
<p> </p>
<p> // neighbors force</p>
<p> for (var i = 0; i < 4; i++) {</p>
<p> var idn = (x + this.ix[i + 12]) + (y + this.ix[i + 16]) * (this.sx + 2);</p>
<p> var force = this.grid[idn].force;</p>
<p> if ((force > 0 && this.sign < 0) || (force < 0 && this.sign > 0) || !force) {</p>
<p> // compute force if not in buffer</p>
<p> force = this.computeForce(</p>
<p> x + this.ix[i + 12],</p>
<p> y + this.ix[i + 16],</p>
<p> idn</p>
<p> );</p>
<p> }</p>
<p> if (Math.abs(force) > 1) mscase += Math.pow(2, i);</p>
<p> }</p>
<p> if (mscase === 15) {</p>
<p> // inside</p>
<p> return [x, y - 1, false];</p>
<p> } else {</p>
<p> // ambiguous cases</p>
<p> if (mscase === 5) dir = (pdir === 2) ? 3 : 1;</p>
<p> else if (mscase === 10) dir = (pdir === 3) ? 0 : 2;</p>
<p> else {</p>
<p> // lookup</p>
<p> dir = this.mscases[mscase];</p>
<p> this.grid[id].computed = this.iter;</p>
<p> }</p>
<p> // draw line</p>
<p> var ix = this.step / (</p>
<p> Math.abs(Math.abs(this.grid[(x + this.plx[4 * dir + 2]) + (y + this.ply[4 * dir + 2]) * (this.sx + 2)].force) - 1) /</p>
<p> Math.abs(Math.abs(this.grid[(x + this.plx[4 * dir + 3]) + (y + this.ply[4 * dir + 3]) * (this.sx + 2)].force) - 1) + 1</p>
<p> );</p>
<p> ctx.lineTo(</p>
<p> this.grid[(x + this.plx[4 * dir]) + (y + this.ply[4 * dir]) * (this.sx + 2)].x + this.ix[dir] * ix,</p>
<p> this.grid[(x + this.plx[4 * dir + 1]) + (y + this.ply[4 * dir + 1]) * (this.sx + 2)].y + this.ix[dir + 4] * ix</p>
<p> );</p>
<p> this.paint = true;</p>
<p> // next</p>
<p> return [</p>
<p> x + this.ix[dir + 4],</p>
<p> y + this.ix[dir + 8],</p>
<p> dir</p>
<p> ];</p>
<p> }</p>
<p> };</p>
<p> </p>
<p> LavaLamp.prototype.renderMetaballs = function() {</p>
<p> var i = 0, ball;</p>
<p> while (ball = this.balls[i++]) ball.move();</p>
<p> // reset grid</p>
<p> this.iter++;</p>
<p> this.sign = -this.sign;</p>
<p> this.paint = false;</p>
<p> ctx.fillStyle = this.metaFill;</p>
<p> ctx.beginPath();</p>
<p> // compute metaballs</p>
<p> i = 0;</p>
<p> //ctx.shadowBlur = 50;</p>
<p> //ctx.shadowColor = "green";</p>
<p> while (ball = this.balls[i++]) {</p>
<p> // first cell</p>
<p> var next = [</p>
<p> Math.round(ball.pos.x / this.step),</p>
<p> Math.round(ball.pos.y / this.step), false</p>
<p> ];</p>
<p> // marching squares</p>
<p> do {</p>
<p> next = this.marchingSquares(next);</p>
<p> } while (next);</p>
<p> // fill and close path</p>
<p> if (this.paint) {</p>
<p> ctx.fill();</p>
<p> ctx.closePath();</p>
<p> ctx.beginPath();</p>
<p> this.paint = false;</p>
<p> }</p>
<p> }</p>
<p> };</p>
<p> </p>
<p> // gradients</p>
<p> var createRadialGradient = function(w, h, r, c0, c1, c2, c3) {</p>
<p> var gradient = ctx.createRadialGradient(</p>
<p> w / 1, h / 1, 0,</p>
<p> w / 1, h / 1, r</p>
<p> );</p>
<p> gradient.addColorStop(.25, c0);</p>
<p> gradient.addColorStop(.5, c1);</p>
<p> gradient.addColorStop(.75, c2);</p>
<p> gradient.addColorStop(1, c3);</p>
<p> return gradient;</p>
<p> };</p>
<p> </p>
<p> // main loop</p>
<p> var run = function() {</p>
<p> requestAnimationFrame(run);</p>
<p> ctx.clearRect(0, 0, screen.width, screen.height);</p>
<p> lava0.renderMetaballs();</p>
<p> };</p>
<p> // canvas</p>
<p> var screen = ge1doot.screen.init("bubble", null, true),</p>
<p> ctx = screen.ctx;</p>
<p> screen.resize();</p>
<p> // create LavaLamps</p>
<p> lava0 = new LavaLamp(screen.width, screen.height, 6, "#82aefc", "#faa2f1", "#fbc6ef", "#fddcf7");</p>
<p> </p>
<p> run();</p>
<p> </p>
<p>})();</p>
<p>
댓글을 작성하려면 로그인이 필요합니다.
답변 1개
답변을 작성하려면 로그인이 필요합니다.
로그인