六、填充样式 Fill Style
6.1纯色填充 Color Fill
要用纯色填充HTML5画布形状,可以将fillStyle属性设置为颜色字符串(如蓝色)、十六进制值(如0000FF)或RGB值(如rgb(0,0255),然后可以使用fill()方法来填充形状。除非另有声明,否则HTML5画布形状的默认填充样式为黑色。
注意:在为形状设置填充和笔划时,请确保在stroke()之前使用fill()。否则,填充将重叠。
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// begin custom shape
context.beginPath();
context.moveTo(170, 80);
context.bezierCurveTo(130, 100, 130, 150, 230, 150);
context.bezierCurveTo(250, 180, 320, 180, 340, 150);
context.bezierCurveTo(420, 150, 420, 120, 390, 100);
context.bezierCurveTo(430, 40, 370, 30, 340, 50);
context.bezierCurveTo(320, 5, 250, 20, 250, 50);
context.bezierCurveTo(200, 5, 150, 20, 170, 80);
// complete custom shape
context.closePath();
context.lineWidth = 5;
context.fillStyle = '#8ED6FF';
context.fill();
context.strokeStyle = 'blue';
context.stroke();
</script>
</body>
</html>
以上代码演示了在画布上绘制一个自定义闭合形状,并用纯色填充。
6.2线形渐变填充 Linear Gradient
为了在HTML5画布上进行线性渐变填充,可以使用createLinearGradient()方法。线性渐变通过声明渐变方向来定义。一旦创建了渐变,就可以使用addColorStop属性插入颜色。
线性渐变的方向从createLinearGradient()定义的假象线的起点移动到终点。在本教程中,使用了两种颜色停顿,一种用于在渐变开始的浅蓝色,一种用于渐变结束的深蓝色。颜色停止沿虚线放置在0和1之间,其中0位于起始点,1位于结束点。
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.rect(0, 0, canvas.width, canvas.height);
// add linear gradient
var grd = context.createLinearGradient(0, 0, canvas.width, canvas.height);
// light blue
grd.addColorStop(0, '#8ED6FF');
// dark blue
grd.addColorStop(1, '#004CB3');
context.fillStyle = grd;
context.fill();
</script>
</body>
</html>
以上代码演示了在画布上绘制一个矩形,并使用线形渐变进行填充。
6.3径向渐变填充 Radial Gradient
为了在HTML5画布上进行径向渐变填充,我们可以使用createRadialGradient()方法。径向渐变定义为两个假想圆:起始圆和结束圆,渐变从起始圆开始,向结束圆移动。
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.rect(0, 0, canvas.width, canvas.height);
// create radial gradient
var grd = context.createRadialGradient(238, 50, 10, 238, 50, 300);
// light blue
grd.addColorStop(0, '#8ED6FF');
// dark blue
grd.addColorStop(1, '#004CB3');
context.fillStyle = grd;
context.fill();
</script>
</body>
</html>
以上代码演示了在画布上绘制一个矩形,并用径向渐变填充。
6.4模式填充 Pattern Fill
为了在HTML5画布上进行模式填充,我们可以使用createPattern()方法来返回一个模式对象,将fillStyle属性设置为模式对象,然后使用fill()方法填充形状。createPattern()方法需要一个图像对象和一个重复选项,它可以是repeat、repeat-x、repeat-y或no-repeat。除非另有声明,否则重复选项默认为repeat。
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
var pattern = context.createPattern(imageObj, 'repeat');
context.rect(0, 0, canvas.width, canvas.height);
context.fillStyle = pattern;
context.fill();
};
imageObj.src = 'wood-pattern.png';
</script>
</body>
</html>
以上代码演示了在画布上创建一个矩形,并用背景图片重复填充。