jcuts
Version:
161 lines (153 loc) • 4.97 kB
HTML
<html>
<head>
<title>jcuts.js examples</title>
<script src="../src/jcuts.js"></script>
<script src="../bower_components/jmaths/jmaths.js"></script>
<script src="../bower_components/jpaths/jpaths.js"></script>
<link rel="stylesheet" type="text/css" href="fallEffect.css" >
<style>
.paper-wrap {
position: absolute;
}
.paper-wrap.p1{
top: 20px;
left: 50px;
width: 40px;
height: 40px;
}
.paper-wrap.p2{
top: 30px;
left: 150px;
width: 60px;
height: 60px;
}
.paper-wrap.p3{
top: 20px;
left: 300px;
width: 100px;
height: 100px;
}
</style>
</head>
<body><!--
<div class="paper-wrap p1 fall" id="paper-wrap-1">
<div class="rotate">
<canvas width="40" height="40" id="canvas-1"></div>
</div>
<div class="paper-wrap p2 fall" id="paper-wrap-2">
<div class="rotate-slow">
<div class="sway2d">
<canvas width="60" height="60" id="canvas-2">
</div>
</div>
</div>
<div class="paper-wrap p3 fall" id="paper-wrap-3">
<div class="sway3d">
<canvas width="100" height="100" id="canvas-3">
</div>
</div> -->
</body>
<script>
(function() {
function polygonDrop(vertex, color, container) {
var canvas = document.createElement("canvas");
var minX = Infinity;
var minY = Infinity;
var maxX = 0;
var maxY = 0;
for (var i = 0; i < vertex.length; i++) {
var point = vertex[i];
minX = (minX > point[0]) ? point[0] : minX;
minY = (minY > point[1]) ? point[1] : minY;
maxX = (maxX < point[0]) ? point[0] : maxX;
maxY = (maxY < point[1]) ? point[1] : maxY;
}
var width = maxX - minX + 1;
var height = maxY - minY + 1;
console.log('width:' + width + ", height:" + height);
canvas.width = width;
canvas.height = height;
drawPolygon(canvas, vertex, minX, minY, color);
var paperWrap = document.createElement('div');
paperWrap.className += 'paper-wrap ';
paperWrap.className += 'fall ';
var body = document.getElementsByTagName('body')[0];
if (container) {
body = container;
}
var rect = document.body.getBoundingClientRect();
var top = rect.top + minY;
var left = rect.left + minX;
paperWrap.style.width = width + "px";
paperWrap.style.height = height + "px";
paperWrap.style.top = top + "px";
paperWrap.style.left = left + "px";
console.log('top:' + top + ", left:" + left);
var area = width * height;
if (area < 1600) {
var innerWrap = document.createElement('div');
innerWrap.className += 'rotate ';
innerWrap.appendChild(canvas);
paperWrap.appendChild(innerWrap);
} else if (area > 10000) {
var innerWrap = document.createElement('div');
innerWrap.className += 'sway3d ';
innerWrap.appendChild(canvas);
paperWrap.appendChild(innerWrap);
} else {
var innerWrap = document.createElement('div');
innerWrap.className += 'rotate-slow ';
innerWrap.appendChild(canvas);
var outerWrap = document.createElement('div');
outerWrap.className += 'sway2d ';
outerWrap.appendChild(innerWrap);
paperWrap.appendChild(outerWrap);
}
body.appendChild(paperWrap);
setTimeout(function () {
body.removeChild(paperWrap);
}, 2800);
}
function drawPolygon(canvas, vertex, offsetX, offsetY, color) {
var offsetX = offsetX || 0;
var offsetY = offsetY || 0;
var context = canvas.getContext('2d');
context.beginPath();
var beginX;
var beginY;
for (var i = 0; i < vertex.length; i++) {
var point = vertex[i];
var x = point[0] - offsetX;
var y = point[1] - offsetY;
if (i === 0) {
beginX = x;
beginY = y;
context.moveTo(x, y);
} else {
context.lineTo(x, y);
}
}
context.lineTo(beginX, beginY);
context.closePath();
if (color) {
context.fillStyle = color;
}
context.fill();
// context.stroke();
}
// var canvas1 = document.getElementById('canvas-1');
// drawPolygon(canvas1, [[5, 5], [20, 7], [9, 35]]);
// var canvas2 = document.getElementById('canvas-2');
// drawPolygon(canvas2, [[5, 5], [40, 5], [12, 50]]);
// var canvas3 = document.getElementById('canvas-3');
// drawPolygon(canvas3, [[0, 0], [80, 20], [40, 100]]);
var polygon1 = [[5, 5], [43, 5], [43, 43], [5, 43]];
polygonDrop(polygon1, 'green');
var polygon2 = [[100, 20], [180, 20], [180, 100], [100, 100]];
polygonDrop(polygon2, 'red');
var polygon3 = [[300, 10], [410, 10], [410, 120], [300, 120]];
polygonDrop(polygon3, 'blue');
})();
</script>
</html>