HTML5 Canvas渐进填充与透明实现图像的Mask效果


Posted in HTML / CSS onJuly 11, 2013

详细解释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)方向颜色渐进

复制代码
代码如下:

// vertical/Y direction
var lineGradient = ctx.createLinearGradient (50, 0, 50, 200);
lineGradient.addColorStop(0, 'rgba(255, 0, 0, 1)');
lineGradient.addColorStop(1, 'rgba(255, 255, 0, 1)');
ctx.fillStyle = lineGradient;
ctx.fillRect(0, 0, 300, 300);

HTML5 Canvas渐进填充与透明实现图像的Mask效果 
2. 水平(X)方向颜色渐进
复制代码
代码如下:

// horizontal/X direction
var lineGradient = ctx.createLinearGradient (0, 50, 200, 50);
lineGradient.addColorStop(0, 'rgba(255, 0, 0, 1)');
lineGradient.addColorStop(1, 'rgba(255, 255, 0, 1)');
ctx.fillStyle = lineGradient;
ctx.fillRect(0, 0, 300, 300);

HTML5 Canvas渐进填充与透明实现图像的Mask效果 
3.垂直与水平同时(XY方向)颜色渐进
复制代码
代码如下:

// vertical and horizontal direction
var lineGradient = ctx.createLinearGradient (0, 0, 200, 200);
lineGradient.addColorStop(0, 'rgba(255, 0, 0, 1)');
lineGradient.addColorStop(1, 'rgba(255, 255, 0, 1)');
ctx.fillStyle = lineGradient;
ctx.fillRect(0, 0, 300, 300);

HTML5 Canvas渐进填充与透明实现图像的Mask效果 
二:透明度(Transparent)
Canvas中透明度支持分为全局与局部透明设置,全局透明度的设置可以通过设置
Context.globalAlpha来实现。局部透明度可以通过fillStyle设置颜色值中alpha值通道
来实现。两种方式代码如下:
// change global alpha value
ctx.globalAlpha=0.5;
ctx.fillRect(50,50,75,50);
// change fill style color's alphachannel
ctx.fillStyle = 'rgba(225,225,225,0.5)';
ctx.fillRect(50,50,75,50);
两个效果是一样的。

三:照片透明渐进Mask效果
使用径向颜色渐变与透明度变化,实现在图像上的半透明面罩效果,脚本运行效果:
HTML5 Canvas渐进填充与透明实现图像的Mask效果 

复制代码
代码如下:

var myImage = document.createElement('img');
myImage.src = "../test.png";
myImage.onload = function() {
ctx.drawImage(myImage, 80, 30, myImage.naturalWidth, myImage.naturalHeight);
var radialGradient = ctx.createRadialGradient (canvas.width/2, canvas.height/2, 10, canvas.width/2, canvas.height/2, 200);
radialGradient.addColorStop(0, 'rgba(247, 247, 247, 0)');
radialGradient.addColorStop(0.7, 'rgba(120, 120, 120, 0.5)');
radialGradient.addColorStop(0.9, 'rgba(0, 0, 0, 0.8)');
radialGradient.addColorStop(1, 'rgba(238, 238, 238, 1)');
ctx.beginPath();
ctx.arc(canvas.width/2, canvas.height/2, 300, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fillStyle = radialGradient;
ctx.fill();
}
HTML / CSS 相关文章推荐
CSS3盒子模型详解
Apr 24 HTML / CSS
CSS3动画:5种预载动画效果实例
Apr 05 HTML / CSS
仿CSDN Blog返回页面顶部功能实现原理及代码
Jun 30 HTML / CSS
深入解析HTML5的IndexedDB索引数据库
Sep 14 HTML / CSS
实例讲解使用SVG制作loading加载动画的方法
Apr 05 HTML / CSS
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
Jan 10 HTML / CSS
浅谈Html5移动端ios/Android兼容性总结
Jun 01 HTML / CSS
canvas里面如何基于随机点绘制一个多边形的方法
Jun 13 HTML / CSS
HTML5 body设置自适应全屏
May 07 HTML / CSS
html5实现输入框fixed定位在屏幕最底部兼容性
Jul 03 HTML / CSS
html粘性页脚的具体使用
Jan 18 HTML / CSS
POST提交数据常见的四种方式
Jan 18 HTML / CSS
HTML5 Canvas draw方法制作动画效果示例
Jul 11 #HTML / CSS
HTML5验证以及日期显示的实现详解
Jul 05 #HTML / CSS
html标签之Object和EMBED标签详解
Jul 04 #HTML / CSS
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
Jul 04 #HTML / CSS
HTML5 Canvas鼠标与键盘事件demo示例
Jul 04 #HTML / CSS
HTML5 Canvas的性能提高技巧经验分享
Jul 02 #HTML / CSS
html5 CSS过度-webkit-transition使用介绍
Jul 02 #HTML / CSS
You might like
coreseek 搜索英文的问题详解
2013/06/08 PHP
PHP获取指定日期是星期几的实现方法
2016/11/30 PHP
LNMP部署laravel以及xhprof安装使用教程
2017/09/14 PHP
Firebug入门指南(Firefox浏览器)
2010/08/21 Javascript
js处理json以及字符串的比较等常用操作
2013/09/08 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
2013/12/06 Javascript
javascript 控制input只允许输入的各种指定内容
2014/06/19 Javascript
jQuery()方法的第二个参数详解
2015/04/29 Javascript
JavaScript 2048 游戏实例代码(简单易懂)
2016/03/25 Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
2016/03/29 Javascript
Bootstrap实现下拉菜单效果
2016/04/29 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
2017/05/08 jQuery
详解React-Native解决键盘遮挡问题(Keyboard遮挡问题)
2017/07/13 Javascript
js防刷新的倒计时代码 js倒计时代码
2017/09/06 Javascript
JavaScript设计模式之代理模式简单实例教程
2018/07/03 Javascript
[05:08]顺网杯ISS-DOTA2赛歌 少女偶像Lunar青春演绎
2013/12/05 DOTA
python僵尸进程产生的原因
2017/07/21 Python
Python基于列表list实现的CRUD操作功能示例
2018/01/05 Python
pyinstaller打包opencv和numpy程序运行错误解决
2019/08/16 Python
python实现淘宝购物系统
2019/10/25 Python
了解一下python内建模块collections
2020/09/07 Python
python爬虫scrapy基本使用超详细教程
2021/02/20 Python
html5的websockets全双工通信详解学习示例
2014/02/26 HTML / CSS
HTML5制作表格样式
2016/11/15 HTML / CSS
AmazeUI 加载进度条的实现示例
2020/08/20 HTML / CSS
Ellos丹麦:时尚和服装在线
2016/09/19 全球购物
世界排名第一的万圣节服装店:Spirit Halloween
2018/10/16 全球购物
数据库笔试题
2013/05/09 面试题
医学生求职信
2014/07/01 职场文书
2014年英语教师工作总结
2014/12/03 职场文书
2015年党风廉政建设目标责任书
2015/05/08 职场文书
追讨欠款律师函
2015/06/24 职场文书
奠基仪式致辞
2015/07/30 职场文书
浏览器常用基本操作之python3+selenium4自动化测试(基础篇3)
2021/05/21 Python
变长双向rnn的正确使用姿势教学
2021/05/31 Python
MySQL的全局锁和表级锁的具体使用
2021/08/23 MySQL