HTML
在本教程中，我们将看看创建画布对象，在其上绘制简单的视觉效果并为这些视觉效果进行动画。
01.创建一个页面
Canvas基本上是您在页面上放置的HTML元素，以覆盖所需的区域，然后可以绘制。要开始，我们需要使用Canvas对象创建一个简单的页面。
< !DOCTYPE html> html Canvas Demo
< Canvas id="html- Canvas "> 02.缩放画布
为了让我们有足够的空间玩，我们希望我们的画布填补整个屏幕。我们也会给它一个黑色背景，所以你知道它绝对在那里。如果没有结束滚动条或空格，这实际上可以有点棘手。以下CSS应该照顾它。
画布{高度:100vh;宽度:100大众;位置:绝对的;background - color: # 000000;}保证金:0;填充:0;}03.初始化画布供使用
接下来，我们需要添加一些JavaScript来设置准备使用的画布。我们将挂钩DomcontentLoaded事件，以确保脚本在Canvas元素准备好之前尝试运行。我们还将其设置了Canvas分辨率以匹配它覆盖的区域 - 否则画布将在不增加分辨率的情况下扩展，导致模糊或像素化图形。
文档。addEventListener("DOMContentLoaded"，函数(){var canvas = document.getElementById("html-canvas");Var circles = [];半径= 50;画布。宽度= canvas.clientWidth;画布。身高= canvas.clientHeight;var context = canvas.getContext("2d");},假);04.画一个形状
你会注意到，在最后一步中，我们被称为“上下文”的东西。这就是如何发生帆布的绘图。最容易将上下文视为一种绘制的上下文，我们可以用来绘制不同的线条，弧形和基本形状。
现在我们可以做的是通过编写drawCircle函数来使用我们的上下文，该函数将创建一个360度的圆弧——也就是一个圆。我们通过让上下文定义一个弧，设置边框和填充的样式，然后提升fill()和stroke()函数来实际绘制形状(stroke绘制边框)来实现这一点。
function drawCircle(x, y，半径，border, border_colour, fill_colour) {context.beginPath();context.arc (x, y,半径0 2 * Math.PI);上下文。strokeStyle = border_colour;上下文。fillStyle = fill_colour;上下文。线宽=边界;context.closePath ();context.fill (); context.stroke(); }05.创建许多圆
伟大的。我们有一个可以绘制圆圈的函数。现在我们需要一些东西来画画。让我们从步骤3扩展代码以创建描述圆对象的数组。它将存储每个圆的x和y协调，颜色和方向值。
我们创建这个数组结构而不是直接绘制圆圈，因为它将使我们能够通过稍后重新绘制数组的内容来动画这些圆圈。
For (var I = 0;我< 20;var x = radius + (Math.random() * (canvas. random());宽度-(2 *半径));var y = radius + (Math.random() * (canvas。高度-(2 *半径));var color = randomcolor ();var direction = Math.random() * 2.0 * Math.PI;circles.push ({x, x, y, y,颜色:颜色、方向:方向});画();}06.随机亮起
在最后一步中，我们使用了几个尚未定义的新函数。让我们从randomColour()开始。这将是一个实用函数，返回表示颜色的随机十六进制字符串。实现起来相当简单。
function randomColour() {var chars = '0123456789ABCDEF';Var color = '#';For (var I = 0;我< 6;i++) {color += chars[Math.floor(Math.random() * 16)];}返回颜色;}07.在页面上绘制图形
现在，我们已经准备好通过实现draw()函数来整合这些内容。这将做两件关键的事情。首先，它将使用clearRect()函数清除画布。这将是很重要的，当我们来动画我们的圆，以避免绘制新的框架在旧的顶部。然后它将遍历我们构造的数组，并使用drawCircle函数在画布上连续绘制每个圆。
函数draw（）{context.clearrect（0,0，canvas.width，canvas.height）;圈子foreach（函数（圆圈）{drawCircle（circle.x，circle.y，半径，5，circle.colour，circle.colour）;}）;}08.动画的形状
如果您现在尝试它，您将看到页面上绘制了一些静态圆圈。但我们想让它们动起来。为此，我们需要以几种方式扩展draw()函数。首先，我们要用圆。我们推入数组的方向值，以计算圆的x和y位置的变化。
接下来，我们将使用一个名为requestAnimationFrame的内置函数，该函数递归地调用draw()函数。requestAnimationFrame允许浏览器决定何时再次调用该函数，避免需要实现计时器来计算何时绘制下一帧。
函数draw（）{context.clearrect（0,0，canvas.width，canvas.height）;圆圈。forEach(function (circle) {circle。x =圆。x + Math.cos (circle.direction);圆。y =圆。y + sin (circle.direction);drawCircle(圆。x,圆。Y，半径，5，圆。颜色,circle.colour); }); requestAnimationFrame(draw); }09.在这页边上跳一跳
不过还有一件事没做。这些圆圈现在从屏幕边缘消失了。让他们重新振作起来。为此，我们将在draw()函数的forEach循环中添加一个对新函数bounce(circle)的调用。
弹跳功能将确定圆圈何时处于屏幕的边缘，并适当地调整其方向值。
功能弹跳（圆圈）{if（（cirect.x - 半径）<0）||（（circle.y-Radius）<0）||（（circle.x +半径）> canvas.width）||（（circle.y +半径）> canvas.height））{circle.direction + =（math.pi / 2）;}如果（circle.direction>（2 * math.pi））{cirect.direction - =（2 * math.pi）;}}相关文章:
