教你用几十行js实现很炫的canvas交互特效

关于“教你用几十行js实现很炫的canvas交互特效”的完整攻略，我将从以下几个方面进行详细讲解：

1. 准备工作

在实现交互特效之前，我们需要准备一些必要的工作：首先是引入Canvas标签；其次是编写Canvas绘制所需的HTML、CSS及JavaScript代码；最后还需要确定绘制的内容和样式。

1. 创建画布并绘制基础图形

在Canvas中创建画布并绘制基础图形是实现交互特效的第一步。我们可以通过以下的代码实现：

<canvas id="myCanvas"></canvas>

<style>
  #myCanvas {
    width: 500px;
    height: 500px;
    border: 1px solid #000;
  }
</style>

<script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  ctx.fillStyle = "#FF0000";
  ctx.fillRect(0, 0, 150, 75);
</script>

这段代码首先在HTML中创建了一个Canvas标签，然后利用CSS对该标签进行样式设置，最后在JavaScript中调用Canvas的API，创建了一个在Canvas上填充红色矩形。其中，c表示Canvas对象，ctx表示Canvas的上下文，fillStyle表示填充颜色，fillRect表示填充形状。

1. 实现交互特效

在上述基础之上，我们可以利用JS的事件处理机制，来实现各种交互特效。以下是两个示例：

• 鼠标移动交互特效

<canvas id="myCanvas"></canvas>

<style>
  #myCanvas {
    width: 500px;
    height: 500px;
    border: 1px solid #000;
  }
</style>

<script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");
  var mouseX, mouseY;

  c.onmousemove = function(event) {
    mouseX = event.clientX;
    mouseY = event.clientY;

    ctx.clearRect(0, 0, 500, 500);
    ctx.beginPath();
    ctx.arc(mouseX, mouseY, 20, 0, 2 * Math.PI);
    ctx.stroke();
  }
</script>

在这个示例中，我们通过监听mousemove事件，获取当前鼠标的坐标，并利用Canvas的API，在鼠标所在的位置绘制一个圆形。随着鼠标的移动，圆形也随之移动，并不断更新。

• 鼠标点击交互特效

<canvas id="myCanvas"></canvas>

<style>
  #myCanvas {
    width: 500px;
    height: 500px;
    border: 1px solid #000;
  }
</style>

<script>
  var c = document.getElementById("myCanvas");
  var ctx = c.getContext("2d");

  c.onclick = function(event) {
    var mouseX = event.clientX;
    var mouseY = event.clientY;

    ctx.beginPath();
    ctx.arc(mouseX, mouseY, 20, 0, 2 * Math.PI);
    ctx.fillStyle = "#00FF00";
    ctx.fill();
  }
</script>

在这个示例中，我们通过监听click事件，获取当前鼠标的坐标，并利用Canvas的API，在鼠标所在的位置绘制一个绿色圆形。每次点击事件触发时，都会在Canvas上绘制一个新的圆形，从而实现鼠标点击的交互特效。

以上就是利用JS实现Canvas交互特效的完整攻略。在实际开发中，还可以根据具体的需求继续扩展，实现更多炫酷的效果。