搜索
您的当前位置:首页正文

HTML5CANVAS:绘制阴影和填充模式

2023-11-26 来源:醉满楼美食网
绘制阴影

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

902.png

 在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)

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

903.png

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

904.png

醉满楼美食网还为您提供以下相关内容希望对您有帮助:

web前端中 对于canvas了解多少

1>将图形或图像绘制到一个无限大的透明位图中,在绘制时遵从当前的填充模式、描边模式以及线条样式。2>将图形或图像的阴影绘制到另外一幅位图中,在绘制时使用当前绘图环境的阴影设定。3>将阴影中每一个像素的alpha分量乘以...

HTML5 Canvas基本绘制线条教程

因为Canvas是基于状态的绘制,所以我们在选择画笔粗细和颜色的同时,其实也是选择了线条的粗细和颜色。4.确定绘制 确定绘制只有两种方法,fill()和stroke(),有点绘画基础的应该知道,前者是指填充,后者是指描边。因为我们只是...

html5的canvas绘制了个房间结构图,鼠标移动到哪个房间,哪个房间填充...

DOCTYPE html><html><head> <meta charset="utf-8"> </head><body><canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">您的浏览器不支持 HTML5 canvas 标签。</canvas><canvas...

如何在 HTML5 画布上绘图

步骤6: 更多 HTML5 画布提示 可以使用一系列属性(shadowColor、shadowBlur、shadowOffsetX 和 shadowOffsetY)应用阴影。 可以使用 createPattern 方法作为一种模式重复画布中的元素。 可以使用 save 方法保存画布状态,然后执行更改,再使用 ...

如何使用HTML5的Canvas图形元素绘制图形

1、canvas绘制矩形 <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>canvas绘制矩形</title> <script type="text/javascript" src="canvas2.js"></script> <style type="text...

有哪些好用的HTML5绘图工具?

1.Zwibbler 这款工具提供了各种图形的快捷方式,有点像Photoshop的工具面板。你可以从工具栏上拖着想要的图形形状,然后在画布上修改。方的,圆的,点、线等。这款神奇的HTML5绘图工具还能让你给图形配置阴影效果。拷贝,粘贴...

html5 两个canvas重叠放在一个div里面,每个canvas各填充一张图片,代码...

1、首先素材准备,基本框架的建立。这里让一个有字的图片从左到右运动起来。2、将图片素材引入网页,定义canvas标签,获取canvas的上下文。定义一个画图片的函数,使用canavs绘图API里面的drawImage来完成。3、写一个更新的函数...

如何用Canvas绘制多种图形

英文中 Canvas 的意思是“画布”,不过这里说的 Canvas 是 HTML5 中新出的一个元素,开发者可以在上面绘制一系列图形。Canvas 在 HTML 文件中的写法很简单:<canvas id="canvas" width="宽度" height="高度"></canvas>其中id 属性...

如何用HTML5 CANVAS绘制文字

我们可以在HTML5 canvas上绘制绘制文字,并且可以设置文字的字体,大小和颜色。绘制文字的字体由2D上下文的font属性来控制。如果你需要使用颜色来填充文字或制作描边文字,可以使用2D上下文的fillStyle和strokeStyle属性来完成。要在...

canvas闭合路径怎么填充颜色

本文实例讲述了js+html5实现canvas绘制椭圆形图案的方法,HTML5 canvas 没有画椭圆的方法,以下代码可以画出椭圆,分享给大家供大家参考,具体实现方法如下:1、在一个隐式的画布 (将 其 CSS 定义成:display:none; ) 上...

Top