• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    使用html5 canvas 画时钟代码实例分享

    HTML5足够强大实现很多功能,画一个时钟只是一个小玩意。图片指针用ctx的drawImage可以实现。至于兼容性问题,网上的解决方案已经很多了。这个东东是用来玩的,不是用来做应用的,学习下canvas API。

    先给大家展示效果图

    实现代码


    复制代码
    代码如下:

    <script type="text/javascript">
    // <![CDATA[
    var time = new Date();
    var h = time.getHours();
    var m = time.getMinutes();
    var s = time.getSeconds();
    var weekday={:'星期日',:'星期一',:'星期二',:'星期三',:'星期四',:'星期五',:'星期六'};
    h=h>?(h-)*+parseInt(m/):h*+parseInt(m/); //时针 初始位置
    //=====================================
    var x=,y=,sAngle=; //x y 原点 秒针角度变量
    function draw()
    {
    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("d");
    ctx.clearRect(,,c.width,c.height);
    s++;//秒针
    //背景
    ctx.fillStyle = '#eee' // Make changes to the settings
    ctx.globalAlpha = .;
    ctx.fillRect(,,c.width,c.height); // Draw a rectangle with new settings
    //===填充(表明)原点===
    ctx.beginPath();
    ctx.arc(x,y,,,true);
    ctx.fill();
    ctx.closePath();
    var grd=ctx.createLinearGradient(x,y,,);
    grd.addColorStop(,"#FF");
    grd.addColorStop(.,"#FF");
    grd.addColorStop(,"#FF");
    ctx.fillStyle=grd;
    ctx.font = "pt Arial";
    ctx.fillText("html",,);
    ctx.save();
    // 时间刻度
    for(var i=;i<;i++)
    {
    var angle=(Math.PI*)/;
    ctx.beginPath();
    var b=i==||i==||i==||i==
    if(i%==){
    if(b){
    ctx.fillStyle="red";
    radius=;
    }
    else{
    ctx.fillStyle="blue";
    radius=.;
    }
    ctx.font="px Arial";
    ctx.fillText(i/==?:i/,x-,y-); //x大-右 小-左 y大小 数字刻度
    }
    else
    {
    ctx.fillStyle="#";
    radius=;
    }
    if(s==i)radius=radius+;
    ctx.arc(x,y-,radius,,true);
    ctx.fill();
    transform(ctx,x,y,angle,true);
    }
    ctx.restore();
    //==========================
    sAngle=(Math.PI*)/*s; //秒度
    ctx.save(); //时针
    ctx.fillStyle="red";
    // ctx.strokeStyle="red";
    ctx.lineWidth=;
    transform(ctx,x,y,(Math.PI*)/*h,true);
    sj(ctx,x,y,x-,y-,x+,y-);
    ctx.restore();
    ctx.save();//分针转动
    ctx.fillStyle="blue";
    ctx.lineWidth=;
    transform(ctx,x,y,(Math.PI*)/*m,true);
    sj(ctx,x,y,x-,y-,x+,y-);
    ctx.restore();
    //秒针转动
    ctx.save();
    ctx.fillStyle="#";
    transform(ctx,x,y,sAngle,true);
    sj(ctx,x,y,x-,y-,x+,y-);
    ctx.restore();
    //数据整理
    if(s%==){
    sAngle=,s=,m++;
    if(m==){ //每十二分 时针旋转一次
    if(m!=)h++;
    if(m%==)m=;
    }
    if(h%==)h=;
    };
    //*注:如果是放到外面 判断分针或时针转动 则满足条件时 都重复会运行 原因 每执行一遍 只有秒针 在时刻变动 *//
    var dateString=time.getFullYear()+"年"+(time.getMonth()+)+"月"+time.getDate()+"日 "+weekday[time.getDay()]+" h:"+time.getHours()+" m:"+m+" s:"+s;
    document.getElementById("d").innerHTML=dateString;
    }
    //指针三角!
    function sj(ctx,x,y,x,y,x,y){
    //====例====
    // ctx.beginPath();
    // ctx.moveTo(x,y);
    // ctx.lineTo(x,y-);
    // ctx.stroke();
    // ctx.beginPath();
    //
    // ctx.moveTo(x-,y-);
    // ctx.lineTo(x+,y-);
    // ctx.lineTo(x,y--);
    // ctx.fill();
    ctx.beginPath();
    ctx.moveTo(x,y);
    ctx.lineTo(x,y);
    ctx.stroke();
    ctx.beginPath();
    ctx.moveTo(x,y);
    ctx.lineTo(x,y);
    ctx.lineTo(x,y);
    ctx.fill();
    }
    //据坐标旋转
    function transform(ctx,x,y,angle,b){
    if(b){// 顺时针
    ctx.transform(Math.cos(angle), Math.sin(angle),
    -Math.sin(angle), Math.cos(angle),
    x*(-Math.cos(angle)) + x*Math.sin(angle),
    y*(-Math.cos(angle)) - y*Math.sin(angle))
    }
    }
    //=====每秒执行============(执行事件自选)
    window.setInterval(function(){draw()},);
    // window.onload=function(){ //效果同上
    // setInterval("draw()",);
    // };
    // ]]>
    </script>

    上一篇:HTML5几个设计和修改的页面范例分享
    下一篇:五个2015 年最佳HTML5 框架
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯

    时间:9:00-21:00 (节假日不休)

    地址:江苏信息产业基地11号楼四层

    《增值电信业务经营许可证》 苏B2-20120278

    使用html5 canvas 画时钟代码实例分享 使用,html5,canvas,画,时钟,