您的位置: 首页 > 软件教程 > HTML教程专题 > 如何用HTML5 CANVAS绘制阴影和填充模式

如何用HTML5 CANVAS绘制阴影和填充模式

6.0分
出处:jQuery之家 时间:2017-03-10

您可能感兴趣的话题: 绘制阴影  

核心提示:如何在HTML5 canvas上绘制出图形或文字的阴影效果?

  绘制阴影

  我们可以在HTML5 canvas上绘制出图形或文字的阴影效果。canvas的阴影效果非常简单,通过一些简单的设置,就可以自动在图片或文字下面生成相应的阴影。下面是一个简单的例子:

如何用HTML5 CANVAS绘制阴影和填充模式

  在canvas中,图形的阴影由2D上下文的4个属性来控制:

  shadowOffsetX

  shadowOffsetY

  shadowBlur

  shadowColor

  shadowOffsetX和shadowOffsetY属性阴影和图形之间的距离。正数值表示阴影绘制在图形的右边(X轴方向),或图形的下方(Y轴方向)。而负数值表示阴影绘制在图形的左边(X轴方向),或图形的上方(Y轴方向)。它们的默认值都是0。

  shadowBlur属性用于设置阴影的模糊效果。数值越大,阴影越模糊。数值越小,用于越清晰。它的值是一个浮点数,0表示阴影不模糊。

  shadowColor表示阴影的颜色。

  上面例子的实现代码如下:

  var canvas = document.getElementById("ex1");

  var context = canvas.getContext("2d");

  context.shadowOffsetX = 10;

  context.shadowOffsetY = 10;

  context.shadowBlur = 4;

  context.shadowColor = "#666666"; //or use rgb(red, green, blue)

  context.fillStyle = "#000000";

  context.fillRect(10,10, 50, 50);

  context.fillStyle = "#000066";

  context.font = "30px Arial";

  context.fillText("HTML5 Canvas Shadow", 10,120);

  

  填充模式

  填充模式是指在canvas中使用某张图片作为一种模式来填充图形。我们可以通过createPattern()方法来创建一种填充模式。它的语法为:createPattern(image, type)。

  参数image可以是一个HTML图片元素,另一个canvas或一个元素等。

  参数type表示如何使用图片来创建特定的模式。它的取值可以是:

  repeat:在水平和垂直方向上重复图片。

  repeat-x:只在水平方向上重复图片。

  repeat-y:只在垂直方向上重复图片。

  no-repeat:不重复图片,只显示一次。

  下面是一个使用填充模式的简单例子:

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

网友评论
精品软件课程
更多 >
Adobe Flash,是Macromedi... [详细]
Dreamweaver是网页制作和管理的所见... [详细]
MySQL是一个小型关系型数据库管理系统,被... [详细]
PHP是一种 HTML 内嵌式的语言,是一种... [详细]
Dreamweaver是网页制作和管理的所见... [详细]
JavaScript是基于对象和事件驱动并具... [详细]