使用canvas绘制一个时钟

项目分为两个文件,clock.html和clock.js,下面贴出两个源代码

clock.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" charset="UTF-8" content="width=device-width,initial-scale=1">
    <title>Clock</title>
    <style type="text/css">
        div{
            text-align: center;
            margin-top: 250px;
        }
        #clock{
            border: 1px solid #ccc
        }
    </style>
</head>
<body>
    <div>
        <canvas id="clock" height="200px" width="200px"></canvas>
        <script type="text/javascript" src="clock.js"></script>
    </div>
</body>
</html>


clock.js

//设置全局变量
var dom = document.getElementById('clock');
var ctx = dom.getContext('2d');
var width = ctx.canvas.width;//
var height = ctx.canvas.height;
var r = width / 2;

//绘制时钟的背景
function drawBackground(){
    ctx.save();
    ctx.translate(r,r);
    ctx.beginPath();
    ctx.arc(0,0,r-5,0,2*Math.PI,false);//绘制一个圆形
    ctx.lineWidth = 10;
    ctx.stroke();

    var hourNumbers = [3,4,5,6,6,8,9,10,11,12,1,2];//设置整点数字
    ctx.font = '18px Arial';//设置整点数字的字体
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    hourNumbers.forEach(function(numbers,i){
        //计算圆上时钟的坐标
        var rad = 2*Math.PI / 12 *i;
        var x = Math.cos(rad)*(r-30);
        var y = Math.sin(rad)*(r-30);
        ctx.fillText(numbers,x,y);
    });
//设置小时的圆点
    for(var i=0;i<60;i++){
        var rad = 2*Math.PI / 60 *i;
        var x = Math.cos(rad)*(r-18);
        var y = Math.sin(rad)*(r-18);
        ctx.beginPath();
        //设置整点为深颜色,非整点为浅颜色,每5个循环一次
        if(i % 5 == 0){
            ctx.fillStyle = '#000';
            ctx.arc(x,y,2,0,2*Math.PI,false);
        }
        else{
            ctx.fillStyle = '#ccc';//填充的颜色
            ctx.arc(x,y,2,0,2*Math.PI,false);
        }
        ctx.fill();
    }
}

//利用canvas绘制出时针,其中save(),beginPath(),moveTo(),lineTo()都是canvas绘图工具有的函数,直接调用就可以了
//下面分针和秒针一样的,模仿即可
function drawHour(hour,minute){
        ctx.save();//在当前时间内保存绘制出的时针
        ctx.beginPath();
        var rad = 2 * Math.PI / 12 *hour;//时针的弧度
        var mrad = 2 * Math.PI / 12 / 60 * minute;//表示分针在走的时候时针多出来的弧度
        ctx.rotate(rad+mrad);
        ctx.lineWidth = '6';//时针的长度
        ctx.lineCap='round';//绘制时针的头顶为方形
        ctx.moveTo(0,10);
        ctx.lineTo(0,-r / 2);
        ctx.stroke();
        ctx.restore();
}
//利用canvas绘制出分针
function drawMinute(minute){
        ctx.save();
        ctx.beginPath();
        var rad = 2 * Math.PI / 60 * minute;
        ctx.rotate(rad);
        ctx.lineWidth = '3';
        ctx.lineCap='round';
        ctx.moveTo(0,10);
        ctx.lineTo(0,-r + 30);
        ctx.stroke();
        ctx.restore();
}
//利用canvas绘制出秒针
function drawSecond(second){
        ctx.save();
        ctx.beginPath();
        var rad = 2 * Math.PI / 60 * second;
        ctx.fillStyle = '#ccc';
        ctx.rotate(rad);
        ctx.moveTo(-2,20);
        ctx.lineTo(2,20);
        ctx.lineTo(1,-r + 18);
        ctx.lineTo(-1,-r + 18);
        ctx.fill();
        ctx.restore();
}
//画出中间的圆点
function drawDot(){
    ctx.beginPath();
    ctx.fillStyle = '#fff';
    ctx.arc(0,0,3,0,2 * Math.PI,false);
    ctx.fill();
}

function draw(){
    ctx.clearRect(0,0,width,height);//清除前一个画出的时针,分针,秒针
    var now = new Date();//新建一个对象获取当前时间
    var hour = now.getHours();
    var minute = now.getMinutes();
    var second = now.getSeconds();
    drawBackground();
    drawHour(hour,minute);
    drawMinute(minute);
    drawSecond(second);
    drawDot();
    ctx.restore();
}
setInterval(draw,1000);//每隔1s绘制一次图形

希望有更好方法的同学联系我哈!


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Canvas是在HTML5中用于绘制图形的一种技术,可以用来创建各种动态效果,比如动态时钟。要绘制一个动态时钟,你可以按照以下步骤操作: 1. **获取Canvas元素**: 首先,在HTML中创建一个`<canvas>`标签,并给它一个id,如`<canvas id="myClock"></canvas>`。 2. **JavaScript处理**: 使用JavaScript获取canvas元素,并创建绘图上下文(context)。例如: ```javascript const canvas = document.getElementById('myClock'); const ctx = canvas.getContext('2d'); ``` 3. **设置定时器**: 创建一个`setInterval`函数,每隔一段时间更新一次时钟。这里通常会计算当前时间并将其转换为显示在时钟上的文本。 4. **绘制时钟**: - **画背景圆**:使用`arc()`方法绘制圆形背景,表示时钟盘面。 - **画指针**:为每个小时和分钟创建小矩形,表示时针和分针,然后根据时间位置移动它们。 ```javascript function drawTime() { // 获取当前时间 const now = new Date(); // 设置时钟盘面中心和大小 const centerX = canvas.width / 2; const centerY = canvas.height / 2; const radius = Math.min(centerX, centerY) * 0.8; // 清除上一次绘制 ctx.clearRect(0, 0, canvas.width, canvas.height); // 画背景圆 ctx.beginPath(); ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); ctx.fillStyle = 'white'; ctx.fill(); // 画小时和分钟指针 let hourAngle = ((now.getHours() % 12) + now.getMinutes() / 60) * (2 * Math.PI / 12); // 弧度 let minuteAngle = now.getMinutes() * (2 * Math.PI / 60); // 弧度 ctx.save(); // 保存当前状态 ctx.translate(centerX, centerY); ctx.rotate(hourAngle); // 转动到小时角度 ctx.fillRect(-radius * 0.7, -radius * 0.15, radius * 1.4, radius * 0.3); // 画小时指针 ctx.restore(); ctx.rotate(minuteAngle); // 转回原点并旋转到分钟角度 ctx.fillRect(-radius * 0.9, -radius * 0.2, radius * 0.6, radius * 0.4); // 画分钟指针 } // 开始定时器 setInterval(drawTime, 1000); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值