首页 > web前端 > H5教程 > 正文

HTML5 CANVAS:绘制阴影和填充模式

PHP中文网
发布: 2017-03-30 16:39:32
原创
3425 人浏览过

绘制阴影

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

HTML5 CANVAS:绘制阴影和填充模式

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

shadowOffsetX 
shadowOffsetY
shadowBlur
shadowColor
登录后复制

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

  shadowBlur属性用于设置阴影的模糊效果。数值越大,阴影越模糊。数值越小,用于越清晰。它的值是一个浮点数,0表示阴影不模糊。
  shadowColor表示阴影的颜色。
  上面例子的实现代码如下:

  1. 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');
// create new image object to use as pattern
var img = new Image();
img.src = 'Canvas_createpattern.png';
img.onload = function(){
// create pattern
var ptrn = ctx.createPattern(img,'repeat');
ctx.fillStyle = ptrn;
ctx.fillRect(0,0,150,150)
登录后复制

我们在模式中使用的图片如下:

HTML5 CANVAS:绘制阴影和填充模式

上面代码的返回结果如下:

HTML5 CANVAS:绘制阴影和填充模式

以上就是HTML5 CANVAS:绘制阴影和填充模式的内容,更多相关内容请关注PHP中文网(www.php.cn)!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!