<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body style="background:#fff;">
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r80/three.min.js"></script>
<canvas id="canvas"></canvas>
<script src="script.js"></script>
</body>
</html>
var width = window.innerWidth,
height = window.innerHeight / 2;
var size = 512;
var camera,
scene,
renderer,
geometry,
texture,
mesh;
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var rectWidth = 200;
var rectHeight = 110;
var rectX = 50;
var rectY = 130
var cornerRadius = 50;
function c0() {
canvas.width = 512;
canvas.height = 512;
ctx.fillStyle = "#0a0";
ctx.strokeStyle = "#888";
ctx.fillRect(0, 0, size, size);
}
function c1() {
ctx.save()
ctx.beginPath();
ctx.moveTo(rectX - cornerRadius * .15, rectY);
ctx.lineTo(rectX + rectWidth - cornerRadius, rectY);
ctx.arcTo(rectX + rectWidth, rectY, rectX + rectWidth, rectY + cornerRadius, cornerRadius);
ctx.lineTo(rectX + rectWidth, rectY + rectHeight);
ctx.arcTo(rectX + rectWidth, rectY + cornerRadius + rectHeight, rectX, rectY + rectHeight + cornerRadius, cornerRadius);
ctx.arcTo(rectX, rectY + cornerRadius, rectX, rectY + cornerRadius + rectHeight, cornerRadius);
ctx.arcTo(rectX, rectY + cornerRadius * 2 + rectHeight * 2, rectX + rectWidth * 2, rectY + cornerRadius + rectHeight * 2, cornerRadius);
ctx.lineTo(rectX + rectWidth + cornerRadius, rectY + cornerRadius * 1.85 + rectHeight * 2);
ctx.arcTo(rectX + rectWidth * 2, rectY + cornerRadius * 1.85 + rectHeight * 2, rectX + rectWidth * 2, rectY, cornerRadius);
ctx.arcTo(rectX + rectWidth * 2, rectY + rectHeight, rectX-rectWidth, rectY, cornerRadius);
ctx.arcTo(rectX + rectWidth * 1.5, rectY + rectHeight, rectX+ rectWidth, rectY - rectHeight, cornerRadius);
ctx.arcTo(rectX + rectWidth, rectY - rectHeight, rectX, rectY, cornerRadius);
ctx.lineTo(rectX + cornerRadius * .25, rectY - cornerRadius * .85);
ctx.arcTo(rectX - cornerRadius * .25, rectY - cornerRadius * .25, rectX, rectY, cornerRadius / 2);
ctx.strokeStyle = "#f00"
ctx.lineWidth = 40;
ctx.stroke();
ctx.restore()
}
function c2() {
ctx.save()
ctx.beginPath();
ctx.moveTo(rectX - cornerRadius * .15, rectY);
ctx.lineTo(rectX + rectWidth - cornerRadius, rectY);
ctx.arcTo(rectX + rectWidth, rectY, rectX + rectWidth, rectY + cornerRadius, cornerRadius);
ctx.lineTo(rectX + rectWidth, rectY + rectHeight);
ctx.arcTo(rectX + rectWidth, rectY + cornerRadius + rectHeight, rectX, rectY + rectHeight + cornerRadius, cornerRadius);
ctx.arcTo(rectX, rectY + cornerRadius, rectX, rectY + cornerRadius + rectHeight, cornerRadius);
ctx.arcTo(rectX, rectY + cornerRadius * 2 + rectHeight * 2, rectX + rectWidth * 2, rectY + cornerRadius + rectHeight * 2, cornerRadius);
ctx.lineTo(rectX + rectWidth + cornerRadius, rectY + cornerRadius * 1.85 + rectHeight * 2);
ctx.arcTo(rectX + rectWidth * 2, rectY + cornerRadius * 1.85 + rectHeight * 2, rectX + rectWidth * 2, rectY, cornerRadius);
ctx.arcTo(rectX + rectWidth * 2, rectY + rectHeight, rectX - rectWidth,rectY, cornerRadius);
ctx.arcTo(rectX + rectWidth * 1.5, rectY + rectHeight, rectX + rectWidth, rectY - rectHeight, cornerRadius);
ctx.arcTo(rectX + rectWidth, rectY - rectHeight, rectX, rectY, cornerRadius);
ctx.lineTo(rectX + cornerRadius * .25, rectY - cornerRadius * .85);
ctx.arcTo(rectX - cornerRadius * .25, rectY - cornerRadius * .25, rectX, rectY, cornerRadius / 2);
ctx.lineWidth = 39;
ctx.stroke();
ctx.restore()
}
function c3() {
ctx.save()
ctx.beginPath();
ctx.moveTo(rectX - cornerRadius * .15, rectY);
ctx.lineTo(rectX + rectWidth - cornerRadius, rectY);
ctx.arcTo(rectX + rectWidth, rectY,rectX + rectWidth, rectY + cornerRadius, cornerRadius);
ctx.lineTo(rectX + rectWidth, rectY + rectHeight);
ctx.arcTo(rectX + rectWidth, rectY + cornerRadius + rectHeight, rectX, rectY + rectHeight + cornerRadius, cornerRadius);
ctx.arcTo(rectX, rectY + cornerRadius, rectX ,rectY + cornerRadius + rectHeight, cornerRadius);
ctx.arcTo(rectX, rectY + cornerRadius * 2 + rectHeight * 2,rectX + rectWidth * 2, rectY + cornerRadius + rectHeight * 2, cornerRadius);
ctx.lineTo(rectX + rectWidth + cornerRadius, rectY + cornerRadius * 1.85 + rectHeight * 2);
ctx.arcTo(rectX + rectWidth * 2,rectY + cornerRadius * 1.85 + rectHeight * 2, rectX + rectWidth * 2, rectY, cornerRadius);
ctx.arcTo(rectX + rectWidth * 2, rectY +rectHeight, rectX - rectWidth, rectY, cornerRadius);
ctx.arcTo(rectX + rectWidth * 1.5, rectY+rectHeight, rectX + rectWidth, rectY - rectHeight, cornerRadius);
ctx.arcTo(rectX + rectWidth,rectY - rectHeight, rectX, rectY, cornerRadius);
ctx.lineTo(rectX + cornerRadius * .25, rectY - cornerRadius * .85);
ctx.arcTo(rectX - cornerRadius * .25, rectY - cornerRadius * .25, rectX, rectY, cornerRadius / 2);
ctx.strokeStyle = "yellow"
ctx.lineWidth = 3;
ctx.stroke();
ctx.restore()
}
function c4() {
ctx.save()
ctx.beginPath();
ctx.moveTo(rectX - cornerRadius * .15, rectY);
ctx.lineTo(rectX + rectWidth - cornerRadius, rectY);
ctx.arcTo(rectX + rectWidth, rectY, rectX + rectWidth, rectY + cornerRadius, cornerRadius);
ctx.lineTo(rectX + rectWidth, rectY + rectHeight);
ctx.arcTo(rectX + rectWidth, rectY + cornerRadius + rectHeight, rectX , rectY + rectHeight + cornerRadius, cornerRadius);
ctx.arcTo(rectX, rectY + cornerRadius, rectX ,rectY + cornerRadius + rectHeight, cornerRadius);
ctx.arcTo(rectX, rectY + cornerRadius * 2 + rectHeight * 2, rectX + rectWidth * 2, rectY + cornerRadius + rectHeight * 2, cornerRadius);
ctx.lineTo(rectX + rectWidth + cornerRadius, rectY+cornerRadius * 1.85 + rectHeight * 2);
ctx.arcTo(rectX + rectWidth * 2, rectY+cornerRadius * 1.85 + rectHeight * 2, rectX + rectWidth * 2, rectY ,cornerRadius);
ctx.arcTo(rectX + rectWidth * 2, rectY + rectHeight, rectX - rectWidth, rectY, cornerRadius);
ctx.arcTo(rectX + rectWidth * 1.5, rectY + rectHeight, rectX + rectWidth, rectY - rectHeight, cornerRadius);
ctx.arcTo(rectX + rectWidth, rectY - rectHeight, rectX, rectY, cornerRadius);
ctx.lineTo(rectX + cornerRadius * .25, rectY - cornerRadius * .85);
ctx.arcTo(rectX - cornerRadius * .25, rectY - cornerRadius * .25, rectX, rectY, cornerRadius / 2);
ctx.strokeStyle = "#888"
ctx.lineWidth = 2;
ctx.stroke();
}
function c5() {
var sx = 150;
var sy = 20;
ctx.save()
ctx.beginPath();
ctx.moveTo(rectX + sx, 314 + rectY - sy);
ctx.lineTo(rectX + sx, 314 + rectY + sy);
ctx.strokeStyle = "#f00"
ctx.lineWidth = 2;
ctx.stroke();
ctx.restore()
ctx.save()
ctx.beginPath();
ctx.fillStyle = "#fff"
ctx.fillRect(rectX + sx - 1, 314 + rectY - sy, 1, 5)
ctx.fillRect(rectX + sx, 314 + rectY - sy + 5, 1, 5)
ctx.fillRect(rectX + sx - 1, 314 + rectY - sy + 10, 1, 5)
ctx.fillRect(rectX + sx, 314 + rectY - sy + 15, 1, 5)
ctx.fillRect(rectX + sx - 1, 314 + rectY, 1, 5)
ctx.fillRect(rectX + sx, 314 + rectY + sy - 15 , 1, 5)
ctx.fillRect(rectX + sx - 1, 314 + rectY + sy - 10, 1, 5)
ctx.fillRect(rectX + sx, 314 + rectY + sy - 5, 1, 5)
ctx.stroke();
ctx.restore()
}
function changeCanvas() {
ctx.font = '20pt Arial';
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = 'white';
ctx.fillRect(10, 10, canvas.width - 20, canvas.height - 20);
ctx.fillStyle = 'black';
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillText(new Date().getTime(), canvas.width / 2, canvas.height / 2);
}
function init() {
canvas.width = canvas.height = size;
c0();
c1();
c2();
c3();
c4();
c5();
renderer = new THREE.WebGLRenderer();
renderer.setSize(width, height);
document.body.appendChild(renderer.domElement);
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera(70, width / height, 1, 1000);
camera.position.z = 500;
scene.add(camera);
texture = new THREE.Texture(canvas);
var material = new THREE.MeshBasicMaterial({
map: texture
});
geometry = new THREE.BoxGeometry(200, 200, 200);
mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);
}
function animate() {
requestAnimationFrame(animate);
//changeCanvas();
texture.needsUpdate = true;
mesh.rotation.y += 0.01;
renderer.render(scene, camera);
}
init();
animate();
/* Styles go here */