小程序用画布写带颜色的文字_带有HTML5画布的故障艺术-CSDN博客

小程序用画布写带颜色的文字

I’ve been interested in creating “glitched” graphics using web technologies for some time. While the canvas API has pixel-level control over bitmaps, yesterday I realized that a fairly simple aspect of the API could be used to create glitch effects.

一段时间以来，我一直对使用Web技术创建“闪烁的”图形感兴趣。尽管canvas API具有对位图的像素级控制，但昨天我意识到该API的一个相当简单的方面可用于创建毛刺效果。

在画布中获取图像 (Gaining Images In Canvas)

First, we start with a <canvas> element, as shown in the related CodePen demo:

首先，我们从<canvas>元素开始，如相关的CodePen演示所示：

<canvas id="portrait" width="200" height="400"></canvas>

Note that the initial dimensions of the tag are arbitrary; they’ll be altered with the JavaScript to come.

注意标签的初始尺寸是任意的。它们将随JavaScript一起更改。

This is supplemented with some CSS:

这补充了一些CSS ：

body { 
  background: #000;
}
canvas { 
  display: block;
  margin: 0 auto;
  width: 60%;
}

The JavaScript for drawing in the canvas is divided into two broad steps. First, we load a referenced bitmap:

用于在画布中绘制JavaScript分为两个主要步骤。首先，我们加载引用的位图：

var img = new Image();
img.src = "nastya.jpg";
img.onload = function() {
  draw(this);
};

Once the image is fully loaded, we draw it onto the canvas using a draw function. First, we ensure that the canvas is the same dimension as our loaded image:

图像完全加载后，我们使用draw 函数将其draw到画布上。首先，我们确保画布与加载的图像尺寸相同：

function draw(img) {
  var portrait = document.getElementById("portrait");
  var canvas = portrait.getContext("2d");
  portrait.setAttribute("width", img.width);
  portrait.setAttribute("height", img.height);
  …
}

Under normal circumstances, a bitmap image would be “mapped” to a canvas drawing space one-to-one: that is, the full height and width of the image would be pasted into the same area of the sized canvas, from its top left corner (0 0) to its bottom right. The syntax would look something like this:

在正常情况下，位图图像将被一对一地“映射”到画布绘制空间：也就是说，图像的整个高度和宽度将从其左上角粘贴到大小画布的相同区域中。右下角( 0 0 )。语法如下所示：

canvas.drawImage(img, 0, 0, img.width, img.height, 
    0, 0, portrait.width, porttrait.height);

While the pixels are mapped one-to-one between the source image and the destination canvas, the applied CSS will mean that the canvas - and thus the mapped image - will be responsive, and appears at a width and height relative to the browser window.

当像素在source图像和destination画布之间一对一映射时，所应用CSS将意味着画布(因此映射的图像)将具有响应性，并以相对于浏览器窗口的宽度和高度显示。

However, there’s nothing that says we have to take the entire image and map it onto the entire canvas in one go. We could take repeated slices of the source image, and map them using a displaced horizontal value onto the canvas. To start that process, we need two variables: the number of slices, and a value for the maximum horizontal offset. Continuing inside the function:

但是，没有什么可以说我们必须拍摄整个图像并将其一次映射到整个画布上。我们可以重复获取源图像的切片，并使用位移的水平值将其映射到画布上。要开始该过程，我们需要两个变量：切片数和最大水平偏移量的值。在函数内部继续：

var verticalSlices = Math.round(img.height / 20);
var maxHorizOffset = 20;

The slices are drawn inside a for loop:

切片在for循环内绘制：

for (var i = 0; i < verticalSlices; i++)  {
    var horizOffset = getRandom(-Math.abs(maxHorizOffset), maxHorizOffset);
    canvas.drawImage(img, 
    0, 
    i * verticalSlices, 
    img.width, 
    i * verticalSlices + verticalSlices, 
    horizOffset, i * verticalSlices, 
    img.width, 
    i * verticalSlices + verticalSlices);
}

horizOffset references another function for getting a random value between two numbers. Note that the function call will potentially return negative values, moving the slice to the left:

horizOffset引用另一个函数来获取两个数字之间的随机值。请注意，该函数调用可能会返回负值，将切片向左移动：

function getRandom(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

This creates the random glitched effect you can see in the demo at the top of this article.

这会产生随机的毛刺效果，您可以在本文顶部的演示中看到该效果。

结论 (Conclusion)

Variations of this same technique can be used dynamically: for example, mapping HTML5 video from two different streams onto a <canvas> to create a before-and-after video comparator.

可以动态使用此技术的变体：例如，将来自两个不同流的HTML5视频映射到<canvas>以创建前后视频比较器。

Somewhat ironically, most visual glitches effects are borrowed from the misfiring of analog technology, such as the reception on an old television, transferred into a digital realm. I’ll be exploring more effects like this using web technologies in future articles.

具有讽刺意味的是，大多数视觉故障效果是由于模拟技术的不完善而产生的，例如旧电视上的接收已转移到数字领域。在以后的文章中，我将使用网络技术探索更多类似的效果。