• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > 使用canvas绘制超炫时钟_html5教程技巧

使用canvas绘制超炫时钟_html5教程技巧

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含canvas,绘制时钟等相关知识,匿名希望在学习及工作中可以帮助到您
先上效果图:


////////////////////////////////////////////////时针
context.save();
context.rotate( h + m/12 + s/720) ;
context.beginPath();
context.moveTo(0,6);
context.lineTo(0,-85);
context.strokeStyle="#fff";
context.lineWidth=6;
context.stroke();
context.closePath();
context.restore();
//////////////////////////////////////////////分针
context.save();
context.rotate( m+s/60 ) ;
context.beginPath();
context.moveTo(0,8);
context.lineTo(0,-105);
context.strokeStyle="#fff";
context.lineWidth=4;
context.stroke();
context.closePath();
context.restore();
/////////////////////////////////////////////秒针
context.save();
context.rotate( s ) ;
context.beginPath();
context.moveTo(0,10);
context.lineTo(0,-120);
context.strokeStyle="#fff";
context.lineWidth=2;
context.stroke();
context.closePath();
context.restore();
context.restore();/////////////////////////////栈出
setTimeout(draw, 1000);/////////////////////////////计时器

}




您可能想查找下面的文章:

  • canvas与html5实现视频截图功能示例
  • 详解html5 canvas常用api总结(二)--绘图API
  • HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)
  • 详解使用HTML5 Canvas创建动态粒子网格动画
  • 解决canvas转base64/jpeg时透明区域变成黑色背景的方法
  • 用html5的canvas和JavaScript创建一个绘图程序的简单实例
  • HTML5 canvas基本绘图之图形组合
  • HTML5 canvas基本绘图之文字渲染
  • HTML5 canvas基本绘图之绘制曲线
  • HTML5 canvas基本绘图之图形变换

相关文章

  • 2017-08-06HTML5新特性 多线程(Worker SharedWorker)
  • 2018-12-03h5实现文本框提示语的代码实例
  • 2017-08-06html5构建触屏网站之touch事件介绍
  • 2018-12-03HTML5学习笔记简明版(11):新增的API
  • 2018-12-03详解HTML5头部<meta>标签的常用信息小结
  • 2018-12-03用HTML5实现鼠标滚轮事件放大缩小图片的功能_html5教程技巧
  • 2017-08-06HTML5 常用语法一览(列举不支持的属性)
  • 2018-12-03浅谈html5增强的页面元素
  • 2018-12-03HTML5响应式分步定制商品模板
  • 2018-12-03豆瓣电台为什么不做 HTML5 版的播放器呢?

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 分享利用 HTML5 的 Canvas 制作人脸的实例代码
    • 使用Html5实现异步上传文件,支持跨域,带有上传进度条
    • HTML5 history新特性pushState、replaceState及两者的区别
    • html5通过canvas实现刮刮卡效果示例分享
    • 介绍几款引人注目的HTML5/jQuery动画插件详情
    • 前后端为什么要分开写
    • 基于HTML5 Canvas 实现地铁站监控
    • 揭秘爱消除+小王子粘土风格动画HTML5制作全过程
    • HTML5画廊 带按钮的banner轮换
    • 只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有