fillStyle的第2种应用状况便是渐变色色的填充。渐变色色就分成线形渐变色色和轴向渐变色色。
线形渐变色:大概分成两步 这里又会应用到canvas的两个新的涵数。
第1步 : 应用1个新的涵数createLinearGradient( xstart，ystart,xend,yend );var linearGrad = context.createLinearGradient(xstart,ystart,xend,yend);
他有4个主要参数。各自为，xstart，ystart,xend,yend她们组成两个座标，这两个座标组成1个直线。这个直线具体上便是1个渐变色线。渐变色线用于界定渐变色的方位和限度。
第2步 : 便是在这个渐变色线的基本上加上colorStop,这个方式叫addColorStop(stop,color)。他有两个主要参数各自为stop,color。第1个主要参数是1个浮点值用来决策重要色的部位。第2个主要参数是用来决策重要色的色调。linearGrad.addColorStop(stop,color);
作为完这两步后这个linearGrad自变量便可以做为fillStyle传入这个特性中。
看编码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF⑻">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>线形渐变色</title>
</head>
<body>
<canvas id="canvas" style="border: 1px solid #aaa;display:block;margin:0 auto"></canvas>
</body>
</html>
<script>
window.onload = function () {
var canvas = document.getElementById("canvas");
canvas.width = 800;
canvas.height = 600;
if (canvas.getContext("2d")) {
var context = canvas.getContext("2d"); //获得左右文制图自然环境
var linearGrad = context.createLinearGradient(0, 0, 800, 600); //渐变色线的起止座标为(0,0)停止座标为(800,600)
linearGrad.addColorStop(0.0, '#000'); //第1个主要参数表明重要色调的部位0表明起止部位,1表明终点站部位,第2个主要参数表明重要色调的色调。
linearGrad.addColorStop(1.0, '#fff');
context.fillStyle = linearGrad;
context.fillRect(0, 0, 800, 600);
} else {
alert('您的访问器不适用canvas,请拆换访问器尝试~')
}
}
</script>
实际效果图:
当大家建立好linearGrad这个自变量后，大家是能够addColorStop是能够加上许多个的。
举个事例:
编码:
var linearGrad = context.createLinearGradient(0, 0, 800, 600); //渐变色线的起止座标为(0,0)停止座标为(800,600) linearGrad.addColorStop(0.0, '#fff'); linearGrad.addColorStop(0.25, '#FB3'); linearGrad.addColorStop(0.5, '#690'); linearGrad.addColorStop(0.75, '#09C'); linearGrad.addColorStop(1.0, '#000');
实际效果图:
也有大家界定的渐变色线是歪斜的，大家还可以界定成水平的或竖直的。大家要是改动1下渐变色线的停止座标便可。看编码,做成水平的渐变色色:
var linearGrad = context.createLinearGradient(0, 0, 800, 0);
实际效果图:
竖直的渐变色色:
var linearGrad = context.createLinearGradient(0, 0, 800, 0);
实际效果图:
大家所做的无论歪斜的水平的還是竖直的，全是贯穿了全部画布，那假如大家的渐变色线只特定到了画布的1一部分会是甚么实际效果呢？大家改动1下
var linearGrad = context.createLinearGradient(0, 0, 400, 300);
实际效果图:
同理大家所建立的渐变色线还可以超出这个画布的最大宽高。大家改动1下
var linearGrad = context.createLinearGradient(⑵00, ⑴00, 1000, 800);
实际效果图:
也有大家所绘图的填充的样子也不1定占满全部画布的。大家能够随意调剂自身界定的样子。这个填充的样子会在大家界定的渐变色网上寻找适合的填充色进而填充出来。举个事例:
var linearGrad = context.createLinearGradient(⑵00, ⑴00, 1000, 800);
实际效果图:
轴向渐变色:与线形渐变色的差别是，轴向渐变色界定的是1个放射性状的渐变色。而这个放射性状的渐变色是界定在两个同舟圆的基本上。而不像线形渐变色是界定在两点之间的。
轴向渐变色也是必须两步来进行。
第1步 : 应用1个新的涵数createRadialGradient(x0,y0,r0,x1,y1,r1); 他有6个主要参数。前3个主要参数界定第1个圆环的座标和半径，后3个主要参数界定第2个圆环的座标和半径。全部轴向渐变色就产生在这两个圆之间。var radialGrad = context.createRadialGradient(x0,y0,r0,x1,y1,r1);
第2步 : 和线形渐变色是1样的，就但是多详细介绍。radialGrad.addColorStop(stop,color);
编码和线形渐变色的编码10归类似。只但是这里应用的是createRadialGradient,大家给他传入主要参数createRadialGradient(300,300,0,300,300,500),前3个主要参数界定的是在画布管理中心，半径为0的1个点。后3个主要参数界定的是在画布管理中心半径为500的1个大圆。这样就界定了1个从1个点向外辐射源的1个轴向渐变色。看1下编码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF⑻">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>轴向渐变色</title>
</head>
<body>
<canvas id="canvas" style="border: 1px solid #aaa;display:block;margin:0 auto"></canvas>
</body>
</html>
<script>
window.onload = function () {
var canvas = document.getElementById("canvas");
canvas.width = 600;
canvas.height = 600;
if (canvas.getContext("2d")) {
var context = canvas.getContext("2d");
var radialGrad = context.createRadialGradient(300, 300, 0, 300, 300, 500);
radialGrad.addColorStop(0.0, '#fff');
radialGrad.addColorStop(0.25, '#FB3');
radialGrad.addColorStop(0.5, '#690');
radialGrad.addColorStop(0.75, '#09C');
radialGrad.addColorStop(1.0, '#000');
context.fillStyle = radialGrad;
context.fillRect(0, 0, 600, 600);
} else {
alert('您的访问器不适用canvas,请拆换访问器尝试~')
}
}
</script>
实际效果图:
大伙儿能够试着更改1下主要参数看来看会有甚么不一样的实际效果。
以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。