html5中使用canvas画时钟

来源：互联网发布：淘宝联盟能分享到qq群编辑：程序博客网时间：2024/05/29 18:24

首次使用canvas+js画时钟

主要用到知识点：

arc(x1,y1,radius,startAngle,endAngle,counterclorkwise):以（x,y）为圆心绘制一条弧线，弧线半
径为radius，起始和结束角度（用弧度表示）分别为startAngle 和endAngle。最后一个参数表示
stratAngle和endAngle是否按逆时针方向计算，值为false表示按顺时针计算。
arcTo(x1,y1,x2,y2,radius):从上一点开始绘制一条弧线，到（x2，y2）截止，并且以给定的半径radius穿过（x1,y1）
-bezierCurveTo(c1x,c1y,c2x,xc2y,x,y):从上一点开始绘制一条曲线，到（x，y）为止，并且以（c1x,c1y）和（c2x,c2y）为控制点
lineTo（x,y）:从上一点开始绘制直线，到（x.y）为止
moverTo(x,y)：将绘图游标移动到（x，y），不画线。
quadraticCurveTo（cx,cy,x,y）:从上一点开始绘制一条二次曲线。到（x,y）为止，并且以（cx,xy）
作为在、控制点
-rect（x,y,width,height）:从点（x，y）开始绘制一个矩形，宽度和高度分别由width和height指定。
font：表示文本样本、大小及字体，用css中指定字体的格式来指定，eg“10px Arial”
-textAlign：表示文本对齐方式。可能的值有“start”、“end”、“left”、“right”和“center”
-textBaseline：表示文本的基线。可能的值“top”、”hanging”,”middle”,”alphabetic”,”ideographic”和“bottom”

做出的效果图

这里写图片描述

代码块

代码块语法遵循标准markdown代码，例如：

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title></title>    <style>        #canvas1{            background: pink;        }      .content{        text-align: center;          margin: 0 auto;          overflow: auto;      }    </style></head><body>   <div class="content"><canvas id="canvas1" width="400" height="400">你的浏览器版本太低</canvas>   </div><script>    window.onload=function(){        var can=document.getElementById("canvas1");        if(can.getContext){            var canv=can.getContext("2d");            canv.beginPath();            canv.strokeStyle="#ff0000";           // canv.fillStyle="blue";            //canv.fillRect(0,0,50,50)            //canv.strokeRect(40,20,100,50)            //外圆           canv.arc(200,200,100,0,2*Math.PI,false);                //内圆            canv.moveTo(290,200);//弃掉多余的线            canv.arc(200,200,90,0,2*Math.PI,false);            //绘制分针            canv.moveTo(200,130);            canv.lineTo(200,200);            // 绘制时针            canv.moveTo(150,220);            canv.lineTo(200,200);            //文字部分            canv.font="12px Arial";            canv.textAlign="center";            canv.fillText("12",200,125)            canv.fillText("6",200,280)            canv.fillText("3",120,200)            canv.fillText("9",280,200)            canv.stroke();        }    }</script></body></html>

本文原创,转载请注明出处！

1 0