H5canvas绘制一个小时钟

HTML5 canvas

canvas元素

  		通过js绘制图像
        默认使用时，是一个行内块级元素
        300 * 150
        修改canvas元素显示的宽高度
        不能用css样式的方式修改  --  导致图片失真
        通过width和height属性修改

最近温习了HTML5的相关知识

通过canvas画布,写一个简单点的时钟

<canvas width="600" height="600"></canvas>

因为canvas有默认的宽高,所以我们在这里设置这个canvas画布

对canvas的操作都是通过js代码来实现的

 <script>
        var canvas = document.getElementsByTagName("canvas")[0]
        var context = canvas.getContext("2d")

        function drawClock() {
            context.clearRect(0, 0, canvas.width, canvas.height)
            //获取时间
            var now = new Date()
            var second = now.getSeconds();
            var min = now.getMinutes()
            var hour1 = now.getHours()
            var hour = hour1 + min / 60
            hour = hour > 12 ? hour - 12 : hour
            //获取当地的时间
            var time = now.toLocaleString()


            // 画个小时的圆
            context.save()
            //改变圆心
            context.translate(300, 300)
            context.rotate(-90 * Math.PI / 180)
            //旋转后
            context.beginPath()
            context.strokeStyle = "skyblue"
            context.lineWidth = 8
            // hour*60*Math.PI/180
            context.arc(0, 0, 200, 0, hour / 6 * Math.PI)
            context.stroke()
            context.closePath()
            context.restore()

            // 画分针的圆
            context.save()
            //改变圆心
            context.translate(300, 300)
            context.rotate(-90 * Math.PI / 180)
            //旋转后
            context.beginPath()
            context.strokeStyle = "skyblue"
            context.lineWidth = 10
            // hour*60*Math.PI/180
            context.arc(0, 0, 180, 0, min / 30 * Math.PI)
            context.stroke()
            context.closePath()
            context.restore()
            // 画分针的圆
            context.save()
            //改变圆心
            context.translate(300, 300)
            context.rotate(-90 * Math.PI / 180)
            //旋转后
            context.beginPath()
            context.strokeStyle = "skyblue"
            context.lineWidth = 20
            // hour*60*Math.PI/180
            context.arc(0, 0, 150, 0, second / 30 * Math.PI)
            context.stroke()
            context.closePath()
            context.restore()
            //表盘中心

            // context.translate(300,300)
            // context.beginPath()
            // context.fillStyle = "gold"
            // context.arc(300, 300, 100, 0, Math.PI * 2)

            // context.fill()
            // context.closePath() 

            // 垂直
            context.save()
            context.beginPath()
            // context.moveTo(300, 300)
            // context.lineTo(200, 300)
            context.stroke()
            context.textBaseline="middle"
            context.font = "15px 篆体"
            context.fillStyle = "red"
            context.fillText(time, 200, 300)

        }
        drawClock()
        setInterval(drawClock, 1000)

完成后产生这样的效果,可以加上更多更好看的效果,我们添加js代码就可以啦