canvas可以绘制精美的图形,分享用canvas制作漂亮钟表。

一、效果图

二、HTML代码

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>canvas制作漂亮钟表</title> 
</head>
<body>
    <canvas id="canvas" width="400" height="400" style="background-color:#333"></canvas>
</body>
</html>


三、JavaScript代码

<script> 
/*第一部分 - 创建画布*/
// 通过canvas元素创建一个canvas对象(var canvas):
let canvas = document.getElementById("canvas");
//为canvas对象创建一个2D绘图对象(var context):    
let context = canvas.getContext("2d");
//使用画布的高度计算时钟半径:    
let radius = canvas.height / 2;
//将(0,0)位置(绘图对象)重新映射到画布的中心:    
context.translate(radius, radius);
//减少时钟半径(至90%)以在画布内绘制时钟:    
radius = radius * 0.90;
//每隔一秒(1000毫秒)调用一次drawClock()函数    
setInterval(drawClock, 1000);

//创建一个绘制时钟的函数:    
function drawClock() {
    /* 
    //画一个圆形         
    context.arc(0, 0, radius, 0, 2 * Math.PI);
    context.fillStyle = "white";
    context.fill();*/
    drawFace(context, radius);
    drawNumbers(context, radius);
    drawLine(context, radius);
    drawTime(context, radius);
}

/*** 
第二部分 - 画一个钟面     
* @param context -2D绘图对象     
* @param radius -时钟半径     
*/    
function drawFace(context, radius) {
    let gradient;
    //起始一条路径,或重置当前路径
    context.beginPath();
    //画出白色圆圈:        
    context.arc(0, 0, radius, 0, 2 * Math.PI);
    //设置或返回用于填充绘画的颜色、渐变或模式        
    context.fillStyle = "#f2ffe5";
    //填充当前绘图(路径)       
    context.fill();
    //创建径向渐变(原始时钟半径的95%和105%):        
    gradient = context.createRadialGradient( 0, 0, radius * 0.95, 0, 0, radius * 1.05  );
    //创建3个颜色停止点,对应于弧的内边,中边和外边:
    //颜色停止会产生3D效果        
    gradient.addColorStop(0, '#333');
    gradient.addColorStop(0.5, 'white');
    gradient.addColorStop(1, '#333');
    //将渐变定义为绘图对象的笔触样式:        
    context.strokeStyle = gradient;
    //定义图纸对象的线宽(半径的10%):        
    context.lineWidth = radius * 0.1;
    //画圆圈:        
    context.stroke();
    //画时钟中心:        
    context.beginPath();
    //创建弧/曲线(用于创建圆形或部分圆)        
    context.arc(0, 0, radius * 0.06, 0, 2 * Math.PI);
    context.fillStyle = '#333';
    context.fill();
}

/**
* 第三部分 - 绘制时钟数     
* @param context -2D绘图对象     
* * @param radius -时钟半径     
*/    
function drawNumbers(context, radius) {
    let angle;
    let num;
    //将(绘图对象的)字体大小设置为半径的15%:        
    context.font = radius * 0.15 + "px arial";
    //设置或返回在绘制文本时使用的当前文本基线        
    context.textBaseline = "middle";
    //设置或返回文本内容的当前对齐方式。        
    context.textAlign = "center";
    //计算打印位置(12个数字)到半径的85%,每个数字旋转(PI / 6):        
    for (num = 1; num <= 12; num++) {
        angle = num * Math.PI / 6;
        context.rotate(angle);
        //重新映射画布上的 (0,0) 位置           
        context.translate(0, -radius * 0.85);
        context.rotate(-angle);
        //在画布上绘制"被填充的"文本            
        context.fillText(num.toString(), 0, 0);
        context.rotate(angle);
        context.translate(0, radius * 0.85);
        context.rotate(-angle);
    }
}

/**     
* 第四部分 -画时钟表格线     
* @param context -2D绘图对象     
* @param radius -时钟半径     
*/    
function drawLine(context, radius) {
    let i;
    for (i = 1; i <= 60; i++) {
        if (i % 5 == 0) {
            context.strokeStyle = "red";
        } else {
            context.strokeStyle = "black";
        }
        context.beginPath();
        context.lineWidth = radius * 0.02;
        context.rotate(i * Math.PI / 30);
        context.moveTo(0, -radius * 1.05);
        context.lineTo(0, -radius * 0.95);
        context.stroke();
        context.rotate(-i * Math.PI / 30);
    }
}

/**     
* 第五部分 - 画时钟指针     
* @param context -2D绘图对象     
* @param radius -时钟半径     
*/    
function drawTime(context, radius) {
    //使用日期获取小时,分钟,秒:        
    let date = new Date();
    let hours = date.getHours();
    let minutes = date.getMinutes();
    let seconds = date.getSeconds();
    //绘制时针        
    hours = hours % 12;
    // 计算时针的角度        
    hours = (hours * Math.PI / 6) +
        (minutes * Math.PI / (6 * 60)) +
        (seconds * Math.PI / (6 * 60 * 60));
    //绘制一个长度(半径的50%)和宽度(半径的5%)的时针:        
    drawHand(context, hours, radius * 0.4, radius * 0.05, "green");
    //绘制分针        
    minutes = (minutes * Math.PI / 30) + (seconds * Math.PI / (30 * 60));
    drawHand(context, minutes, radius * 0.7, radius * 0.04, "blue");
    // 绘制秒针        
    seconds = (seconds * Math.PI / 30);
    drawHand(context, seconds, radius * 0.8, radius * 0.02, "red");

}

/**     
* 绘制一条给定长度和宽度,并指定颜色的线,用来画各种表针     
* @param context -2D绘图对象     
* @param pos -旋转角度     
* @param length -长度     
* @param width -宽度     
*/    
function drawHand(context, pos, length, width, color) {
    //起始一条路径,或重置当前路径        
    context.beginPath();
    //设置或返回当前的线条宽度        
    context.lineWidth = width;
    //设置或返回线条的结束端点样式        
    //round    向线条的每个末端添加圆形线帽        
    context.lineCap = "round";
    //把路径移动到画布中的指定点,不创建线条        
    context.moveTo(0, 0);
    //旋转当前绘图        
    context.rotate(pos);
    //添加一个新点,然后在画布中创建从该点到最后指定点的线条        
    context.lineTo(0, -length);
    context.strokeStyle = color;
    //绘制已定义的路径        
    context.stroke();
    context.rotate(-pos);
}
</script>


您已经阅读00:00:00欢迎留言评论,喜欢的话就为作者点个赞或者赏颗糖吧! 分享