Canvas简易秒表

佐菲捡了艾斯

已于 2024-05-04 11:57:28 修改

阅读量330

点赞数 13

文章标签：算法 python 编程语言 java javascript 前端

于 2024-05-04 11:36:06 首次发布

本文链接：https://blog.csdn.net/qq_46502659/article/details/138436615

版权

canva初学–简易秒表

创建画布

创建canvas画布，指定画布宽高属性为屏幕宽高

var can = document.getElementById("mycanvas");
var w = window.screen.width;
var h = window.screen.height;
can.setAttribute("width", w);
can.setAttribute("height", h);
var ctx = can.getContext("2d");

画表框

画表框，表款为圆，圆心坐标 (x，y)，圆半径 r

var x = w / 2 - 100;
var y = h / 2 - 100;
var r = 200;
ctx.arc(x, y, r + 5, 0, 2 * Math.PI);
ctx.strokeStyle = "black"; // 黑色边框
ctx.lineWidth = "5"; // 线宽为5
ctx.stroke();

绘制刻度线

刻度线线长为5，刻度线所在直线过圆心，使用正弦sin余弦cos控制刻度线方向
在这里插入图片描述
起始坐标 (x1,y1)，终点坐标 (x2,y2)

ctx.beginPath();
ctx.lineWidth = "2";
ctx.strokeStyle = "blue";
for (var i = 0; i < 60; i++) {
    var x1 = x + r * Math.sin(i * Math.PI / 30);
    var y1 = y - r * Math.cos(i * Math.PI / 30);
    var x2 = x + (r - 5) * Math.sin(i * Math.PI / 30);
    var y2 = y - (r - 5) * Math.cos(i * Math.PI / 30);
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
}
ctx.stroke();

绘制数字刻度线

一共十二个数字刻度线，数字刻度线为红色，并标注数字
起始坐标 (x1,y1)，终点坐标 (x2,y2)，数字坐标 (x3,y3)

ctx.beginPath();
ctx.strokeStyle = "red";
for (var i = 0; i < 12; i++) {
    var x1 = x + r * Math.sin(i * Math.PI / 6);
    var y1 = y - r * Math.cos(i * Math.PI / 6);
    var x2 = x + (r - 10) * Math.sin(i * Math.PI / 6);
    var y2 = y - (r - 10) * Math.cos(i * Math.PI / 6);
    var x3 = x + (r - 20) * Math.sin(i * Math.PI / 6);
    var y3 = y - (r - 20) * Math.cos(i * Math.PI / 6);
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.fillText(i == 0 ? 12 : i, x3, y3);
}
ctx.stroke();

指针函数

采用如下算法
先把整个圆圈北京变白，然后绘制下一次秒表指针

var i = 0;
var aa = function () {
    ctx.beginPath();
    ctx.strokeStyle = "white";
    ctx.arc(x, y, r - 30, 0, 2 * Math.PI);
    ctx.fillStyle = "white";
    ctx.fill();
    ctx.stroke();

    ctx.beginPath();
    ctx.strokeStyle = "black";
    ctx.moveTo(x, y);
    var x4 = x + (r - 30) * Math.sin(i * Math.PI / 30);
    var y4 = y - (r - 30) * Math.cos(i * Math.PI / 30);
    ctx.lineTo(x4, y4);
    ctx.stroke();
    i++;
}

执行函数

每一秒中执行一次上面函数

setInterval(aa, 1000);

完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="mycanvas"></canvas>
<script>
    var can = document.getElementById("mycanvas");
    var w = window.screen.width;
    var h = window.screen.height;
    can.setAttribute("width", w);
    can.setAttribute("height", h);
    var ctx = can.getContext("2d");
    var x = w / 2 - 100;
    var y = h / 2 - 100;
    var r = 200;
    ctx.arc(x, y, r + 5, 0, 2 * Math.PI);
    ctx.strokeStyle = "black";
    ctx.lineWidth = "5";
    ctx.stroke();

    ctx.beginPath();
    ctx.lineWidth = "2";
    ctx.strokeStyle = "blue";
    for (var i = 0; i < 60; i++) {
        var x1 = x + r * Math.sin(i * Math.PI / 30);
        var y1 = y - r * Math.cos(i * Math.PI / 30);
        var x2 = x + (r - 5) * Math.sin(i * Math.PI / 30);
        var y2 = y - (r - 5) * Math.cos(i * Math.PI / 30);
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
    }
    ctx.stroke();

    ctx.beginPath();
    ctx.strokeStyle = "red";
    for (var i = 0; i < 12; i++) {
        var x1 = x + r * Math.sin(i * Math.PI / 6);
        var y1 = y - r * Math.cos(i * Math.PI / 6);
        var x2 = x + (r - 10) * Math.sin(i * Math.PI / 6);
        var y2 = y - (r - 10) * Math.cos(i * Math.PI / 6);
        var x3 = x + (r - 20) * Math.sin(i * Math.PI / 6);
        var y3 = y - (r - 20) * Math.cos(i * Math.PI / 6);
        ctx.moveTo(x1, y1);
        ctx.lineTo(x2, y2);
        ctx.fillText(i == 0 ? 12 : i, x3, y3);
    }
    ctx.stroke();

    var i = 0;
    var aa = function () {
        ctx.beginPath();
        ctx.strokeStyle = "white";
        ctx.arc(x, y, r - 30, 0, 2 * Math.PI);
        ctx.fillStyle = "white";
        ctx.fill();
        ctx.stroke();

        ctx.beginPath();
        ctx.strokeStyle = "black";
        ctx.moveTo(x, y);
        var x4 = x + (r - 30) * Math.sin(i * Math.PI / 30);
        var y4 = y - (r - 30) * Math.cos(i * Math.PI / 30);
        ctx.lineTo(x4, y4);
        ctx.stroke();
        i++;
    }
    setInterval(aa, 1000);
</script>

</body>
</html>

效果图

在这里插入图片描述