Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 9004

単純なコードで作るCanvas要素を使ったデジタルアート 作業おばけ

$
0
0

<!doctype html><html><head><metacharset="utf-8"><title>作業おばけ</title><style>html,body{height:100%;margin:0;overflow:hidden;width:100%;}#wrap{height:100%;width:100%;}#canvas{display:block;}</style></head><body><divid="wrap"><canvasid="canvas"></canvas></div><script>(function(){varcanvas=document.getElementById('canvas');varcontainer=document.getElementById('wrap');sizing();functionsizing(){canvas.height=container.offsetHeight;canvas.width=container.offsetWidth;}window.addEventListener('resize',function(){(!window.requestAnimationFrame)?setTimeout(sizing,300):window.requestAnimationFrame(sizing);});})();constcanvas=document.getElementById('canvas');constctx=canvas.getContext('2d');letx=0;lety=0;leta=0;letcenter=500;letradius=300;functiondraw(){letrandomColor="#"+Math.floor(Math.random()*16777215).toString(16);x+=1;a++;x=center+Math.sin(a)*radius;y=center+Math.cos(a)*radius;ctx.beginPath();ctx.arc(x,y,100,0,Math.PI*2,true);ctx.strokeStyle=randomColor;ctx.stroke();}setInterval(draw,16.7);</script></body></html>

意外といい具合にできたと思います。

ぜひ、皆さんもこのコードを実行してみてください。

実行した後、放置すればするほどいい感じになってきます笑

作業おばけのWEBサイト https://www.o--o.cf/


Viewing all articles
Browse latest Browse all 9004

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>