Canvas 画五角星

前言

学习 canvas,更多的是需要动手实践,下面就从一个相对简单的例子:五角星开始吧!

不懂 canvas 的同学,请先学习:Canvas 画布

一、几何模型

由上图可以清晰的得到大概的思路,大圆和小圆上的点相间相连,就可以的到五角星。

我的做法是从右下角开始画。因为 canvas 的坐标系的第一象限,实际上是右下角,而不是右上角。这样,就可以避免纠结于 sin()cos() 的正负关系。

二、绘制

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var canvas = document.getElementById('canvas');
var cxt = canvas.getContext('2d');
var w = canvas.width;
var h = canvas.height;
var r1 = w / 2;
var r2 = r1 / 2;
var x1,x2,y1,y2;
cxt.translate(r1, r1);
cxt.beginPath();
for (var i = 0; i < 5; i++) {
x1 = r1 * Math.cos((54 + i*72)/180*Math.PI);
y1 = r1 * Math.sin((54 + i*72)/180*Math.PI);
x2 = r2 * Math.cos((18 + i*72)/180*Math.PI);
y2 = r2 * Math.sin((18 + i*72)/180*Math.PI);
cxt.lineTo(x2, y2);
cxt.lineTo(x1, y1);
}
cxt.closePath();
cxt.stroke();
  • 获取绘图上下文环境
  • 获取 canvas 的宽高,并由此定义两个圆的半径
  • 将原点重置到 (r, r) 圆心位置
  • 使用 lineTo() 绘制路径

注意

  1. 因为右下角第一个点是小圆上的,所以循环中先画小圆上的点。
  2. beginPath() 方法后,可以直接使用 lineTo() 代替 moveTo()
  3. 注意闭合路径使得最后一个点与开始的点连成线。

三、拓展

这样的五角星太单一,如果想获取其他的五角星形状,该如何处理。

观察下,大圆的半径是由 canvas 的宽高决定的,而小圆的半径则是可以改变的。这里的代码中 r1 = r2 / 2

试着改变这个比例:

r1 = r2 / 2.5

r1 = r2 / 3

你还可以继续调整得到了不一样的五角星!

四、封装

为了复用,可以将其封装成一个函数:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/*****************************
* cxt 为绘图上下文环境
* r 为小圆半径
* R 为大圆半径
* x,y 为相对 canvas 原点的坐标位置
* rot 为顺时针旋转角度
****************************/
function draw_start(cxt, r, R, x, y, rot) {
cxt.beginPath();
for (var i = 0; i < 5; i++) {
var x1 = R * Math.cos((54 + i*72 + rot)/180*Math.PI) + x;
var y1 = R * Math.sin((54 + i*72 + rot)/180*Math.PI) + y;
var x2 = r * Math.cos((18 + i*72 + rot)/180*Math.PI) + x;
var y2 = r * Math.sin((18 + i*72 + rot)/180*Math.PI) + y;
cxt.lineTo(x2, y2);
cxt.lineTo(x1, y1);
}
cxt.closePath();
cxt.stroke();
}

原先代码画五角星就变为:

1
draw_start(cxt, r2, r1, r1, r1, 0);

生命的意义不仅是活着,而是我们给别人的生命带来了何种不同。

----------本文结束感谢您的阅读----------
坚持原创技术分享,您的支持将鼓励我继续创作!
0%