HTML5 Canvas渐进填充与透明
详细解释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);
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);
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);
二:透明度(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效果
使用径向颜色渐变与透明度变化,实现在图像上的半透明面罩效果,脚本运行效果:
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();
}
HTML5 Canvas渐进填充与透明的更多相关文章
- HTML5 Canvas 颜色填充学习
---恢复内容开始--- 如果我们想要给图形上色,有两个重要的属性可以做到:fillStyle 和 strokeStyle. fillStyle = color strokeStyle = color ...
- HTML5 Canvas ( 图片填充样式 ) fillStyle, createPattern
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- HTML5 Canvas 填充与描边(Fill And Stroke)
HTML5 Canvas 填充与描边(Fill And Stroke) 演示HTML5 Canvas Fill 与Stroke文字效果,基于Canvas如何实 现纹理填充与描边. 一:颜色填充与描边 ...
- [js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)
接着上文[js高手之路] html5 canvas系列教程 - 状态详解(save与restore),相信大家都应该玩过美颜功能,而我们今天要讲的就是canvas强大的像素处理能力,通过像素处理,实现 ...
- HTML5 程序设计 - 使用HTML5 Canvas API
请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...
- html5 Canvas API
详细内容请点击 1.HTML Canvas API有两方面优势可以弥补:首先,不需要将所绘制图像中的每个图元当做对象存储,因此执行性能非常好:其次,在其他编程语言现有的优秀二维绘图API的基础上实现C ...
- html5 canvas+js实现ps钢笔抠图
html5 canvas+js实现ps钢笔抠图 1. 项目要求需要用js实现photoshop中钢笔抠图功能,就用了近三四天的时间去解决它,最终还是基本上把他实现了. 做的过程中走了不少弯路,最终一同 ...
- html5 canvas 实现简单的画图
今天早上看了一下 canvas 前端画图,数据可视化, 百度的 echart.js , d3等 js 库都已经提供了强大的绘制各种图形的 API. 下面记录一下 有关canvas 绘图的基本知识: ...
- [js高手之路] html5 canvas系列教程 - 线形渐变,径向渐变与阴影设置
接着上文[js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)继续. 一.线形渐变 线形渐变指的是一条直线上发生的渐变. 用法: var linear ...
随机推荐
- c-连接两个链表
概述 还是相对简单,不过要记得释放不用的头结点即可. 代码为: //将lList2头结点连接在lList1尾结点的后面. void combine(linklist lList1, linklist ...
- 对exp full 和 imp full的认识
前段时间听同事说.Toad 工具可以打开 oracle数据库的 .dmp 文件.今天抽空试了试,果然可以!Oracle 执行 export 操作 会把 表的定义导出.表的数据导出. 其实 .dmp 文 ...
- 转:常用的HTML标签和属性解释
基本结构标签: <HTML>,表示该文件为HTML文件 <HEAD>,包含文件的标题,使用的脚本,样式定义等 <TITLE>---</TITLE>,包含 ...
- cas sso单点登录系列6_cas单点登录防止登出退出后刷新后退ticket失效报500错
转(http://blog.csdn.net/ae6623/article/details/9494601) 问题: 我登录了client2,又登录了client3,现在我把client2退出了,在c ...
- 【USACO 1.2.2】方块转换
[问题描述] 一块N x N(1<=N<=10)正方形的黑白瓦片的图案要被转换成新的正方形图案.写一个程序来找出将原始图案按照以下列转换方法转换成新图案的最小方式: 1:转90度:图案按顺 ...
- IE layout详解
引言: Internet Explorer 中有很多奇怪的渲染问题可以给他一个”layout”得到解决,John Gallant 和 Holly Bergevin把他归类为“dimensional b ...
- 如何做好Flex与Java交互
三种flex4与Java顺利通信的方式是: flex与普通java类通信RemoteObject; flex与服务器交互HTTPService; flex与webservice交互WebService ...
- java判断网络连接是否正常
/** * 判断本机当前的网络状态是否联通 * 在这里主要用到中国天气信息,所以访问百度地址是否能够访问成功来判断当前的网络状态 */ public static boolean isConnect( ...
- mybatis中association的column传入多个参数值
顾名思义,association是联合查询. 在使用association中一定要注意几个问题.文笔不好,白话文描述一下. 1: <association property="fncg ...
- MYSQL一对多,两表查询合并数据
select a.askid,a.title,GROUP_CONCAT(b.message SEPARATOR '----') as content from gg_ask as a join gg_ ...