canvas时钟

一、canvas时钟的创建与绘制

1、创建画布

创新互联建站是一家专注于成都做网站、成都网站建设和成都电信服务器托管的网络公司，有着丰富的建站经验和案例。

我们需要在HTML文件中创建一个元素，并设置其宽度和高度，在JavaScript中获取该元素的引用，以便我们可以在后续代码中操作它。

2、绘制背景

接下来，我们需要绘制时钟的背景，我们可以使用fillStyle属性设置填充颜色，并使用fillRect方法绘制一个矩形。

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'black';
ctx.fillRect(0, 0, canvas.width, canvas.height);

3、绘制刻度线

为了使时钟看起来更真实，我们需要在时钟的外圈上绘制刻度线，我们可以使用beginPath方法开始一个新的路径，然后使用moveTo、lineTo和stroke方法绘制线条。

function drawScale() {
    const centerX = canvas.width / 2;
    const centerY = canvas.height / 2;
    const radius = Math.min(centerX, centerY) * 0.9;
    const startAngle = Math.PI * (1 / 12); // 每隔30度绘制一条刻度线
    const endAngle = startAngle + Math.PI * (6 / 12); // 从1点到7点的角度差为60度(360度/12小时)

    ctx.beginPath();
    for (let i = 0; i <= 12; i++) {
        const angle = startAngle + Math.PI * (i / 12); // 每个刻度线的起始角度为30度的倍数
        const x = centerX + radius * Math.cos(angle);
        const y = centerY + radius * Math.sin(angle);
        ctx.lineTo(x, y);
    }
    ctx.strokeStyle = 'white';
    ctx.lineWidth = 2;
    ctx.stroke();
}

4、绘制指针

现在我们可以开始绘制指针了，我们需要为每个指针定义一个变量，包括其当前位置、长度、颜色等，我们可以使用beginPath、moveTo、lineTo和stroke方法绘制指针，我们需要更新指针的位置以使其保持在正确的位置。

function drawPointers() {
    const centerX = canvas.width / 2;
    const centerY = canvas.height / 2;
    const radius = Math.min(centerX, centerY) * 0.9;

    function drawHourPointer() {
        const hourAngle = (new Date()).getHours() * Math.PI * (1/12) + Math.PI * (5/12); // 以弧度表示当前小时数对应的角度
        ctx.save(); // 为了避免重叠，我们需要保存当前的绘图状态并重新设置坐标系和描边样式
        ctx.translate(centerX, centerY); // 将坐标系移动到画布中心，以便我们可以直接从画布边缘绘制指针
        ctx.rotate(hourAngle); // 将坐标系旋转到正确的角度，以便我们可以直接从画布边缘绘制指针
        ctx.beginPath(); // 从画布边缘开始一个新的路径，以便我们可以直接从画布边缘绘制指针
        ctx.moveTo(0, radius); // 将指针移动到正确的位置，以便它指向正确的时间(这里我们假设指针始终指向12点)
        ctx.lineTo(radius * Math.sin(hourAngle), radius * Math.cos(hourAngle)); // 根据当前小时数计算指针应该指向的位置，并绘制指针线段
        ctx.strokeStyle = 'white'; // 根据当前小时数设置指针的颜色(这里我们假设指针始终为白色)
        ctx.lineWidth = radius * (1/6); // 根据当前小时数设置指针的线宽(这里我们假设指针始终为半径的1/6)
        ctx.stroke(); // 在当前坐标系下绘制指针线段并恢复之前保存的绘图状态和坐标系设置(如果有的话)
    }

    function drawMinutePointer() {
        const minuteAngle = (new Date()).getMinutes() * Math.PI * (1/60) + Math.PI * (30/60); // 以弧度表示当前分钟数对应的角度
        ctx.save(); // 为了避免重叠，我们需要保存当前的绘图状态并重新设置坐标系和描边样式
        ctx.translate(centerX, centerY); // 将坐标系移动到画布中心，以便我们可以直接从画布边缘绘制指针
        ctx.rotate(minuteAngle); // 将坐标系旋转到正确的角度，以便我们可以直接从画布边缘绘制指针
        ctx.beginPath(); // 从画布边缘开始一个新的路径，以便我们可以直接从画布边缘绘制指针
        ctx.moveTo(radius * Math.sin(minuteAngle), radius * Math.cos(minuteAngle)); // 根据当前分钟数计算指针应该指向的位置，并绘制指针线段
        ctx.strokeStyle = 'blue'; // 根据当前分钟数设置指针的颜色(这里我们假设指针始终为蓝色)
        ctx.lineWidth = radius * (1/30); // 根据当前分钟数设置指针的线宽(这里我们假设指针始终为半径的1/30)
        ctx.stroke(); // 在当前坐标系下绘制指针线段并恢复之前保存的绘图状态和坐标系设置(如果有的话)
    }
}

分享文章：canvas时钟
文章出自：http://www.shufengxianlan.com/qtweb/news27/68377.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联