canvas弯路

下载代码

html

css

分享到微信朋友圈

html

css

JavaScript

window.requestAnimFrame = (function() {
  return window.requestAnimationFrame ||
    window.webkitRequestAnimationFrame ||
    window.mozRequestAnimationFrame ||
    window.oRequestAnimationFrame ||
    window.msRequestAnimationFrame ||
    function(callback) {
      window.setTimeout(callback, 1000 / 60);
    };
})();
var c, $;
var balls, planks;
var fps = 30;

function go(start) {
  c = document.getElementById("canv");
  $ = c.getContext("2d");
  c.width = window.innerWidth;
  c.height = window.innerHeight;
  $.lineWidth = 10;
  balls = new Balls();
  planks = new Plank();
  if (start) {
    draw();
  }
}

function draw() {
  $.fillStyle = 'hsla(252, 95%, 85%, 1)';
  $.fillRect(0, 0, c.width, c.height);
  var t = "Detour".split("").join(String.fromCharCode(0x2004));
  $.font = "5em Poiret One";
  $.fillStyle = 'hsla(213, 95%, 15%, 1)';
  $.fillText(t, c.width / 2 - 180, c.height / 2);
  var t2 = "拖动绘制轨迹";
  $.font = "2em Poiret One";
  $.fillStyle = 'hsla(213, 95%, 15%, 1)';
  $.fillText(t2, c.width / 2 - 180, c.height / 2 + 100);
  balls.fr(balls, $, planks);
  planks.draw(planks, $);
  window.requestAnimFrame(draw);
}

function random(min, max) {
  return Math.random() * (max - min) + min;
};

this.bounds = function(it) {
    var left = it.sx > it.ex ? it.ex : it.sx;
    var right = it.sx > it.ex ? it.sx : it.ex;
    var top = it.sy > it.ey ? it.ey : it.sy;
    var bottom = it.sy > it.ey ? it.sy : it.ey;
    return [left, top, right, bottom];
  }
  this.draw = function(it, $) {
    $.strokeStyle = it.col;
    $.shadowColor = 'hsla(0,0%,0%,.3)';
    $.shadowBlur = 55;
    $.shadowOffsetX = 10;
    $.shadowOffsetY = 10;
    $.beginPath();
    $.moveTo(it.sx, it.sy);
    $.lineTo(it.ex, it.ey);
    $.closePath();
    $.stroke();
  }
  this.checked = function(it) {
    return Math.sqrt(Math.pow(it.ex - it.sx, 2) + Math.pow(it.ey - it.sy, 2)) > Line.min;
  }
}
Line.min = 50;
var Plank = function() {

this.planks = [];
  this.curr = null;
  this.size = function(it) {
    return it.planks.length;
  }
  this.draw = function(it, $) {

window.addEventListener("mousedown", msdn, false);
window.addEventListener("mouseup", msup, true);
window.addEventListener("mousemove", roll, true);
window.addEventListener("resize", resize, false);

function msdn(e) {
  planks.start(planks, e.x + window.pageXOffset, e.y + window.pageYOffset);
}

function msup(e) {
  planks.fin(planks, e.x + window.pageXOffset, e.y + window.pageYOffset);
}

function roll(e) {
  planks.roll(planks, e.x + window.pageXOffset, e.y + window.pageYOffset);
}

function resize() {
  c.width = w = window.innerWidth;
  c.height = h = window.innerHeight;
  c.style.position = 'absolute';
  c.style.left = (window.innerWidth - w) *
    .01 + 'px';
  c.style.top = (window.innerHeight - h) *
    .01 + 'px';
  go();
};

go(true);

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg