[ Обновленные темы · Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Форум » О uCoz » Скрипты » Новогодняя елка на HTML5 canvas
Новогодняя елка на HTML5 canvas
Дата: Суббота, 08.11.2014, 16:33:33 | Сообщение # 1
Группа: Проверенные Титул: Технарь Сообщений: 283
Награды: 1
Репутация: 3
Статус:
Сайт пользователя:
Skype пользователя:

Очень красивая елка выполненная на HTML5 canvas

Ну и как подобает для начала смотрим мой тест на Фидле

В CSS прописываем:
Код
#treecanvas {
     background: #000;
     width:430px;
}


Теперь в том месте где хотите видеть елочку вставляем:
Код
<canvas id="treecanvas"></canvas>


И сразу после, пишем скрипт:
Код
<script>
if (typeof requestAnimationFrame != 'function') {
  ['moz', 'webkit', 'ms'].some(function (p) {
  var f = this[p + 'RequestAnimationFrame']
  return typeof f == 'function' ? (requestAnimationFrame = f) : false
  }) || (requestAnimationFrame = function (f) {
  return setTimeout(f, 0)
  }) /* jshint -W030 */
}

(function (canvas) {
  /* Settings */
  var thetaEnd = 6 * Math.PI,
  lineSpacing = 1 / 30,
  lineLength = 0.5 * lineSpacing,
  rate = 1 / (2 * Math.PI),
  factor = rate / 3,
  cycle = 200,
  scene = [],
  /* Rendering */
  offsetX = 250,
  offsetY = 300,
  scaleX = 400,
  scaleY = 400,
  camX = 0,
  camY = 2,
  camZ = -Math.PI,
  cSize = 500,
  c = document.getElementById('treecanvas').getContext('2d')

  canvas.width = canvas.height = cSize
  c.lineWidth = 1.44

  scene.push(new Coil({
  color: '255,0,0',
  theta0: Math.PI
  }))
  scene.push(new Coil({
  color: '100,200,255',
  theta0: Math.PI / 3
  }))
  scene.push(new Coil({
  color: '200,255,100',
  theta0: -Math.PI / 3
  }))

  requestAnimationFrame(paint)

  function paint() {
  var offset = 1 - Date.now() / cycle % 1,
  i = 0
  requestAnimationFrame(paint)
  c.clearRect(0, 0, cSize, cSize)
  for (; i < scene.length; ++i)
  scene[i].paint(offset)
  }

  function project(point) {
  return [offsetX + scaleX * (point[0] - camX) / -(point[2] + camZ),
  offsetY + scaleY * (point[1] - camY) / -(point[2] + camZ)]
  }

  function clamp(val, a, b) {
  return (val < a) ? a : (val > b) ? b : val
  }

  function pow3(a) {
  return a * a * a
  }

  function Coil(options) {
  this.color = options.color || '255,255,255'
  this.theta0 = options.theta0 || 0
  this.lineSpacing = options.lineSpacing || lineSpacing
  this.lineLength = options.lineLength || lineLength
  this.rate = options.rate || rate
  this.factor = options.factor || factor
  this.cache = {}
  }

  Coil.prototype.paint = function (offset) {
  var cache = this.cache[offset] || (this.cache[offset] = this.compute(offset))

  /* Rendering-1 */
  cache[0].forEach(function (b) {
  c.beginPath()
  c.moveTo(b[0], b[1])
  c.lineTo(b[2], b[3])
  c.strokeStyle = 'rgba(' + this.color + ',' + b[4] + ')'
  c.stroke()
  }, this)

  /* Rendering-2 */
  c.beginPath()
  cache[1].forEach(function (b) {
  c.moveTo(b[0], b[1])
  c.lineTo(b[2], b[3])
  })
  c.strokeStyle = 'rgb(' + this.color + ')'
  c.stroke()
  }

  Coil.prototype.compute = function (offset) {
  var theta = this.thetaDif(0, offset * this.lineSpacing),
  begin, end, cache0 = [],
  cache1 = [],
  i = 0
  for (; theta < thetaEnd; theta += this.thetaDif(theta, this.lineSpacing)) {
  begin = this.getPoint(theta)
  end = this.getPoint(theta + this.thetaDif(theta, this.lineLength))
  this.line(begin, end, cache0, cache1)
  }
  return [cache0, cache1]
  }

  Coil.prototype.thetaDif = function (theta, length) {
  return length / Math.sqrt(this.rate * this.rate + this.factor * this.factor * theta * theta)
  }

  Coil.prototype.getPoint = function (theta) {
  return [theta * this.factor * Math.cos(this.theta0 + theta),
  theta * this.rate,
  theta * this.factor * Math.sin(this.theta0 + theta)]
  }

  Coil.prototype.line = function (begin, end, cache0, cache1) {
  var opacity = 0.24 + 0.76 * pow3(clamp(0.96 + 5.56 * begin[2], 0, 1))
  begin = project(begin)
  end = project(end)
  if (opacity == 1) cache1.push([begin[0], begin[1], end[0], end[1]])
  else cache0.push([begin[0], begin[1], end[0], end[1], opacity])
  }

  /* Warm up */
  scene.forEach(function (obj) {
  var offset, i = 0
  for (; i < 200; ++i) {
  offset = 1 - i / cycle % 1
  obj.cache[offset] = obj.compute(offset)
  }
  })
}(document.getElementsByTagName('canvas')[0]))
</script>


Всё, наша елочка установлена!

Материал подготовил: Andrey
Прикрепления: 8080051.png(15.2 Kb)
Форум » О uCoz » Скрипты » Новогодняя елка на HTML5 canvas
  • Страница 1 из 1
  • 1
Поиск: