我画的秒针从中间断开了，有一段空白-慕课网

首页课程实战体系课手记专栏慕课教程

我画的秒针从中间断开了，有一段空白

来源：3-3 Canvas静态的时分秒

西兰花伟大炮

2016-11-13 20:22

canvas画时钟

写回答关注

4回答

邪君灬无情

2016-11-28 21:13:52

已采纳

因为你点的顺序弄错了，先是（-2,20）（2,20）接下来是（1，-r+40）而不是（-1，-r+40）,如果是（-1，-r+40）就会交叉结果就会显示成中间一条白线

1 0

西兰花伟大炮

非常感谢！

2016-11-29 11:01:01

共 1 条回复 >

qq_奇际号船长_03613499: 2016-11-24 16:56:33

把秒针的填充写成

function drawSecond(second){
    ctx.save();
    ctx.beginPath();
    ctx.fillStyle ='#82CAFF'
    var rad = 2 * Math.PI / 60 * second;
    ctx.rotate(rad);
    ctx.lineWidth = 3;
    ctx.lineCap = 'round'
    ctx.moveTo(0, 10);
    ctx.lineTo(0, -r / 2)
    ctx.lineTo(-1, -r + 18);
    ctx.fill();
    ctx.restore();

0 0

西兰花伟大炮: 2016-11-14 18:41:10

<!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();
            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>

0 0

qq_QQ_62

2016-11-14 16:38:39

应该不会，你需要贴代码看看

0 0

Canvas 绘制时钟

canvas画出漂亮的时钟，通过本教程能重新掌握一些几何知识

49750 学习 · 160 问题

查看课程

相似问题

秒针的画法

回答 1

画秒针的问题

回答 1

秒针怎么画？

回答 2

我的分针秒针去哪里了？？？

回答 1

为什么画秒针的时候，半径是2，

回答 3

打开慕课网App查看更多内容