2.2.1 绘制Canvas路径

2.2.1 绘制Canvas路径 - 绘制线条

news2024/10/25 21:31:27

文章目录

1. 绘制线条
2. 绘制具有不同结束线帽的线条
3. 绘制向阳花图形

在这里插入图片描述
今天我们要一起探讨的是如何使用HTML5的Canvas元素来绘制各种图形。Canvas提供了一个强大的图形绘制API，使我们能够在网页上绘制出各种复杂的图形和动画。接下来，我将通过几个实战示例，带领大家了解Canvas的基本用法。

1. 绘制线条

绘制线条是Canvas中最基本的操作。首先，我们需要获取Canvas的2D渲染上下文，然后使用moveTo方法设置线条的起点，接着用lineTo方法指定线条的终点，最后调用stroke方法完成绘制。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(400, 200);
ctx.strokeStyle = 'red';
ctx.stroke();

这段代码将在Canvas上绘制一条从左上角(0, 0)到右下角(400, 200)的红色直线。

2. 绘制具有不同结束线帽的线条

在绘制直线时，我们还可以设置线帽的样式，来控制线条末端的形状。Canvas提供了三种线帽样式：butt、round和square。

ctx.lineWidth = 10;
ctx.lineCap = "butt"; // 平直的线帽
ctx.moveTo(20, 20);
ctx.lineTo(380, 20);
ctx.strokeStyle = "red";
ctx.stroke();

ctx.lineCap = "round"; // 圆形的线帽
ctx.moveTo(20, 40);
ctx.lineTo(380, 40);
ctx.strokeStyle = "green";
ctx.stroke();

ctx.lineCap = "square"; // 方形的线帽
ctx.moveTo(20, 60);
ctx.lineTo(380, 60);
ctx.strokeStyle = "blue";
ctx.stroke();

这段代码绘制了三条具有不同线帽样式的线条，展示了如何在Canvas上控制线条的细节。

3. 绘制向阳花图形

接下来，让我们绘制一个向阳花图形。这个图形由多个黄色的花瓣和深蓝色的轮廓组成，非常适合用来展示Canvas的绘制能力。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = "#eeeeef";
ctx.fillRect(0, 0, 300, 300);

var dx = 150;
var dy = 150;
var s = 100;
ctx.beginPath();
ctx.fillStyle = "rgb(255, 255, 0)";
ctx.strokeStyle = "rgb(0, 0, 100)";
var dig = Math.PI / 15 * 11;
for (var i = 0; i < 30; i++) {
    var x = Math.sin(dig * i);
    var y = Math.cos(dig * i);
    ctx.lineTo(dx + x * s, dy + y * s);
}
ctx.closePath();
ctx.fill();
ctx.stroke();