前端开发H5制作canvas时钟

web前端开发技术自学|前端开发项目经验怎么写|微信前端开发文档
基础知识点:
canvas标签只是图形容器,您必须使用脚本来绘制图形。
getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性。——获取上下文对象。
getContext(“2d”) 对象属性和方法,可用于在画布上绘制文本、线条、矩形、圆形等等。
fillRect(l,t,w,h):默认颜色是黑色
strokeRect(l,t,w,h):带边框的方块。默认一像素黑色边框
setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
beginPath():定义开始绘制路径, 它把当前的点设置为 (0,0)。 当一个画布的环境第一次创建,beginPath() 方法会被显式地调用。
closePath():结束绘制路径(将起点与终点进行连接)
arcTo(x1,y1,x2,y2,radius):从上一点开始绘制一条弧线,到(x2,y2)为止,并且以给定的半径radius穿过(x1,y1)。
lineTo(x,y):从一点开始绘制一条直线,到(x,y)为止。
moveTo(x,y):将绘图游标移动到(x,y),不画线。
font:表示文本样式、大小及字体,用css中指定字体的格式来指定,例如”bold 10px Arial”。
textAlign:表示文本对齐方法。可能的值有”start”、”end”、”left”、”right”和”center”。建议使用”start”和”end”,不要使用“left”和“right”,因为前两者的意思更稳妥,能同时适合从左到右和从右到左
显示(阅读)的语言。
textBaseline:表示文本的基线。可能的值有“top”、“hanging”、“middle”、“alphabetic”、”ideographic”和“bottom”。
fillText(),strokeText():这两个方法都可以接收4个参数:要绘制的文本字符串、x坐标、y坐标和和可选的最大像素宽度,文本最大像素宽度(尚未得到所有浏览器的支持,最早支持他的是firefox4)
绘制圆形
arc( x,y,半径,起始弧度,结束弧度,旋转方向,fasle)
x,y:起始位置
弧度与角度的关系:弧度=角度*Math.PI/180 2*Math.PI代表360度的弧度
旋转方向:顺时针(默认:false,逆时针:true)
注意点:
1.注意canvas画图的层次关系
2.注意合理利用beginPath()和closePath()
3.由于圆心每个角度的坐标点无法准确确定,因此用arc()化弧度,从而的得到刻度浮点,然后通过closePath闭合形成路径,填充,然后在填充一个较小的圆填充白色,从而产生刻度。
4.通过fillText(),strokeText()来打上时间点。


**代码片段 1**
<!DOCTYPE html>
<html lang=”en-US”>
<head>
    <meta charset=”UTF-8″>
    <title>html5 canvas打造时钟</title>
    <style type=”text/css”>
        body,
        h3 {
            margin: 0;
            text-align: center
        }
        h3 {
            padding: 0;
            text-align: center;
            background: #333;
            font-size: 1.5em;
            color: #fff;
            line-height: 2em;
            text-shadow: 0 0 10px rgba(0, 39, 245, 0.65);
        }
        #canvas {
            margin: 20px 0;
            border: 1px solid #bbb;
            background: #D6D5D5;
        }
        p {
            text-align: center;
            color: #bbb
        }
    </style>
</head>
<body>
    <h3>html5 canvas打造时钟</h3>
    <canvas id=”canvas” width=”600″ height=”600″>
        您的浏览器不支持canvas,请使用高级浏览器。 http://blog.segmentfault.com/trigkit4/1190000000652925
    </canvas>
    <p>似水流年,且行且珍惜!</p>
    <script type=”text/javascript”>
        var canvas = document.getElementById(‘canvas’);
        if (canvas.getContext) {
            var context = canvas.getContext(‘2d’);
            drawClock(context);
            setInterval(function () { drawClock(context) }, 1000);
        }
        function drawClock(canvas) {
            var x = 300, //钟表圆心坐标
                y = 300
            r = 200; //钟表半径
            //清除画布
            canvas.clearRect(0, 0, canvas.width, canvas.height);
            //修饰部分 即,建立一个白色的画布
            canvas.beginPath();
            canvas.moveTo(x, y);
            canvas.arc(x, y, r, 0, 360, false);
            canvas.closePath();
            canvas.fillStyle = ‘#fff’;
            canvas.fill();
            //镶嵌时钟数字
            var date = new Date(),//创建日期对象
                hours = date.getHours(),
                minutes = date.getMinutes(),
                seconds = date.getSeconds();
            var hoursValue = (-90 + hours * 30 + minutes / 2) * Math.PI / 180,
                minutesValue = (-90 + minutes * 6) * Math.PI / 180,
                secondsValue = (-90 + seconds * 6) * Math.PI / 180;
            canvas.beginPath();
            for (var i = 0; i < 60; i++) {
                canvas.moveTo(x, y);
                canvas.arc(x, y, r, 6 * i * Math.PI / 180, 6 * (i + 1) * Math.PI / 180, false);
            }
            canvas.closePath();
            canvas.stroke();
            canvas.beginPath();
            canvas.moveTo(x, y);
            canvas.fillStyle = ‘#fff’;
            canvas.arc(x, y, r * 19 / 20, 0, 2 * Math.PI, false);
            canvas.closePath();
            canvas.fill();
            canvas.beginPath();
            canvas.lineWidth = 3;
            for (var i = 0; i < 12; i++) {
                canvas.moveTo(x, y);
                canvas.arc(x, y, r, 30 * i * Math.PI / 180, 30 * (i + 1) * Math.PI / 180, false)
            }
            canvas.closePath();
            canvas.stroke();
            canvas.beginPath();
            canvas.arc(x, y, r * 18 / 20, 0, 2 * Math.PI, false);
            canvas.closePath();
            canvas.fillStyle = ‘#fff’;
            canvas.fill();
            canvas.font = “bold 16px Arial”;
            canvas.textAlign = ‘center’;
            canvas.textBaseLine = ‘middle’;
            canvas.fillStyle = ‘red’;
            canvas.fillText(’12’, x, y – 165, 200);
            canvas.fillText(‘6’, x, y + 165, 200);
            canvas.fillText(‘3’, x + 165, y + 5, 200);
            canvas.fillText(‘9’, x – 165, y + 5, 200);
            dyear = date.getFullYear(),
                dmonth = date.getMonth() + 1,
                dDate = date.getDate(),
                weeks = date.getDay();
            canvas.fillText(dyear + ‘-‘ + dmonth + ‘-‘ + dDate + ‘ ‘ + dateWeek(weeks) + ‘ ‘ + hours + ‘:’ + toDouble(minutes) + ‘:’ + toDouble(seconds), x, y + 60, 200);
            canvas.lineWidth = 5;
            canvas.beginPath();
            canvas.moveTo(x, y);
            canvas.arc(x, y, r * 10 / 20, hoursValue, hoursValue, false);
            canvas.closePath();
            canvas.stroke();
            canvas.lineWidth = 3;
            canvas.beginPath();
            canvas.moveTo(x, y);
            canvas.arc(x, y, r * 14 / 20, minutesValue, minutesValue, false);
            canvas.closePath();
            canvas.stroke();
            canvas.lineWidth = 1;
            canvas.beginPath();
            canvas.moveTo(x, y);
            canvas.arc(x, y, r * 16 / 20, secondsValue, secondsValue, false);
            canvas.closePath();
            canvas.stroke();
        }
        function toDouble(num) {
            num >= 10 ? num = ” + num : num = ‘0’ + num;
            return num;
        }
        function dateWeek(data) {
            switch (data) {
                case 1:
                    return ‘星期一’;
                    break;
                case 2:
                    return ‘星期二’;
                    break;
                case 3:
                    return ‘星期三’;
                    break;
                case 4:
                    return ‘星期四’;
                    break;
                case 5:
                    return ‘星期五’;
                    break;
                case 6:
                    return ‘星期六’;
                    break;
                case 0:
                    return ‘星期日’;
                    break;
            }
        }
    </script>
</body>
</html>

中山前端开发招聘信息|前端开发技术需求分析|深圳茁壮网络公司前端开发怎么样

» 本文来自:前端开发者 » 《前端开发H5制作canvas时钟》
» 本文链接地址:https://www.rokub.com/5076.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!