JSFiddle - React, Tailwind, and code Playground

by artwl

HTML

<img src="http://fe.baidu.com/~durongjian/cake.png" alt="" />
<canvas id="c"></canvas>

CSS

body {
    margin:0;
    padding:0;
    height:100%;
    position:relative;
}
img,canvas{
    position:absolute;
    left:0;
    top:0;
}
canvas {
    z-index:10;
}

JavaScript

var requestAnimation = (function () {
    return window.requestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || window.webkitRequestAnimationFrame || function (callback) {
        var start, finish;
        var self = this;
        window.setTimeout(function () {
            start = +new Date();
            callback(start);
            finish = +new Date();
            self.timeout = 16 - (finish - start);
        }, self.timeout);
    }
})();

var utils = {
    getRandom: function (min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
    }
};

var canvas = document.getElementById('c');
if (!canvas.getContext) {
    return;
}
var ctx = canvas.getContext('2d'),
    width = 794,
    height = 577,
    cutCake = null,
    lineWidth = 5,
    lineLength = 20,
    cakeCount = 3,
    backgroundColor = 'rgba(0, 0, 0, 0)';

canvas.width = width;
canvas.height = height;
canvas.style.backgroundColor = backgroundColor;

function draw() {
    if (cutCake) {
        cutCake.run();
    } else {
        cutCake = new CutCake();
        cutCake.init();
    }
    requestAnimation(draw);
}

function CutCake() {
    this.cakes = [];
    this.line = null;
}

CutCake.prototype = {
    run: function() {
        ctx.clearRect(0, 0, width, height);
        for (var i = 0, j = this.cakes.length; i < j; i++) {
            this.cakes[i].drawCake();
        }
        this.line.drawLine();
    },
    init: function() {
        this.cakes.length = 0;
        for (var i = 0; i < cakeCount; i++) {
            var cake = new Cake();
            cake.init();
            this.cakes.push(cake);
        }
        this.line = new Line();
        this.line.init();
    }
}

function Line(){
    this.beginX = -1;
    this.beginY = -1;
    this.currX = -1;
    this.currY = -1;
    this.points = [];
}

Line.prototype = {
    bindEvent: function() {
        var _this = this;
        var device =...