document.title = 'グシャグシャの線ノイズを描く canvas';
var style = document.createElement('style');
style.innerText = 'html,body{overflow:hidden;cursor:none;}';
document.getElementsByTagName('head').item(0).appendChild(style);
var canvas = document.createElement('canvas');
var w = document.body.clientWidth;
var h = document.body.clientHeight;
var min = Math.min(w,h);
canvas.setAttribute('width',w);
canvas.setAttribute('height',h);
let demo = document.getElementById('demo');
demo.appendChild(canvas);
var ctx = canvas.getContext('2d');
var cx = w/2;
var cy = h/2;
var t = 0;
var bgcolor = '#fff';
var color = '#000';
var lw = 2;
function getRandomColor(){
var ch = Math.floor(Math.random()*360);
var color = 'hsl('+ch+',100%,50%)';
return color;
}
function setRandom(){
bgcolor = getRandomColor();
color = getRandomColor();
lw = Math.random()*8+1;
}
function draw() {
ctx.clearRect(0, 0, w, h);
ctx.fillStyle = bgcolor;
ctx.fillRect(0, 0, w, h);
ctx.strokeStyle = color;
ctx.lineWidth = 1;
len = 1999;
for(i=0;i<len;i++){
var rad = i/len * 360 * Math.PI/180 ;
var rad2 = i/len * 360 * Math.PI/180 + 180 * Math.PI/180 - Math.random();
var r = min * 3/2;
ctx.beginPath();
ctx.moveTo(cx+Math.cos(rad)*r, cy+Math.sin(rad)*r);
ctx.lineTo(cx+Math.cos(rad2)*r, cy+Math.sin(rad2)*r);
ctx.closePath();
ctx.stroke();
}
}
draw();
setInterval(function(){
t++;
draw()
},99);
document.oncontextmenu = function () {return false;}
function resize() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
console.table({w:canvas.width, h:canvas.height});
w = document.body.clientWidth;
h = document.body.clientHeight;
cx = w/2;
cy = h/2;
}
window.onresize = resize;
window.addEventListener('click', function() {
draw();
resize();
document.body.requestFullscreen();
}, false );
window.addEventListener('dblclick', function() {
setRandom();
}, false );
document.addEventListener('fullscreenchange',function(e){
resize();
});