html5中使用canvas画时钟

首次使用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>

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

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页