欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > html5案例分享 >

HTML5 Canvas渐进添补与透明实现图像的Mask结果

发布时间:2016-11-26  编辑:杨雨个人博客网站   点击:   

具体表明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();
}
本文地址:http://itbyc.com/web/html5/13363.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1