Canvas 绘制时钟_技术问答

放久了的冰红茶

前端基础

可以，webStorm就可以

2017-09-14 1回答·954浏览
慕数据4266643

在什么环境下运行呢？

??????

2017-05-24 1回答·1006浏览

慕函数8091927

已采纳西兰花伟大炮的回答

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>画一个时钟</title>
    <style>
        #canvas{
            margin:200px auto;
            border: 1px solid #e9e0b5;
            display: block;
        }
    </style>
</head>
<body>
<canvas id="canvas" height="300px" width="300px"></canvas>
<script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var width = ctx.canvas.width;
    var height = ctx.canvas.height;
    var r = width /2;
/*canvas绘制环境*/
    function drawBackGround(ctx){
        /*绘制圆框，60点，数字*/
        ctx.save();
        ctx.translate(r,r);
        ctx.beginPath();
        ctx.arc(0,0,r-5,0,Math.PI * 2);
        ctx.lineWidth = 10;
        ctx.stroke();
        ctx.closePath();
        ctx.font = "18px Arial";
        ctx.textBaseline = "middle";
        ctx.textAlign = "center";
        var hoursNumber = [3,4,5,6,7,8,9,10,11,12,1,2];
        /*传入的number为数组值，i为数组索引*/
        hoursNumber.forEach(function (number,i) {
            var rad = 2 * Math.PI / 12 * i;
            var x = Math.cos(rad) * (r - 30);
            /*cos与sin传入的是弧度值，包括rotate也是弧度，但是css中为deg*/
            var y = Math.sin(rad) * (r - 30);
            ctx.fillText(number,x,y);
        });
        for(var i= 0;i < 60;i++){
            var radDot = 2 * Math.PI / 60 * i;
            var x = Math.cos(radDot) * (r - 18);
            var y = Math.sin(radDot) * (r - 18);
            ctx.beginPath();
        /*必须在这里beginpath?   不然出现被灰圈遮住*/
            if(i % 5 === 0){
                   ctx.arc(x,y,2,0,Math.PI *2);
                    ctx.fillStyle = "#000";
            }else
            {
                    ctx.arc(x,y,2,0,Math.PI *2);
                   ctx.fillStyle = "gray";
            }
            ctx.fill();
        }
    }
    function drawHour(hour,minnue){
        ctx.save();
        ctx.beginPath();
        var rad = Math.PI * 2 / 12 *hour;
        var mrad = Math.PI * 2 / 12 / 60 * minnue;
        /*分针会导致时针的运动，需要加上分针引起的弧度，每分钟会导致时针变化的弧度*/
        ctx.rotate(rad + mrad);
        ctx.moveTo(0,10);
        ctx.lineTo(0,-r + 48);
        ctx.lineCap = "round";
        ctx.lineWidth = 6;
        ctx.stroke();
        ctx.restore();
    }
    function drawMinute(minute){
        ctx.save();
        ctx.beginPath();
        var rad = Math.PI * 2 / 60 * minute;
        ctx.rotate(rad);
        ctx.moveTo(0,10);
        ctx.lineTo(0,-r + 36);
        ctx.lineCap = "round";
        ctx.lineWidth = 3;
        ctx.stroke();
        ctx.restore();
    };
    function drawSecond(second){
        ctx.save();
        ctx.beginPath();
        var rad = Math.PI * 2 / 60 * second;
        ctx.rotate(rad);
        ctx.moveTo(-2,20);
        ctx.lineTo(2,20);
        ctx.lineTo(1,-r + 40);
        ctx.lineTo(-1,-r + 40);
        ctx.fillStyle = "#c14543";
        ctx.fill();
        ctx.restore();
    };
    function drawDot(){
        ctx.beginPath();
        ctx.fillStyle = "#fff";
        ctx.arc(0,0,3,0,Math.PI * 2);
        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(ctx);
        drawHour(hour,minute);
        drawMinute(minute);
        drawSecond(second);
        drawDot();
        ctx.restore()
    }
    draw();
    setInterval(draw,1000);
</script>
</body>
</html>

欢迎采纳啊

2017-05-04 1回答·1438浏览

慕粉1906006274

canvas时钟

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.translate(r,r); //重新映射画布上的（0,0）位置
ctx.beginPath(); //起始一条路径，或当前路径
ctx.lineWidth=10;
ctx.arc(0,0,r-5,2*Math.PI,false);
ctx.stroke(); //绘制已定路线

var hourNumbers = [3,4,5,6,7,8,9,10,11,12,1,2]; //数字显示
ctx.font = '18px Arial';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
hourNumbers.forEach(function(number,i){
var rad = 2*Math.PI/12*i; //每个小时数的弧度乘索引
var x = Math.cos(rad)*(r-30);
var y = Math.sin(rad)*(r-30);
ctx.fillText(number,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();
if(i%5===0){ //5个点的时候是黑色
ctx.arc(x,y,2*Math.PI,false);
}else{
ctx.fillStyle = '#ccc';
ctx.arc(x,y,2*Math.PI,false);
}
ctx.fill();

}

}
function drawHour(hour){
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();
}
function drawMinute(minute){
ctx.save();
ctx.beginPath();
var rad = 2*Math.PI/60*minute;
ctx.lineWidth=3;
ctx.lineCap = 'round'; //时针线末端的样式
ctx.moveTo(0,10); //时针线的长度
ctx.lineTo(0,-r+30);
ctx.stroke();
ctx.restore(); //返回之前保存过的路径
}
function drawSecond(second){
ctx.save();
ctx.beginPath();
ctx.fillStyle = '#c14543';
var rad = 2*Math.PI/60*second;
ctx.lineWidth=3;
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,flase);
ctx.fill();
}

drawBackground();
drawHour(4,30); //例如4小时的位置
drawMinute(30);
drawSecond(15);
drawDot();

2017-01-17 4回答·1219浏览
qq_twilight_54289167

怎么下载视频啊

用移动端吧

2016-12-29 2回答·254浏览
诸侯戏烽火

疑问疑问

你前面怎么写的呢

2016-10-10 1回答·607浏览
慕粉184032459

这门课怎么样

2016-10-10 1回答·720浏览

数据加载中...