加算セロファン ethertank Follow 2011-02-27 08:24:15 License: MIT License Fork9 Fav18 View4484 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 63 lines HTML 1 lines CSS 7 lines ランダムな色・位置に書いた直線群を描画し、それを繰り返してます。線の太さを1pxに変えるとスクラッチ画法みたくなったりもします。逆に60pxくらいにしても綺麗。 クリックでアニメーション停止。 加算セロファン (function() { if (window.addEventListener) window.addEventListener("load", init, false); function init() { var can = document.getElementById('vision'); var flg; if (can.getContext) { var ctx = can.getContext('2d'); var cW,cH,drawTiming,bgAlpha, bgCompositeOperation,bgLineLength,bgLineWidth; cW /*canvasの幅*/ = can.width; cH /*canvasの高さ*/ = can.height; //==セッティング=================================== drawTiming /*描画タイミング(ミリ秒)*/ = 150; bgAlpha /*模様の不透明度*/ = 0.28; bgCompositeOperation /*模様の合成方法*/ = "lighter"; bgLineLength /*模様のライン本数*/= 245; bgLineWidth /*模様のラインの太さ*/= 26; //================================================ draw(); //全部描く(1フレーム) myTimer = setInterval(draw, drawTiming); //再描画 } can.addEventListener("click",stopAnime,false); function stopAnime(){ if (flg){ clearInterval(myTimer); flg = !flg; } else if (!flg) myTimer = setInterval(draw, drawTiming); //再描画 } function draw() { flg = true; ctx.clearRect(0, 0, cW, cH); ctx.globalAlpha = 1; ctx.globalCompositeOperation = 'source-over'; ctx.fillStyle = "#000"; ctx.fillRect(0, 0, cW, cH); ctx.globalAlpha = bgAlpha; ctx.globalCompositeOperation = bgCompositeOperation; ctx.lineWidth = bgLineWidth; for (i = 0; i < bgLineLength; i++) { ctx.beginPath(); var lsX = parseInt(Math.random() * cW, 10), lsY = parseInt(Math.random() * cH, 10), leX = parseInt(Math.random() * cW, 10), leY = parseInt(Math.random() * cH, 10); ctx.moveTo(lsX, lsY); var sColor = '#' + (String(Math.random().toFixed(6)).slice(2, 9)); ctx.strokeStyle = sColor; ctx.lineTo(leX, leY); ctx.stroke(); } } } })(); <canvas id="vision" width="400" height="400"></canvas> 加算セロファン body { background: #f4f0df; } #vision { border: 10px solid #fff; outline:1px solid #999; display: block; margin: 20px auto; } ランダムな色・位置に書いた直線群を描画し、それを繰り返してます。線の太さを1pxに変えるとスクラッチ画法みたくなったりもします。逆に60pxくらいにしても綺麗。 クリックでアニメーション停止。 (function() { if (window.addEventListener) window.addEventListener("load", init, false); function init() { var can = document.getElementById('vision'); var flg; if (can.getContext) { var ctx = can.getContext('2d'); var cW,cH,drawTiming,bgAlpha, bgCompositeOperation,bgLineLength,bgLineWidth; cW /*canvasの幅*/ = can.width; cH /*canvasの高さ*/ = can.height; //==セッティング=================================== drawTiming /*描画タイミング(ミリ秒)*/ = 150; bgAlpha /*模様の不透明度*/ = 0.28; bgCompositeOperation /*模様の合成方法*/ = "lighter"; bgLineLength /*模様のライン本数*/= 245; bgLineWidth /*模様のラインの太さ*/= 26; //================================================ draw(); //全部描く(1フレーム) myTimer = setInterval(draw, drawTiming); //再描画 } can.addEventListener("click",stopAnime,false); function stopAnime(){ if (flg){ clearInterval(myTimer); flg = !flg; } else if (!flg) myTimer = setInterval(draw, drawTiming); //再描画 } function draw() { flg = true; ctx.clearRect(0, 0, cW, cH); ctx.globalAlpha = 1; ctx.globalCompositeOperation = 'source-over'; ctx.fillStyle = "#000"; ctx.fillRect(0, 0, cW, cH); ctx.globalAlpha = bgAlpha; ctx.globalCompositeOperation = bgCompositeOperation; ctx.lineWidth = bgLineWidth; for (i = 0; i < bgLineLength; i++) { ctx.beginPath(); var lsX = parseInt(Math.random() * cW, 10), lsY = parseInt(Math.random() * cH, 10), leX = parseInt(Math.random() * cW, 10), leY = parseInt(Math.random() * cH, 10); ctx.moveTo(lsX, lsY); var sColor = '#' + (String(Math.random().toFixed(6)).slice(2, 9)); ctx.strokeStyle = sColor; ctx.lineTo(leX, leY); ctx.stroke(); } } } })(); <canvas id="vision" width="400" height="400"></canvas> body { background: #f4f0df; } #vision { border: 10px solid #fff; outline:1px solid #999; display: block; margin: 20px auto; } use an iframe compat browser, deer Play on jsdo.it games Author Share ブログに埋め込む QR Tag Download Complete! Description What kind of game? ランダムな色・位置に書いた直線群を描画し、それを繰り返してます。線の太さを1pxに変えるとスクラッチ画法みたくなったりもします。逆に60pxくらいにしても綺麗。 クリックでアニメーション停止。 Control Device Smartphone Controllerjsdo.it WebSocket Controller» Mouse Keyboard Touch Device Fullscreen Activated Inactivated jsdo.it games から削除する Submit Author ethertank prototype を拡張したいお年頃 Tweet Default Panel Auto play Screenshot Readme JavaScript HTML CSS Size Width: px Height: px code <script type="text/javascript" src="http://jsdo.it/blogparts/lY7r/js"></script> canvas Tweet Twitter Discussion Questions on this code? Tags HTML5 add animation art&design artistic canvas color graphics javascript きれい 加算 色 Favorite by Wong.Hin.Chi mgmgmg890 fabiodan yuki930 montcryptome nonloso7 cuddlephish paq mishimitsu_ sw_lucchini _moritam: animationartisticcanvasHTML5きれい Takayuki.Kay: animationart&designgraphicsjavascript色 Hayato.Morit: animation happi_tan1: 癒し horiuchi: add加算 tsmallfield: artistic US428: color ginpei: きれい Forked sort by latest page views favorite forked forked: 加算セロファン n.o 00 49 64/1/7 canvas colorful lines c lebedev 00 58 64/1/7 canvas forked: 加算セロファン mgmgmg890 00 118 64/1/7 canvas forked: 加算セロファン nag113km 00 87 64/1/7 canvas 1 2 3NEXT>>
