跳到主要内容

开始使用HTML画布

HTML element是一个功能强大的解决方案,用于在Web上创建基于像素的图形JavaScript的,并允许您通过一些练习创造一些显着的效果。

在本教程中,我们将介绍如何创建画布对象,在其上绘制简单的视觉效果以及为这些视觉效果设置动画。

01.创建一个页面

Canvas基本上是放置在页面上的HTML元素,可以缩放以覆盖您想要的区域,然后可以使用。首先,我们需要创建一个带有canvas对象的简单页面。

 HTML Canvas演示

02.缩放画布

为了给我们足够的空间,我们希望我们的画布可以填满整个屏幕。我们也会给它一个黑色的背景,所以你知道它肯定存在。实际上这可能有点棘手,没有滚动条或空格。下面的CSS应该照顾它。

帆布{身高:100vh;宽度:100vw;位置:绝对; background-color:#000000; margin:0;填充:0; }

03.初始化画布以供使用

接下来,我们需要添加一些JavaScript来设置准备使用的画布。我们将它挂钩DOMContentLoaded事件以确保脚本在canvas元素准备好之前不会尝试运行。我们还将它设置为与其覆盖的区域相匹配的画布分辨率 - 否则画布将在不增加分辨率的情况下向上扩展,从而导致模糊或像素化图形。

document.addEventListener(“DOMContentLoaded”,function(){var canvas = document.getElementById(“html-canvas”); var circles = []; var radius = 50; canvas.width = canvas.clientWidth; canvas.height = canvas .clientHeight; var context = canvas.getContext(“2d”);},false);

04.画一个形状

您会注意到,在最后一步中,我们创建了一个称为“上下文”的东西。这就是画布上的绘画方式。最简单的方法是将上下文视为一种画笔,我们可以用它来绘制不同的线条,弧线和基本形状。

我们现在可以做的是通过编写drawCircle函数来使用我们的上下文,该函数将创建一个360度的圆弧 - 即圆形。我们通过告诉上下文来定义弧,设置边框和填充的样式,然后上升fill()和stroke()函数来实际绘制形状(笔划绘制边框)。

function drawCircle(x,y,radius,border,border_colour,fill_colour){context.beginPath(); context.arc(X,Y,半径,0,2 * Math.PI); context.strokeStyle = border_colour; context.fillStyle = fill_colour; context.lineWidth = border; context.closePath(); context.fill(); context.stroke(); }

05.创建许多圈子

大。我们有一个可以绘制圆圈的功能。现在我们需要绘制一些东西。让我们扩展第3步中的代码,创建一个描述圆形对象的数组。它将存储每个圆的x和y坐标,颜色和方向值。

我们创建这个数组结构而不是直接绘制圆形,因为它将使我们能够通过稍后重新绘制数组的内容来为圆圈设置动画。

for(var i = 0; i <20; i ++){var x = radius +(Math.random()*(canvas.width  - (2 * radius))); var y = radius +(Math.random()*(canvas.height  - (2 * radius))); var color = randomColour(); 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; i <6; i ++){color + = chars [Math.floor(Math.random()* 16)];返回颜色; }

07.在页面上绘制图形

现在我们已准备好通过实现draw()函数将事物组合在一起。这将做两件事。首先,它将使用clearRect()函数清除画布。当我们为我们的圆圈设置动画时,这将非常重要,以避免在旧的顶部绘制新框架。然后它将遍历我们构造的数组,并使用drawCircle函数连续绘制画布上的每个圆。

function draw(){context.clearRect(0,0,canvas.width,canvas.height); circles.forEach(function(circle){drawCircle(circle.x,circle.y,radius,5,circle.colour,circle.colour);}); }

08.动画形状

如果您现在试用,您会在页面上看到一些静态圆圈。但我们希望为它们制作动画。为此,我们需要以两种方式扩展draw()函数。首先,我们将使用我们推送到数组的circle.direction值来计算圆的x和y位置的变化。

接下来,我们将使用一个名为requestAnimationFrame的内置函数,该函数以递归方式调用draw()函数。 RequestAnimationFrame允许浏览器决定何时再次调用该函数,从而避免需要实现计时器来计算何时绘制下一帧。

function draw(){context.clearRect(0,0,canvas.width,canvas.height); circles.forEach(function(circle){circle.x = circle.x + Math.cos(circle.direction); circle.y = circle.y + Math.sin(circle.direction); drawCircle(circle.x,circle) .y,radius,5,circle.colour,circle.colour);}); requestAnimationFrame(绘制); }

09.在页面边缘弹跳

但是有一件事仍然缺失。圆圈现在刚刚从屏幕边缘消失。让我们让他们反弹。为此,我们将在draw()函数的forEach循环中添加对新函数的调用,bounce(circle)。

反弹功能将确定圆圈何时位于屏幕边缘,并适当调整其方向值。

函数反弹(圆){if((circle.x  -  radius)<0)||((circle.y  -  radius)<0)||((circle.x + radius)> canvas.width)||( (circle.y + radius)> canvas.height)){circle.direction + =(Math.PI / 2); } if(circle.direction>(2 * Math.PI)){circle.direction  -  =(2 * Math.PI); }}

这篇文章最初出现在网页设计者问题266。在这里购买。

相关文章:



翻译字数超限