Canvas 动态的光线

用键盘方向键控制绿色的焦点，光线会随之发生变化。

light,focus

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 2582
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var canvas = document.createElement('canvas');
canvas.width = 600;
canvas.height = 400;
document.body.appendChild(canvas);
var ctx = canvas.getContext('2d');

var score = 0;
var scoreCont = $('.score');

var numOfBlocks = 60;
var blockArray = [];

var player = {
  coords: {
    x: 90,
    y: 110
  }
};

for (var b = 0; b < numOfBlocks; b++) {
  var block = blockConstructor(true);
  blockArray.push(block);
  console.log(block);
}

var goal = goalConstructor();

requestAnimationFrame(render);

// RENDER CYCLE
function render() {
    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
  
    for (var i = 0; i < blockArray.length; i++) {

var vec1_x = blockArray[i].coords.x - player.coords.x;
        var vec1_y = blockArray[i].coords.y - player.coords.y;
      
        // Get square root of vec1_x and vec1_y
        var vec1_mag = Math.sqrt(vec1_x * vec1_x + vec1_y * vec1_y);

for (var x = 0; x < canvas.width; x += 10) {
            for (var y = 0; y < canvas.height; y += 10) {
                var vec2_x = x - player.coords.x;
                var vec2_y = y - player.coords.y;
                var vec2_mag = Math.sqrt(vec2_x * vec2_x + vec2_y * vec2_y);
                var dotproduct = vec1_x * vec2_x + vec1_y * vec2_y;

var angle = Math.acos(dotproduct / Math.round(vec1_mag * vec2_mag));
                
                if (vec2_mag > vec1_mag && angle < Math.PI / 8 / vec1_mag * 10) {      
                  ctx.fillStyle = 'black';
                  ctx.fillRect(x, y, 10, 10);
                  
                  if (x == goal.coords.x && y == goal.coords.y){
                    console.log(goal);
                     ctx.fillStyle = goal.color;
                     ctx.fillRect(x,y, 10,10); 
                  }
                } 
               
            }
        }

ctx.fillStyle = blockArray[i].color;
        ctx.fillRect(blockArray[i].coords.x, blockArray[i].coords.y, 10, 10);
     
    }

ctx.fillStyle = 'green';
    ctx.fillRect(player.coords.x, player.coords.y, 10, 10);

requestAnimationFrame(render);
}

//KEYPRESS HANDLING
onkeydown = function (e) {
    switch(e.which) {
      case 65:
        player.coords.x -= 10;
        break;
      case 68:
        player.coords.x += 10;
        break;
      case 87:
        player.coords.y -= 10;
        break;
      case 83:
        player.coords.y += 10;
        break;
      
      case 37:
        player.coords.x -= 10;
        break;
      case 39:
        player.coords.x += 10;
        break;
      case 38:
        player.coords.y -= 10;
        break;
      case 40:
        player.coords.y += 10;
        break;
    }
  
    if (player.coords.x == goal.coords.x && player.coords.y == goal.coords.y) {
      score++;
      $(scoreCont).html(score);
      goal = goalConstructor();
    }
}

编译

CSS

HTML

用键盘方向键控制绿色的焦点，光线会随之发生变化。

light,focus

编辑器支持Emmet

快捷键

用键盘方向键控制绿色的焦点，光线会随之发生变化。

light,focus

HTML5/Canvas两点之间的电弧线 | 闪电

HTML5 Canvas 聚光灯（Spotlight）特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：