一聚教程网:一个值得你收藏的教程网站

热门教程

HTML5中使用Canvas绘制带阴影效果的图形

时间:2022-06-25 18:15:05 编辑:袖梨 来源:一聚教程网

1,阴影的相关属性

HTML5 Canvas中提供了设置阴影的四个属性值分别为:

context.shadowColor = “red” 表示设置阴影颜色为红色

context.shadowOffsetX = 0表示阴影相对TEXT的水平距离,0表示两者水平位置重合

context.shadowOffsetY = 0表示阴影相对TEXT的垂直距离,0表示两者垂直位置重合

context.shadowBlur = 10 阴影模糊效果,值越大模糊越厉害。

shadowColor:阴影颜色(通常使用中性灰,也可使用半透明的颜色。)
shadowBlur:阴影的模糊程度(0表示锐利的阴影,即轮廓与原始形状一样鲜明。一般20就比较模糊了。)
shadowOffsetX、shadowOffsetY:阴影相对于内容的位置(两个属性都设5,表示阴影在原图形向下、向右各5个像素的位置)

一个最简单的带有阴影的矩形代码如下:

context.shadowColor = "RGBA(127,127,127,1)";

context.shadowOffsetX = 3;

context.shadowOffsetY = 3;

context.shadowBlur = 0;

context.fillStyle = "RGBA(0, 0, 0, 0.8)"; 

context.fillRect(10, hh+10, 200,canvas.height/4-20);

2,阴影的使用样例

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
 
//绘制矩形阴影
context.rect(20, 20, 200 , 100);
context.fillStyle = "#8ED6FF";
context.shadowColor = "#bbbbbb";
context.shadowBlur = 20;
context.shadowOffsetX = 15;
context.shadowOffsetY = 15;
context.fill();
 
//绘制星形阴影
context.shadowOffsetX = 10;
context.shadowOffsetY = 10;
context.shadowBlur = 4;
var img = document.getElementById("star");
context.drawImage(img, 250, 30);
 
context.textBaseLine = "top";
context.font = "bold 20px Arial";
 
//绘制三行文本的阴影
context.shadowBlur = 3;
context.shadowOffsetX = 2;
context.shadowOffsetY = 2;
context.fillStyle = "steelblue";
context.fillText("Welcome to 111com.net", 10, 175);
 
context.shadowBlur = 5;
context.shadowOffsetX = 20;
context.shadowOffsetY = 20;
context.fillStyle = "green";
context.fillText("Welcome to 111com.net", 10, 225);
 
context.shadowBlur = 15;
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
context.shadowColor = "black"
context.fillStyle = "white";
context.fillText("Welcome to 111com.net", 10, 290);

例子






Canvas Clip Demo
css" rel="stylesheet" />
 


 

HTML5 Canvas Clip Demo - By Gloomy Fish


 
Fill And Stroke Clip

 

  
 


热门栏目