document.title = 'こちらをみつめる眼球 つぶらな瞳';

var style = document.createElement('style');
style.innerText = 'html,body{overflow:hidden;cursor:crosshair}';
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 cm = min/2;
var t = 0;
var max = 128;

var isMouseDown = false;
var x=cx;
var y=cy;
var thickness = min/48;
var color = '#000';
var color2 = '#6B8F89';

canvas.addEventListener('mousemove', mouseMove);
canvas.addEventListener('mousedown', mouseDown);
canvas.addEventListener('mouseup', mouseUp);
canvas.addEventListener('click', mouseMove);
canvas.addEventListener('touchstart', mouseDown);
canvas.addEventListener('touchmove', mouseMove);

function drawNoize() {
  ctx.clearRect(0, 0, w, h);
  var iw = w/max;
  var ih = h/max;
  for(i=0;i<max;i++){
    for(j=0;j<max;j++){
      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%)';
      //var color = 'rgb('+r+','+g+','+b+')';
      ctx.fillStyle = color;
      ctx.fillRect(i*iw, j*ih, iw, ih);
    }
  }
}

//ctx.fillStyle = '#000';
//ctx.fillRect(0, 0, w, h);
setInterval(function(){
  //draw();
  drawEye();
},9);

  function evTouch(ee){
    var e = ee;
    var ex;
    var ey;

    if(e.touches){
      var touch = e.touches[0] || e.changedTouches[0];
      ex = touch.clientX;
      ey = touch.clientY;
    } else {
      ex = e.offsetX;
      ey = e.offsetY;
    }
    var x = ex;
    var y = ey;
    return {x:x,y:y};
  }
  function mouseDown(e) {
    isMouseDown = true;
    var ee = evTouch(e);
    x = ee.x;
    y = ee.y;
    thickness = min/12;
  }
  function mouseUp(e) {
    isMouseDown = false;
    var zz = evTouch(e);
    var ee = {x:x, y:y};
    thickness = min/48;
  }

  function mouseMove(e) {
    var ee = evTouch(e);
    x = ee.x;
    y = ee.y;
    //drawSplayX(e);
  }

  function drawSplay(e){
    var l = Math.floor(Math.random() * 8)+1;
    for(i=0;i<l;i++){
      drawSplayX(e);
    }
  }
  function drawEye(e) {

    var r = cx/3;
    var r2 = cx/12;

    ctx.fillStyle = '#F4DAC0';
    ctx.fillRect(0, 0, w, h);

    ctx.beginPath();

    ctx.fillStyle = '#ffffff';
    ctx.arc(cx, cy, cx*15/16, 0, Math.PI*2, false);
    ctx.fill();

    ctx.fillRect(0, 0, w, h);
    ctx.fillStyle = '#ffffff';
    ctx.fill();

    //ctx.fillStyle = color;
    //ctx.fillRect(0, 0, w, h);
    //ctx.fillStyle = '#fff';
    //radgradient = ctx.createRadialGradient(cx, cy, 0, cx, cy, cx);
    //radgradient.addColorStop(0, '#ffffff');
    //radgradient.addColorStop(1, '#cccccc');
    //ctx.fillStyle = radgradient;

    var dx = cx  + (x - cx) /2;
    var dy = cy + (y - cy) /2;
    var dx2 = cx  + (x - cx) * 2/3;
    var dy2 = cy + (y - cy) *2/3;
    //眼球
    radgradient = ctx.createRadialGradient(cx, cy, 0, cx, cy, r);
    radgradient.addColorStop(0, '#6B8F89');
    radgradient.addColorStop(1, '#000000');
    ctx.fillStyle = radgradient;

    ctx.beginPath();
    ctx.arc(dx, dy, r, 0, Math.PI*2, false);
    ctx.fill();
    ctx.beginPath();
    ctx.fillStyle = color;
    ctx.arc(dx2, dy2, r2, 0, Math.PI*2, false);
    ctx.fill();

    ctx.beginPath();
    ctx.fillStyle = 'rgba(255,255,255,0.8)';
    ctx.arc(dx2, dy2, r2/16, 0, Math.PI*2, false);
    ctx.fill();

    
    len = 180;
    ctx.lineWidth = 0.5;
    for(i=0;i<len;i++){
      var rad =  i/len * 360 * Math.PI/180 ;
      ctx.beginPath();
      ctx.moveTo(dx2+Math.cos(rad)*(r+r2)/8, dy2+Math.sin(rad)*(r+r2)/8);
      ctx.lineTo(dx+Math.cos(rad)*r, dy+Math.sin(rad)*r);
      ctx.closePath();
      ctx.stroke();
    }
    ctx.fillStyle = 'rgba(255,255,255,0.5)';
    ctx.arc(dx2+r*2/3, dy2-r*2/4, r2*2/4, 0, Math.PI*2, false);
    ctx.fill();


    //目の外側
    ctx.fillStyle = '#000';
    ctx.strokeStyle = '#000';
    ctx.beginPath();
    ctx.moveTo(0,cy);
    //ctx.quadraticCurveTo(cx, -cy, cx*2, cy);
    ctx.quadraticCurveTo(cx, cy-cx, cx*2, cy);
    ctx.lineTo(w, 0);
    ctx.lineTo(0, 0);
    ctx.closePath();
    ctx.fill();

    ctx.beginPath();
    ctx.moveTo(w,cy);
    //ctx.quadraticCurveTo(cx, cy*3, 0, cy);
    ctx.quadraticCurveTo(cx, cy+cx, 0, cy);
    ctx.lineTo(0, h);
    ctx.lineTo(w, h);
    ctx.closePath();
    ctx.fill();
    ctx.stroke();


  }

  function drawStar(cx,cy,r,vertex,color,rnd){
    ctx.beginPath();
    ctx.fillStyle = color || '#000';
    var rnd = rnd || Math.random();
    var addDegree = Math.floor(rnd*360);
    var addRadian = addDegree * ( Math.PI / 180 ) ;
    for(var i=0;i<vertex;i++){
      var rad = Math.PI*2/vertex*i + addRadian;
      var rr = r;
      if(i%2===0){rr=r/2}
      var x = cx + Math.cos(rad)*rr;
      var y = cy + Math.sin(rad)*rr;
      if(i===0){
        ctx.moveTo(x,y);
      } else {
        ctx.lineTo(x,y);
      }
    }
    //ctx.stroke();
    ctx.fill();
  }
  function drawSplayX(e) {
    color = '#ffff00';
    //console.log({x:x,y:y,mode:mode});
    //var crx = (Math.random() + Math.random() + Math.random() + Math.random())/4;
    //var cry = (Math.random() + Math.random() + Math.random() + Math.random())/4;
    var rr = (Math.random() * Math.random()) * thickness * 2/3;
    var rLen = (Math.random() * Math.random()) * thickness*4;
    var rRad = Math.random() * Math.PI *2;
    var rx = Math.cos(rRad)*rLen;
    var ry = Math.sin(rRad)*rLen;
    ctx.beginPath();
    ctx.fillStyle = color;
    //ctx.arc(x+rx, y+ry, rr, 0, Math.PI*2, false);
    drawStar(x+rx, y+ry, rr, 5*2, color);
    ctx.fill();
  }




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() {
  //resize();
  //document.body.requestFullscreen();
}, false );

document.addEventListener('fullscreenchange',function(e){
  resize();
});

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

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