Checkboxes mrdoob Follow 2010-06-20 02:30:41 License: MIT License Fork6 Fav16 View2642 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 104 lines HTML 0 lines CSS 7 lines Checkboxes var container, element, elements = [], elementWidth, elementHeight, canvasWidth, canvasHeight, graphics, PI2 = Math.PI * 2, size = 10, sizeHalf = size / 2, direction = 1, speed = 0.2, positionX = size / 2, i = 0; init(); createGrid(); setInterval(loop, 1000/60); function init() { container = document.createElement('div'); document.body.appendChild(container); while( i < 2) { elements[i] = document.createElement('input'); elements[i].type = 'checkbox'; container.appendChild(elements[i]); i++; } elementWidth = elements[1].offsetLeft - elements[0].offsetLeft; elements[1].style.display = 'block'; elementHeight = elements[1].offsetTop - elements[0].offsetTop; elements[1].style.display = 'inline'; } function createGrid() { canvasWidth = Math.floor( window.innerWidth / elementWidth ); canvasHeight = Math.floor( window.innerHeight / elementHeight ); if (elements.length < canvasWidth * canvasHeight) { while( i < canvasWidth * canvasHeight) { element = elements[i] = document.createElement("input"); element.type = "checkbox"; container.appendChild(element); i++; } } var buffer = document.createElement("canvas"); buffer.width = canvasWidth; buffer.height = canvasHeight; buffer.style.position = "absolute"; buffer.style.top = "0px"; buffer.style.left = "0px"; // container.appendChild(buffer); graphics = buffer.getContext("2d"); } function loop() { // animation graphics.fillStyle = "#000000"; graphics.fillRect (0, 0, canvasWidth, canvasHeight); graphics.fillStyle = "#ff0000"; graphics.beginPath(); graphics.arc(positionX, (canvasHeight - sizeHalf) - Math.abs( Math.cos(new Date() * 0.001) * (canvasHeight - size) ), sizeHalf, 0, PI2, true); graphics.closePath(); graphics.fill(); positionX += direction * speed; if (positionX > canvasWidth - sizeHalf) direction = -1; else if (positionX < sizeHalf) direction = 1; // rendering var data = graphics.getImageData(0, 0, canvasWidth, canvasHeight).data; for (var i = 0; i < canvasWidth * canvasHeight; i ++) { element = elements[i]; element.checked = data[i * 4] > 0; } } Checkboxes body { background-color: #ffffff; margin: 0px; overflow: hidden; } var container, element, elements = [], elementWidth, elementHeight, canvasWidth, canvasHeight, graphics, PI2 = Math.PI * 2, size = 10, sizeHalf = size / 2, direction = 1, speed = 0.2, positionX = size / 2, i = 0; init(); createGrid(); setInterval(loop, 1000/60); function init() { container = document.createElement('div'); document.body.appendChild(container); while( i < 2) { elements[i] = document.createElement('input'); elements[i].type = 'checkbox'; container.appendChild(elements[i]); i++; } elementWidth = elements[1].offsetLeft - elements[0].offsetLeft; elements[1].style.display = 'block'; elementHeight = elements[1].offsetTop - elements[0].offsetTop; elements[1].style.display = 'inline'; } function createGrid() { canvasWidth = Math.floor( window.innerWidth / elementWidth ); canvasHeight = Math.floor( window.innerHeight / elementHeight ); if (elements.length < canvasWidth * canvasHeight) { while( i < canvasWidth * canvasHeight) { element = elements[i] = document.createElement("input"); element.type = "checkbox"; container.appendChild(element); i++; } } var buffer = document.createElement("canvas"); buffer.width = canvasWidth; buffer.height = canvasHeight; buffer.style.position = "absolute"; buffer.style.top = "0px"; buffer.style.left = "0px"; // container.appendChild(buffer); graphics = buffer.getContext("2d"); } function loop() { // animation graphics.fillStyle = "#000000"; graphics.fillRect (0, 0, canvasWidth, canvasHeight); graphics.fillStyle = "#ff0000"; graphics.beginPath(); graphics.arc(positionX, (canvasHeight - sizeHalf) - Math.abs( Math.cos(new Date() * 0.001) * (canvasHeight - size) ), sizeHalf, 0, PI2, true); graphics.closePath(); graphics.fill(); positionX += direction * speed; if (positionX > canvasWidth - sizeHalf) direction = -1; else if (positionX < sizeHalf) direction = 1; // rendering var data = graphics.getImageData(0, 0, canvasWidth, canvasHeight).data; for (var i = 0; i < canvasWidth * canvasHeight; i ++) { element = elements[i]; element.checked = data[i * 4] > 0; } } body { background-color: #ffffff; margin: 0px; overflow: hidden; } use an iframe compat browser, deer Tweet QR code Embed Design view Code view <script type="text/javascript" src="http://jsdo.it/blogparts/w3VX/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/mrdoob/w3VX" title="Checkboxes">Checkboxes - jsdo.it - share JavaScript, HTML5 and CSS</a></p> zip tags Tweet twitter Favorite by timothyqd PESakaTFM black fingaholic nanlow tkinjo gakkaridesu vesperworks coppieee xxxYukihirox.. 9re 5509 marumushi nyamogera: なんか衝撃的だった。 paq: Forkしていろんなことが出来そう。 clockmaker: チェックボックスでグラフィック Forked sort new page view favorite forked forked: Checkboxes kururittu 00 34views 105/1/7 forked from: Checkboxes black 00 108views 105/1/7 forked from: Checkboxes Jorge.De.La... 00 235views 105/1/8 forked from: Checkboxes akouo_jg 00 217views 106/1/7 1 2NEXT>>