Canvas渐变
在HTML中,渐变可以简单地定义为从一种颜色变化到另一种颜色的模式。渐变色是由不同的颜色进行过渡,而不是单一的颜色。
HTML中的canvas渐变是可用于填充和绘制形状(如矩形、圆形、三角形、文本、线条等)的颜色模式。在画布上,形状不限于纯色。
canvas接口有两种生成渐变对象的方法,它通过以下方法返回:
- ctx.createLinearGradient(x1, y1, x2, y2),线性渐变。
- ctx.createRadialGradient(x1, y1, r1, x2, y2, r2),径向渐变。
在渐变对象的基础上添加colorStop,这个方法叫addColorStop(stop,color)。他有两个参数分别为stop,color。第一个参数是一个浮点值用来决定关键色的位置。第二个参数是用来决定关键色的颜色。
方法: createLinearGradient(x1, y1, x2, y2)
线性渐变以线性的模式来改变颜色,此方法返回一个CanvasGradient对象,该对象表示一个线性渐变,该渐变沿由参数表示的坐标给定的直线改变颜色。可以使用2d 上下文函数createLinearGradient()创建线性渐变。该函数包含4个参数,即x1、y1、x2、y2,定义了2个点,它们决定渐变图案的方向和延伸。渐变位于起始坐标(x1,y1)和结束坐标(x2,y2)之间。
有三种类型的线性渐变:
- 水平渐变只能通过使用或改变x轴上的参数值来创建,即(x1,x2)。
- 垂直渐变只能通过使用或改变y轴上的参数值来创建,即(y1,y2)。
- 对角线渐变可以通过使用或改变x轴(即x1,x2)和y轴(即y1,y2)上的参数值来创建。
样式属性
对于渐变样式,有两个样式属性可用于渐变对象绘制不同的形状,如三角形、矩形、圆形等。
渐变描边示例
<html>
<head>
<script>
function drawShape(){
var canvas = document.getElementById('CanvasGradient');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
var lgrad2 = ctx.createLinearGradient(0, 50, 0, 100);
lgrad2.addColorStop(0, 'blue');
lgrad2.addColorStop(0.5, 'purple');
lgrad2.addColorStop(1, 'red');
ctx.strokeStyle = lgrad2;
ctx.strokeRect(10, 40, 100, 100);
} else {
alert('浏览器不支持canvas');
}
}
</script>
</head>
<body onload="drawShape();">
<canvas id="CanvasGradient" width="250" height="150" ></canvas>
</body>
</body>
</html>
效果如下:
渐变填充示例
<html>
<body>
<canvas id="CanvasGradient" width="250" height="150" style="border:3px solid grey;"></canvas>
<script>
var canvas = document.getElementById('CanvasGradient');
var context = canvas.getContext('2d');
context.rect(5, 5, 240, 140);
// 添加线性渐变
var lgrd = context.createLinearGradient(0, 0, 200, 0);
lgrd.addColorStop(1, 'skyblue');
lgrd.addColorStop(0.6, 'purple');
lgrd.addColorStop(0, 'green');
context.fillStyle = lgrd;
context.fill();
</script>
</body>
</html>
效果如下:
线性渐变的另一个例子,同时包括“填充”和“描边样式”。
<html>
<head>
<script>
function drawShape(){
// 得到canvas元素
var canvas = document.getElementById('canvasGradient');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// 创建2个线性渐变
var lgrad1 = ctx.createLinearGradient(0, 0, 0 ,150);
lgrad1.addColorStop(0, 'blue');
lgrad1.addColorStop(0.25, 'skyblue');
lgrad1.addColorStop(0.75, 'lightgreen');
lgrad1.addColorStop(1, 'green');
var lgrad2 = ctx.createLinearGradient(0, 50, 0, 100);
lgrad2.addColorStop(0, 'blue');
lgrad2.addColorStop(1, 'green');
// 将线性渐变对象分配给填充和描边
ctx.fillStyle = lgrad1;
ctx.strokeStyle = lgrad2;
// draw shapes
ctx.fillRect(75, 5, 220, 140);
ctx.strokeRect(20, 50, 100, 50);
} else {
alert('你的浏览器不支持canvas');
}
}
</script>
</head>
<body onload="drawShape();">
<canvas id="canvasGradient" style="border:3px solid grey;"></canvas>
</body>
</html>
效果如下:
方法:createRadialGradient(x1,y1,r1,x2,y2,r2), 创建径向渐变
创建径向渐变。参数表示两个圆,一个圆心在(x1,y1),半径为r1,另一个圆心在(x2,y2),半径为r2。与线性渐变的区别是,径向渐变定义的是一个放射状的渐变。而这个放射状的渐变是定义在两个同心圆的基础上。而不像线性渐变是定义在两点之间的。
换言之,它可以被定义为一种以循环方式延伸的颜色模式,即从内部颜色向外延伸到一种或多种其他颜色。这可以通过两个圆来完成,每个圆都有圆心和半径。创建圆后,可以使用addStopColor()方法在渐变上定义具有指定偏移值和不同颜色的新停止点。
径向渐变例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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, '#585858');
radialGrad.addColorStop(0.25, '#336583');
radialGrad.addColorStop(0.5, '#690');
radialGrad.addColorStop(0.75, '#555');
radialGrad.addColorStop(1.0, '#000');
context.fillStyle = radialGrad;
context.fillRect(0, 0, 600, 600);
} else {
alert('您的浏览器不支持canvas,请更换浏览器尝试~')
}
}
</script>
效果如下: