HTML5 Canvas渐进填充与透明实现图像的Mask效果
摘要：详细解释HTML5Canvas中渐进填充的参数设置与使用，Canvas中透明度的设置与使用，结合渐进填充与透明度支持，实现图像的Mask效果...
详细解释HTML5 Canvas中渐进填充的参数设置与使用，Canvas中透明度的设置与使用，结合渐进填充与透明度支持，实现图像的Mask效果。
一：渐进填充(Gradient Fill)
Canvas支持两种渐进填充方式，一种为线性渐进填充(Line Gradient Fill)，另外一种称
为经向渐变填充(RadialGradient Fill)。其API分别为：
createLinearGradient(x1, y1, x2, y2);
其中x1,y1为第一个点坐标，x2,y2为第二个点坐标。
createRadialGradient(x1, y1, r1, x2, y2, r2);
其中x1, y1为第一个中心点坐标,r1为半径，x2, y2为第二个中心点坐标，r2为半径。
为每个点设置颜色
addColorStop(position, color);
其中position表示位置，大小范围[0~1]其中0表示第一个点，1表示第二个点坐标
Color表示颜色值，任何CSS的颜色值。
渐进填充对象创建与配置之后可以用来设置context的strokeStyle与fillStyle实现文字，
几何形状的渐进颜色填充。
线性渐进方式的代码演示：
1. 垂直(Y)方向颜色渐进
复制代码
【HTML5 Canvas渐进填充与透明实现图像的Mask效果】相关文章：
★ HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
★ 借助HTML5 Canvas API制作一个简单的猜字游戏
★ HTML5实现页面切换激活的PageVisibility API使用初探
★ 解决canvas转base64/jpeg时透明区域变成黑色背景的方法
相关阅读
网友关注
网友最新关注视频
精品推荐
网页设计子分类
最新HTML5教程学习