html5 cavnas 标签的文字怎么做的_随笔

HTML5新标签canvas来绘制文本文字可以这样做：

Shadows API 。

API 的属性为：

shadowColor：阴影颜色。其值和 CSS 颜色值一致。

shadowBlur：设置阴影模糊程度。此值越大，阴影越模糊。其效果和 Photoshop 的高斯模糊滤镜相同。

shadowOffsetX 和 shadowOffsetY：阴影的 x 和 y 偏移量

下面是HTML5代码部分

context.shadowOffsetX = 5

context.shadowOffsetY = 5

context.shadowBlur= 4

context.shadowColor = ‘rgba(255, 0, 0, 0.5)’

context.fillStyle = ‘#00f’

context.fillRect(20, 20, 150, 100)

这个简单啊，就用CSS3的新属性过渡 transition 就好了，代码如下：

<!DOCTYPE html>

<html>

<head>

<title>文字渐变效果</title>

div{

width: 100px

height: 30px

color: #000

transition: color 1s

}

div:hover{

color: yellow

}

</style>

</head>

<body>

<div>移入试试看</div>

</body>

</html>

制作有凹凸效果的水印，方法是：

1、新建文档，填充白色。

2、打字，如下图：

3、右键图层--混合选项--投影，如下图：

4、内阴影，如下图：

5、对于图像的效果，在混合模式中，有着丰富多彩、千变万化的效果，如增加渐变效果，如下图：

最后，删除背景图层，存储为PNG格式以备它用，如下图：

欢迎分享，转载请注明来源：内存溢出

html5 cavnas 标签的文字怎么做的