canvas画布：绘制旋转的五角星

马黑黑 · 发表于 2024-5-9 12:22

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

效果

马黑黑 · 发表于 2024-5-9 12:23

代码

var mov = true, raf = null;

var ctx = canv.getContext('2d');

class fiveStar {

constructor(cx,cy,r,fillcolor='yellow',strokecolor='red') {

this.cx = cx;

this.cy = cy;

this.r = r;

this.points = [];

this.keys = [0,2,4,1,3];

this.fillcolor = fillcolor;

this.strokecolor = strokecolor;

this.deg = 0;

};

create() {

for(let i = 0; i < 5; i ++) {

var x = this.cx + this.r * Math.cos((72 * i - this.deg) * Math.PI/180),

y = this.cy + this.r * Math.sin((72 * i - this.deg) * Math.PI/180);

this.points.push({x: x, y: y});

}

};

draw() {

ctx.beginPath();

this.points.forEach((_,key) => ctx.lineTo(this.points[this.keys[key]].x, this.points[this.keys[key]].y));

ctx.closePath();

ctx.lineWidth = 3;

ctx.strokeStyle = this.strokecolor;

ctx.fillStyle = this.fillcolor;

ctx.stroke();

ctx.fill();

};

rot() {

this.deg = (this.deg + 0.5) % 360;

ctx.save();

ctx.translate(this.cx, this.cy);

ctx.rotate(this.deg * Math.PI / 180);

ctx.translate(-this.cx, -this.cy);

star.draw();

ctx.restore();

};

var star = new fiveStar(200,200, 180);

star.create();

var render = () => {

if (mov) raf = requestAnimationFrame(render);

else cancelAnimationFrame(raf);

ctx.clearRect(0, 0, canv.width, canv.height);

star.rot();

};

render();

canv.onclick = () => {

mov = !mov;

render();

};

</script>

马黑黑 · 发表于 2024-5-9 12:23

本帖最后由马黑黑于 2024-5-9 12:57 编辑

本次绘制正五角星的方法，请参考：canvas画布绘制正五角星

以下是对二楼代码的简单解释——

第 5 行

var mov = true, raf = null;

mov 变量是控制动画的布尔开关，raf 变量是 requestAnimationFrame API 执行返回值。当 mov 为真，requestAnimationFrame 将运行从而产生动画，否则，当 mov 为假，取消 raf。

第 8~45 行

首先声明一个 fiveStar 类，代表五角星。其中，通过构造函数 constructor() 构造五角星的一些常规属性：圆心坐标（cx, cy）、半径（r）、描边颜色和填充颜色（strokecolor、fillcolor）、顶点坐标值数组（points）、顶点连接序列（keys）、变化的角度变量（deg）。其中，cx、cy、r 为必选，即在实例化五角星时必须要给出的参数，其余属性为可选，即在实例化应用时可以配置或不配置这些参数。

接着给 fiveStar 这个类定义一些方法：

一是 create() ：代码在 19~25 行，其作用是计算五角星的顶点坐标值并存储起来；

二是 draw() ：代码在 26~35 行，功能是绘制五角星；

三是 rot() ：代码在 36~44 行，这个方法在 360 度范围内变更 fiveStar 的 deg 变量（变更系数 0.5），更改画布坐标系，然后调用 draw 方法绘制五角星。

第 47~48 行

实例化 fiveStar 类，圆心坐标为（200,200）、半径为（180）；调用类的方法 create() 生成一个五角星。

第 50~55 行

这是渲染函数：依据 mov 变量决定运行还是注销 requestAnimationFrame API，每次清空画布（如果不清空在本例效果也挺好的），然后调用类的 rot() 方法。

第 57 行首次启动动画

render();

第 59~62 行

画布点击事件：每次点击 mov 布尔变量值互反，并运行一下 render() 渲染函数，函数会根据 mov 的变量值决定是否渲染动画。