代码实现矩阵对矩阵的导数_下雨代码-矩阵样式

代码实现矩阵对矩阵的导数

by Kurt

由库尔特

下雨代码-矩阵样式 (Making it rain code — Matrix Style)

HTML 5画布动画简介 (An introduction to HTML 5 canvas animations)

Out of all the great things HTML 5 brought us, I love the canvas element the most. I hope that once you see how powerful it is, you’ll want to put in the time to master canvas animations yourself.

在HTML 5带给我们的所有美好事物中，我最喜欢canvas元素。 我希望一旦您了解它的功能强大，就可以花些时间自己掌握画布动画。

什么是画布？ (What is a canvas?)

A canvas is exactly what its name implies. It is a blank canvas that you can paint as you wish and then render in your browser as an image. The real beauty is that it not only allows you to create images, but also to continuously redraw & render them — hence creating an animation.

画布正是其名称所隐含的含义。 它是一块空白画布，您可以根据需要绘画，然后在浏览器中将其渲染为图像。 真正的美在于它不仅允许您创建图像，而且可以连续地重绘和渲染它们-因此可以创建动画。

The power of canvas is limited only by your imagination. I’ve used the canvas element to create everything from static images on-the-fly to games, graphical user interfaces. and even a MailChimp-style email builder. You can even render the canvas in 3D!

画布的力量仅受您的想象力限制。 我使用canvas元素创建了从动态图像到游戏，图形用户界面的所有内容。 甚至是MailChimp样式的电子邮件生成器。 您甚至可以3D渲染画布！

For me, the canvas element changed everything. I was no longer limited to using the default HTML tags. I could create everything I wanted in the browser. And you’d better believe this pushed my JavaScript skills to a whole new level.

对我来说，canvas元素改变了一切。 我不再局限于使用默认HTML标签。 我可以在浏览器中创建所有想要的东西。 并且您最好相信这将我JavaScript技能提升到了一个全新的水平。

入门 (Getting Started)

Instead of demonstrating how to simply draw on a canvas, I want to give you a glimpse of what you can create with it. If you haven’t seen The Matrix yet, stop reading now and go watch it. If you have seen it, you’ll recognize the famous “falling code” from the title. Let’s create this with canvas!

我不想展示如何简单地在画布上绘画，而是让您一目了然。 如果您尚未看到《黑客帝国》，请立即停止阅读并继续观看。 如果您看过它，就会从标题中识别出著名的“下降代码”。 让我们用画布创建它！

Instead of doing a step by step tutorial, to save time I will post the code below and walk you through it explaining what each piece is doing as we move along.

为了节省时间，我将不再发布分步教程，而是将下面的代码发布并指导您逐步解释每个部分在做什么。

The HTML:

HTML：

<canvas id=”canvas” width=”600px” height=”400px”></canvas><img id=”logo” width=”400px;” src=”https://s3.amazonaws.com/freecodecamp/freecodecamp_logo.svg"/>

The CSS:

CSS：

body{ background-color:#d2d2d2;}#canvas{ background-color:#000; display:block; margin:auto;}#logo{ display:none;}

The JavaScript:

JavaScript：

var canvas = document.getElementById(‘canvas’);var ctx = canvas.getContext(‘2d’);var t = text();var logo = document.getElementById(‘logo’);var lines = [];window.setInterval(draw, 100);

function draw() { if (Math.floor(Math.random() * 2) === 0 && lines.length < 100) {  lines.push(new textLine()); } ctx.clearRect(0, 0, canvas.width, canvas.height); lines.forEach(function(tl) {

ctx.drawImage(tl.text, tl.posX, tl.animate(), 20, 1000); }); ctx.drawImage(logo, 100, 155, 400, 70);

}

function textLine() { this.text = t; this.posX = (function() {  return Math.floor(Math.random() * canvas.width); })(); this.offsetY = -1000; this.animate = function() {  if (this.offsetY >= 0) {   this.offsetY = -1000;  }  this.offsetY += 10;  return this.offsetY; };}

function text() { var offscreenCanvas = document.createElement(‘canvas’); offscreenCanvas.width = “30”; offscreenCanvas.height = “1000”; offscreenCanvas.style.display = “none”; document.body.appendChild(offscreenCanvas); var octx = offscreenCanvas.getContext(‘2d’); octx.textAlign = “center”; octx.shadowColor = “lightgreen”; octx.shadowOffsetX = 2; octx.shadowOffsetY = -5; octx.shadowBlur = 1; octx.fillStyle = ‘darkgreen’; octx.textAlign = “left”; var step = 10; for (i = 0; i < 100; i++) {  var charCode = 0;  while (charCode < 60) {   charCode = Math.floor(Math.random() * 100);  }  octx.fillText(String.fromCharCode(charCode), 0, step);  step += 10; } return offscreenCanvas;}

它是如何工作的？ (How does it work?)

On line #1 we grab the canvas element by its id. Every canvas element has its own context — an interface to manipulate its contents. This is what the ctx variable on line 2 refers to.

在第1行上，我们通过其id捕获canvas元素。 每个canvas元素都有其自己的上下文-操作其内容的接口。 这就是第2行上的ctx变量所指的内容。

To create the animated background, we will need a vertical line of random text, which we will then redraw multiple times over the X-axis and animate incrementally on the Y-axis to give us the end effect.

要创建动画背景，我们需要一条垂直的随机文本行，然后将其在X轴上重绘多次，并在Y轴上进行增量动画处理，以提供最终效果。

Since text is always rendered horizontally, we will render the text on another invisible canvas and draw it as an image on our original canvas.

由于文本始终是水平渲染的，因此我们将在另一个不可见的画布上渲染文本，并将其作为图像绘制在原始画布上。

On line #3 we set the variable t to the result of the text() function which generates and returns our invisible canvas element.

在第3行，我们将变量t设置为text()函数的结果，该函数生成并返回我们不可见的canvas元素。

In this function we create a new canvas, set its width and height and set its display property to none to hide it and then append it to the document body. Then we set the color, shadow and offset for the text that we will draw.

在此函数中，我们创建一个新画布，将其宽度和高度设置为空，并将其显示属性设置为none以隐藏它，然后将其附加到文档主体中。 然后，我们为要绘制的文本设置颜色，阴影和偏移量。

To generate vertical random characters we loop and draw a new random character 100 times and increment it by 10px on the Y-axis on each interval. To generate a random character I use Math.random() to get a number between 60 and 100 and then convert it into a character using String.fromCharCode().

为了生成垂直随机字符，我们循环并绘制一个新的随机字符100次，并在每个间隔的Y轴上将其递增10px。 为了生成随机字符，我使用Math.random()获得60到100之间的数字，然后使用String.fromCharCode()将其转换为字符。

This draws our vertical text with a shadow and returns the canvas to the t variable.

这将用阴影绘制垂直文本，并将画布返回到t变量。

动画循环 (The animation loop)

Over the next 3 line of code, I retrieve the FreeCodeCamp logo, declare an array that will hold the separate lines that make up the background, and use window.setInterval to run the draw() function every 100 milliseconds.

在接下来的3行代码中，我检索了FreeCodeCamp徽标，声明了一个数组，该数组将保存构成背景的单独的行，并使用window.setInterval每隔100毫秒运行一次draw()函数。

When animating a canvas, it’s good practice to rather use window.requestAnimationFrame(), but I felt this is too confusing for beginners, since its a bit tricky setting the frame rate.

给画布设置动画时，最好使用window.requestAnimationFrame()，但是我觉得这对于初学者来说太混乱了，因为它设置帧速率有些棘手。

The first thing the draw() function does is generate a random number between 1 and 0. If the number is 0 and there are less than 100 individual lines of text being animated on the background it pushes a new textLine() into the lines array.

draw()函数要做的第一件事是生成一个介于1和0之间的随机数。如果该数字为0，并且在背景上动画的文本行少于100条，则会将一个新的textLine()推入lines数组。

The textLine() function returns an object which contains

textLine()函数返回一个对象，其中包含

1. The resulting vertical text held in the t variable.

   结果垂直文本保存在t变量中。

2. The offset amount that it will be rendered on the X-axis (generated randomly on each instance of the object).
   将在X轴上渲染的偏移量(在对象的每个实例上随机生成)。
3. An initial offset of -1000px on the Y-axis which places it just above the canvas.
   Y轴上的-1000px初始偏移量将其恰好位于画布上方。
4. An animate method which adds 10px to the Y-axis each time it is called and returns the result making the text move downwards. If the Y-axis offset reaches 0 it is reset to -1000px providing a continual animation.
   一种动画方法，每次调用时将10像素添加到Y轴，并返回使文本向下移动的结果。 如果Y轴偏移量达到0，则将其重置为-1000px，以提供连续动画。

The canvas is cleared, and then the draw() function loops through each line of text in the lines array and draws it on the canvas calling its animate method each time a line is drawn to move it downwards.

清除画布，然后draw()函数遍历lines数组中的每一行文本，并在每次绘制一条线将其向下移动时调用其animate方法在画布上绘制它。

Since each line has a random offset on the X-axis and a newline is added at random intervals the lines of text fall at different rates across the canvas creating the raining code effect!

由于每行在X轴上都有一个随机偏移，并且以随机间隔添加了换行符，因此文本行以不同的速率落在画布上，从而产生下雨代码效果！

Lastly the FreeCodeCamp logo is drawn over the background, giving us our final animation.

最后，在背景上绘制了FreeCodeCamp徽标，为我们提供了最终的动画。

现在到哪里？ (Where to now?)

If canvas is something that interests you, you can learn more about it in the Mozilla Docs.

如果您对画布感兴趣，可以在Mozilla Docs中对其进行更多了解。

I plan like create a series of more basic step by step tutorials walking through canvas animations as I find the time.

我计划像在发现时间的同时创建一系列更基本的逐步教程，逐步介绍画布动画。

If you didn’t find the above code too difficult and would like to mess with it, here are a few cool ideas:

如果您觉得上面的代码不太困难，并且想弄乱它，这里有一些不错的主意：

1. Make the dimensions dynamic so that the canvas scales and continues animating as you resize your browser.
   使尺寸动态化，以便在调整浏览器大小时画布可以缩放并继续进行动画处理。
2. Instead of randomly generating characters, grab a file of your own code from GitHub and animate that instead.
   而不是随机生成字符，而是从GitHub获取您自己的代码文件并对其进行动画处理。
3. Render your name in place of the FreeCodeCamp logo, and make it look like the Matrix poster.
   在FreeCodeCamp徽标的位置渲染您的姓名，并使它看起来像Matrix海报。
4. Instead of generating each line at random, bind a click event to the canvas and render a new line at the X coordinates of your mouse click.
   与其随机生成每一行，不如将click事件绑定到画布，并在鼠标单击的X坐标处渲染新行。

I hope you enjoyed this intro, if you did feel free to check out some of the other articles that I’ve written.

如果您愿意随时查看我写的其他一些文章，希望您喜欢这个介绍。

Turning code to cash — How to make money as a Web Developer and live to tell the tale.So you just learnt to code. You’re eager and anyone who can’t code thinks you’re a genius, word gets out and all of a…medium.comHow to write a jQuery like library in 71 lines of code — Learn about the DOMJavaScript frameworks are all the rage. Chances are that any JavaScript related news feed you open will be littered…medium.com5 Things to Remember When You’re Learning to ProgramLearning to program is challenging. Aside from choosing a language or setting up a development environment that you…medium.comHow I Became a Programmer. And When I Started Calling Myself OneI’ve wanted to start blogging about programming for months now and like so many others before me I set off full of…medium.comPreventative Programming — how fix to bugs before they happen…and why Sherlock Holmes would have been a brilliant programmermedium.com

将代码转换为现金-如何以Web开发人员的身份赚钱并讲述故事。 因此，您刚刚学习编码。 您很热衷，任何无法编写代码的人都认为自己是个天才，没有话可说，所有的一切…… medium.com 如何用71行代码编写类似jQuery的库—了解 所有 DOM JavaScript框架愤怒。 您打开的任何与JavaScript相关的新闻提要都有可能会乱扔垃圾…… medium.com 学习编程时要记住的5件事 学习编程是一项挑战。 除了选择一种语言或建立一个开发环境外， media.com 我如何成为一名程序员。 当我开始自称一个人时， 我已经想开始写程序设计博客了好几个月了，而在我之前，我和其他许多人一样，开始了…… 预防性编程—如何在错误发生之前进行修复 ……以及为什么夏洛克·福尔摩斯本来是出色的程序员 medium.com

翻译自: https://www.freecodecamp.org/news/canmaking-it-rain-code-matrix-style-ec6e1386084e/

代码实现矩阵对矩阵的导数