JavaScript练习2——动态“钟”的绘制

实现效果：

 分析需求：

1、需要每隔一定时间间隔执行一次绘图，实现旋转效果

2、需要绘制矩形框、圆形缺口框、文字

3、需要设置style

代码实现：

下面给出关键代码的实现，部分函数在之前的文章已经给出

https://blog.csdn.net/Q_w7742/article/details/144012064

// 定义一个常量，代表矩形的尺寸
const RECT_SIZE = 70;// 定义一个常量，代表文本的初始位置
const TEXT_INIT_POS = { x: 0, y: 0 };// 定义一个常量，代表圆的初始角度
const CIRCLE_INIT_EANGLE = -Math.PI * 3 / 2;// 定义drawBakCanvas函数，用于绘制背景画布
function drawBakCanvas() {// 创建重复图案let pattern = context.createPattern(image, 'repeat');// 设置矩形属性let rect = {w: RECT_SIZE,h: RECT_SIZE,x: -RECT_SIZE / 2,y: -RECT_SIZE / 2};// 设置文本属性let text = {x: TEXT_INIT_POS.x,y: TEXT_INIT_POS.y};// 绘制文本drawText(bakContext, text, 1, 64);// 绘制矩形drawRect(bakContext, rect, pattern, 0, 8);// 设置圆属性let circle = {eAngle: CIRCLE_INIT_EANGLE,x: 0,y: 0};// 绘制圆路径drawCirclePath(bakContext, circle, 1, 0);// 在路径上填充颜色putColorOnPath(bakContext, pattern, 0, 8);
}// 定义imageAngle变量，控制中心图像的旋转弧度
let imageAngle = 0;// 定义drawBakCanvasimage函数，用于绘制背景画布图像
function drawBakCanvasImage() {// 清除画布bakContext.clearRect(0, 0, bakCanvas.width, bakCanvas.height);// 保存绘图环境bakContext.save();// 平移坐标系到画布中心bakContext.translate(bakCanvas.width / 2, bakCanvas.height / 2);// 旋转坐标系bakContext.rotate(imageAngle);// 绘制背景画布drawBakCanvas();// 还原绘图环境bakContext.restore();// 更新图像旋转角度imageAngle += Math.PI / 16;
}

接下去可以使用例如setInterval或者requestAnimationFrame等函数来使绘制的图形旋转起来。