横扫Monotonous，绘出炫酷的互动图像画布

前端

2023-06-25 13:55:46

利用 Canvas 打造互动式图像画布

我们都曾见过一些网站，其中的图像和图形会随着鼠标的移动而缩放，交互性十足。是不是曾梦想自己也能创建这样的引人注目的视觉效果？现在，借助 Canvas，一切变得如此简单！

揭秘 Canvas 的魅力

Canvas 是一个功能强大的绘图工具，让我们能够在网页上创建和操作图像及图形。它提供了一系列出色的功能，包括：

绘制各种图形：Canvas 使我们可以轻松绘制线条、矩形、圆形、多边形等各种形状。
图像操作：我们可以将图像加载到 Canvas 中，然后对其执行缩放、旋转、裁剪等操作。
文本渲染：Canvas 允许我们在画布上渲染文本，并自定义字体、颜色、大小等属性。
事件处理：我们可以为 Canvas 设置事件处理程序，当用户与其中的元素交互时，会触发相应的事件。

亲自动手制作交互式图像画布

以下步骤将指导你使用 Canvas 创建交互式图像画布：

创建 Canvas 元素

<canvas id="myCanvas" width="500" height="500"></canvas>

获取 Canvas 上下文

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

加载图像

var image = new Image();
image.src = "image.jpg";

image.onload = function() {
  ctx.drawImage(image, 0, 0);
};

绘制图形

ctx.fillStyle = "red";
ctx.fillRect(100, 100, 100, 100);

ctx.fillStyle = "blue";
ctx.beginPath();
ctx.arc(200, 200, 50, 0, 2 * Math.PI);
ctx.fill();

设置悬停效果

canvas.addEventListener("mousemove", function(event) {
  var x = event.clientX;
  var y = event.clientY;

  var rect = ctx.getImageData(x, y, 1, 1);
  var pixelData = rect.data;

  if (pixelData[0] == 255 && pixelData[1] == 0 && pixelData[2] == 0) {
    ctx.fillStyle = "black";
    ctx.fillRect(x, y, 100, 100);
    ctx.fillStyle = "white";
    ctx.fillText("Red square", x, y + 20);
  } else if (pixelData[0] == 0 && pixelData[1] == 0 && pixelData[2] == 255) {
    ctx.fillStyle = "black";
    ctx.fillRect(x, y, 100, 100);
    ctx.fillStyle = "white";
    ctx.fillText("Blue circle", x, y + 20);
  }
});