使用画布实现文本阴影

HTML5为网页设计引人了一个新元素,即画布(canvas)元素。该元素用于在网页中使用JavaScript实时创建图形。

准备工作

画布元素会在页面上创建一个矩形区域。默认的尺寸规格为300px宽,150px高。可以使用JavaScript指定具体大小。

实现方式

首先,在一个简单的HTML页面中创建画布元素:

<!DOCTYPE HTHL>
<html>
<head></head>
<body>
    <canvas id="thecanvas"></canvas>
</body>
</html>

通过JavaScript从DOM中获取该画布元素。

var canvas = document.getElementById('thecanvas');

然后调用getContext()方法。getContext('2d')方法的返回值是一个内置的HTML5对象。它拥有若干用来绘制文本、形状、 图像等的方法。

var ctx = canvas.getContext('2d');

接下来使用JavaScript绘制文本。我们编写代码来设置该对象的水平和垂直阴影偏移量、模糊度及阴影颜色等属性。

ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 2;
ctx.shadowColor = "rgba(0, 0, 0, 0.5)";

文本内容及属性可以直接通过下面的JavaScript代码设置,但是也可以通过DOM中的变量来传入。

ctx.font = "20px Times New Roman";
ctx.fillStyle = "Black";
ctx.fillText("This is the canvas", 5, 30);

回到HTML代码,给body元素添加onload="drawCanvas();"脚本命令。当页面加载时,JavaScript将触发绘制事件,从而将文本及其阴影绘制到画布中。

工作原理

不用太深入了解JavaScript的工作原理,设计者就可以编写脚本操控画布元素,从而在页面加载时绘制页面所需内容。body元素的onload = "drawCanvas();"命令会触发JavaScript的执行,把内容绘制到画布上。

打赏
吐槽 (4)
×
加载中,请稍候…

您需要 登录 后才能发表评论。

avatar

- 评论

  • 加载中,请稍候…
我要吐槽