view source

JavaScript

document.title = '集中線を描く';

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 r = Math.floor(Math.random()*128)+128;
  //var g = Math.floor(Math.random()*128)+128;
  //var b = Math.floor(Math.random()*128)+128;
  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 = 'rgb(0,0,0)';
  //ctx.strokeStyle = color;
  //ctx.fillRect(0, 0, w, h);
    //360 * PI / 180
  ctx.lineWidth = 1;
  len = 999;
  for(i=0;i<len;i++){
    var rad =  i/len * 360 * Math.PI/180 ;
    var rad2 = i/len * 360 * Math.PI/180 - Math.random()/360;
    var rad3 = i/len * 360 * Math.PI/180 + Math.random()/360;
    var r = min / 4  + Math.random()*min/6;
    var r2 = min* 3/2;
    ctx.beginPath();
    ctx.moveTo(cx+Math.cos(rad)*r, cy+Math.sin(rad)*r);
    ctx.lineTo(cx+Math.cos(rad2)*r2, cy+Math.sin(rad2)*r2);
    ctx.lineTo(cx+Math.cos(rad3)*r2, cy+Math.sin(rad3)*r2);
    ctx.closePath();
    ctx.fill();
  }
}
draw();
setInterval(function(){
  t++;
  draw()
},9999);






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();
});

CSS


  
HTML

  

    
ページのソースを表示 : Ctrl+U , DevTools : F12

    
view-source:https://hi0a.com/demo/-js/js-canvas-linework/

  

  
ABOUT

  

    
hi0a.com 「ひまアプリ」は無料で遊べるミニゲームや便利ツールを公開しています。

    
プログラミング言語の動作デモやWEBデザイン、ソースコード、フロントエンド等の開発者のための技術を公開しています。

    
必要な機能の関数をコピペ利用したり勉強に活用できます。

    
プログラムの動作サンプル結果は画面上部に出力表示されています。

    
環境:最新のブラウザ GoogleChrome / Windows / Android / iPhone 等の端末で動作確認しています。

    
画像素材や音素材は半分自作でフリー素材配布サイトも利用しています。LINK参照。

    
動く便利なものが好きなだけで技術自体に興味はないのでコードは汚いです。

    
途中放置や実験状態、仕様変更、API廃止等で動かないページもあります。