HTML5 Canvas 教程：六、填充样式

最新推荐文章于 2024-04-20 16:29:18 发布

司码君

最新推荐文章于 2024-04-20 16:29:18 发布

阅读量1.2k

点赞数

文章标签： HTML5 Canvas

六、填充样式 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>

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>

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>

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>

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>

以上代码演示了在画布上创建一个矩形，并用背景图片重复填充。

司码君

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5 Canvas 教程：六、填充样式

六、填充样式 Fill Style 6.1纯色填充 Color Fill 要用纯色填充HTML5画布形状，可以将fillStyle属性设置为颜色字符串（如蓝色）、十六进制值（如0000FF）或RGB值（如rgb（0,0255），然后可以使用fill()方法来填充形状。除非另有声明，否则HTML5画布形状的默认填充样式为黑色。注意：在为形状设置填充和笔划时，请确保在stro...
复制链接

扫一扫