Board logo

标题: [JavaScript] 探照灯的效果 [打印本页]

作者: MC-zhan    时间: 2017-8-4 11:06     标题: 探照灯的效果

本帖最后由 MC-zhan 于 2017-8-4 11:08 编辑
  1. <!doctype html>
  2. <html>
  3. <head>
  4.         <meta charset="utf-8">
  5.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.         <title>刮刮卡来了,试试运气?</title>
  7.         <meta name="keywords" content="">
  8.         <meta name="description" content="">
  9.         <style>
  10. * {
  11.             margin: 0;
  12.             padding: 0;
  13.             box-sizing: border-box;
  14.         }
  15.         
  16.         html {
  17.             width: 100vw;
  18.             height: 100vh;
  19.         }
  20.         
  21.         body {
  22.             background: url("https://farm3.staticflickr.com/2908/32764885503_1a04915b11_k.jpg") no-repeat center;
  23.             width: 100vw;
  24.             min-height: 100%;
  25.         }
  26. </style>
  27. <base target='_blank'>
  28. </head>
  29. <body>




  30. <canvas id="canvasOne" width="500" height="300"></canvas>




  31. <script>
  32. window.addEventListener('load', eventWindowLoaded, false);

  33.         var Debugger = function() {};

  34.         Debugger.log = function(message) {
  35.             try {
  36.                 console.log(message);
  37.             } catch (exception) {
  38.                 return;
  39.             }
  40.         }

  41.         function eventWindowLoaded() {
  42.             canvasApp();
  43.         }

  44.         function canvasApp() {
  45.             Debugger.log('Drawing Canvas');


  46.             var canvas = document.getElementById('canvasOne');
  47.             var ctx = canvas.getContext('2d');

  48.             var w = canvas.width = window.innerWidth;
  49.             var h = canvas.height = window.innerHeight;

  50.             function reOffset() {
  51.                 var BB = canvas.getBoundingClientRect();
  52.                 offsetX = BB.left;
  53.                 offsetY = BB.top;
  54.             }

  55.             var offsetX, offsetY;
  56.             reOffset();

  57.             window.onscroll = function(e) {
  58.                 reOffset();
  59.             }

  60.             window.onresize = function(e) {
  61.                 reOffset();
  62.             }

  63.             canvas.addEventListener('mousemove', mouseMove, false);
  64.             canvas.addEventListener('touchmove', mouseMove, false);

  65.             function draw(cx, cy, radius) {
  66.                 ctx.save();
  67.                 ctx.clearRect(0, 0, w, h);

  68.                 var radialGradient = ctx.createRadialGradient(cx, cy, 1, cx, cy, radius);

  69.                 radialGradient.addColorStop(0, 'rgba(0, 0, 0, 1)');
  70.                 radialGradient.addColorStop(.65, 'rgba(0, 0, 0, 1)');
  71.                 radialGradient.addColorStop(1, 'rgba(0, 0, 0, 0)');

  72.                 ctx.beginPath();

  73.                 ctx.fillStyle = '#000';
  74.                 ctx.fillRect(0, 0, w, h);

  75.                 ctx.globalCompositeOperation = 'destination-out';

  76.                 ctx.arc(cx, cy, radius, 0, Math.PI * 2, false);
  77.                 ctx.fillStyle = radialGradient;
  78.                 ctx.fill();

  79.                 ctx.restore();
  80.             }

  81.             function mouseMove(e) {
  82.                 e.preventDefault();
  83.                 e.stopPropagation();

  84.                 mouseX = parseInt(e.clientX - offsetX);
  85.                 mouseY = parseInt(e.clientY - offsetY);

  86.                 draw(mouseX, mouseY, 100);
  87.             }
  88.             draw(w / 2, h / 2, 100);
  89.         }
  90. </script>

  91. </body>
  92. </html>
复制代码
http://www.w3cplus.com/canvas/clip.html




欢迎光临 关注前端这点事 (http://www.xinran001.com/bbs/) Powered by Discuz! 7.0.0