HTML5 Canvas渐进填充与透明

简介: 详细解释HTML5 Canvas中渐进填充的参数设置与使用,Canvas中透明度的设置与使 用,结合渐进填充与透明度支持,实现图像的Mask效果。 一:渐进填充(Gradient Fill) Canvas支持两种渐进填充方式,一种为线性渐进填充(Line Gradient Fill),另外一种称 为经向渐变填充(RadialGradient Fill)。

详细解释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();
}

目录
相关文章
|
9月前
|
移动开发 前端开发 HTML5
基于HTML5+Canvas绘制的鼠标跟随三角形碎片光标动画代码
基于HTML5+Canvas绘制的鼠标跟随三角形碎片光标动画特效代码,很有意思,一团三角形碎片跟随鼠标的移动,不冗长、不笨重,反而有一种很轻盈的感觉,非常不错
128 29
|
9月前
|
移动开发 前端开发 HTML5
Html5 Canvas绘制圆形仪表盘动画源码
Html5 Canvas绘制圆形仪表盘动画特效是一款基于HTML5 Canvas绘制的圆形百分比仪表盘动画特效。
80 1
|
10月前
|
Web App开发 移动开发 前端开发
html5 canvas五彩碎纸屑飘落动画特效
h5 canvas飘落纸片动画是一款实现五彩纸屑飘落的背景动画特效,基于canvas绘制的空中飘落的纸屑片动画特效,适用于网页动态背景效果代码。简单使用,欢迎下载!代码适用浏览器:搜狗、360、FireFox(建议)、Chrome、Safari、Opera、傲游、世界之窗,是一款不错的的特效插件,希望大家喜欢!
137 5
|
11月前
|
前端开发
基于canvas实现的彩色纸屑组成文字3d动画HTML源码
基于canvas实现的彩色纸屑组成文字3d动画HTML源码
93 0
基于canvas实现的彩色纸屑组成文字3d动画HTML源码
|
11月前
|
移动开发 前端开发 HTML5
HTML5 Canvas制作的粒子十秒倒计时源码
一段基于HTML5 Canvas制作的粒子爆炸,十秒数字倒计时,全屏倒计时动画效果,给人一种非常大气的视觉感
115 0
HTML5 Canvas制作的粒子十秒倒计时源码
|
11月前
|
前端开发 JavaScript
Canvas三维变化背景动画HTML源码
Canvas三维变化背景动画HTML源码
105 5
|
XML 移动开发 前端开发
HTML5 SVG和canvas的性能探讨
HTML5 中的 SVG(可缩放矢量图形)和 Canvas(画布)分别用于网页图形绘制。SVG 基于矢量图形,使用 XML 描述,适合静态或少量动态内容(如图标、图表),易于编辑且保持高分辨率;Canvas 则基于位图,通过 JavaScript 绘制,更适合快速更新大量图形的场景(如游戏、动态动画),但在复杂图形计算时可能遇到性能瓶颈。总体而言,SVG 适用于静态和少量动态内容,而 Canvas 更适合高频率更新和性能要求高的场景。
|
移动开发 前端开发 JavaScript
HTML5 Canvas详解及应用
HTML5 Canvas 允许通过 JavaScript 在网页上动态绘制图形、动画等视觉内容。首先在 HTML 中定义 `<canvas>` 元素,并通过 JavaScript 获取画布上下文进行绘制。常见方法包括绘制矩形、路径、圆形和文本,以及处理图像和创建动画效果。适用于游戏开发、数据可视化、图像编辑和动态图形展示等多种应用场景。需要注意性能优化、无状态绘制及自行处理事件等问题。
|
移动开发 前端开发 数据挖掘
用HTML5中的 画布(Canvas)在“圳品”信息系统网页上绘制显示饼图
用HTML5中的 画布(Canvas)在“圳品”信息系统网页上绘制显示饼图
|
前端开发
在 HTML canvas 绘制文本
在 HTML canvas 绘制文本
123 0

热门文章

最新文章