利用H5api实现时钟的绘制(javascript)


Posted in Javascript onSeptember 13, 2020

HTML5的canvas标签用于绘制图像(通过脚本,通常是 JavaScript)。不过,canvas元素本身并没有绘制能力(它仅仅是图形的容器)必须使用脚本来完成实际的绘图任务。

下面,具体总结了一下使用画布canvas的步骤:

画布:

canvas

在页面上规划出一块空间,canvas标签,通过javascript控制画布完成绘制

1.获取画布

var canvas=document.getElementById("");

2.获取上下文对象 (获取画笔)

var cx=canvas.getContext(“2d”);

3.设置画笔样式

cx.fillStyle=‘red';
cx.strokeStyle=‘blue';

4.开始绘制

下面是对于canvas使用,绘制一个简单钟表的小例子:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <script>
 window.onload=function(){
  //1.获取画布
  var canvas=document.getElementById("canvas");
  //2.获取画笔
  var cx=canvas.getContext("2d");
  
  function clock(){
  //3.设置画笔样式
  cx.fillStyle="orange";
  //4.绘制图形
  //绘制表盘
  cx.beginPath();
  cx.arc(300,300,200,0,Math.PI*2)
  cx.closePath();
  cx.fill();
  //绘制时刻度
  cx.lineWidth=2;
  cx.strokeStyle="black";
  for(var i=0;i<12;i++){
   cx.save();
   cx.translate(300,300);
   cx.rotate(i*(Math.PI/6));
   // cx.beginPath();
   cx.moveTo(0,-180);
   cx.lineTo(0,-200);
   // cx.closePath();
   cx.stroke();
   cx.fillStyle="black";
   cx.font="16px blod";
   cx.rotate(Math.PI/6)
   cx.fillText(i+1,-5,-220);
   cx.restore();
  }
  //绘制分刻度
  for(var i=0;i<60;i++){
   cx.save();
   cx.translate(300,300);
   cx.rotate(i*(Math.PI/30));
   cx.beginPath();
   cx.moveTo(0,-190);
   cx.lineTo(0,-200);
   cx.closePath();
   cx.stroke();
   cx.restore();
  }
  //获取当前时间
  var today=new Date();
  var hour=today.getHours();
  var min=today.getMinutes();
  var sec=today.getSeconds();
  hour=hour+min/60;
  //绘制时针
  cx.lineWidth=5;
  cx.save();
  cx.beginPath();
  cx.translate(300,300);
  cx.rotate(hour*(Math.PI/6));
  cx.moveTo(0,10);
  cx.lineTo(0,-100);
  cx.closePath();
  cx.stroke();
  cx.restore();
  //绘制分针
  cx.lineWidth=3;
  cx.save();
  cx.beginPath();
  cx.translate(300,300);
  cx.rotate(min*(Math.PI/30));
  cx.moveTo(0,10);
  cx.lineTo(0,-120);
  cx.closePath();
  cx.stroke();
  cx.restore();
  //绘制秒针
  cx.lineWidth=1;
  cx.strokeStyle="red";
  cx.save();
  cx.beginPath();
  cx.translate(300,300);
  cx.rotate(sec*(Math.PI/30));
  cx.moveTo(0,10);
  cx.lineTo(0,-160);
  cx.closePath();
  cx.stroke();
  cx.restore();
  //绘制交叉处
  cx.fillStyle="#ccc";
  cx.strokeStyle="red";
  cx.save();
  cx.translate(300,300);
  cx.beginPath();
  cx.arc(0,0,5,0,Math.PI*2);
  cx.closePath();
  cx.fill();
  cx.stroke();
  cx.restore();
   setTimeout(clock,1000);
  }
  clock()
 }
 </script>
</head>
<body>
 <canvas id="canvas" width="600px" height="600px" style="background-color: #ccc;"></canvas>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript hashtable实现代码
Oct 13 Javascript
jquery 学习之二 属性(html()与html(val))
Nov 25 Javascript
js对象的构造和继承实现代码
Dec 05 Javascript
web基于浏览器的本地存储方法应用
Nov 27 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
Nov 24 Javascript
javascript学习指南之回调问题
Apr 23 Javascript
js实现动态创建的元素绑定事件
Jul 19 Javascript
JavaScript reduce和reduceRight详解
Oct 24 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
Jun 27 Javascript
在vue项目中优雅的使用SVG的方法实例详解
Dec 03 Javascript
element-ui和vue表单(对话框)验证提示语(残留)清除操作
Sep 11 Javascript
vue绑定class的三种方法
Dec 24 Vue.js
浅谈javascript事件环微任务和宏任务队列原理
Sep 12 #Javascript
返回上一个url并刷新界面的js代码
Sep 12 #Javascript
Vue和React有哪些区别
Sep 12 #Javascript
浅谈vue项目利用Hbuilder打包成APP流程,以及遇到的坑
Sep 12 #Javascript
解决vue项目 build之后资源文件找不到的问题
Sep 12 #Javascript
vue项目打包为APP,静态资源正常显示,但API请求不到数据的操作
Sep 12 #Javascript
vue v-on:click传递动态参数的步骤
Sep 11 #Javascript
You might like
超外差式晶体管收音机的组装与统调
2021/03/01 无线电
Search File Contents PHP 搜索目录文本内容的代码
2010/02/21 PHP
thinkPHP的Html模板标签使用方法
2012/11/13 PHP
Youku 视频绝对地址获取的方法详解
2013/06/26 PHP
ajax返回值中有回车换行、空格的解决方法分享
2013/10/24 PHP
mysql desc(DESCRIBE)命令实例讲解
2016/09/24 PHP
JavaScript中使用typeof运算符需要注意的几个坑
2014/11/08 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
2015/09/14 Javascript
详解AngularJs HTTP响应拦截器实现登陆、权限校验
2017/04/11 Javascript
Angular2的管道Pipe的使用方法
2017/11/07 Javascript
利用JS测试目标网站的打开响应速度
2017/12/01 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
2018/01/08 jQuery
浅谈vue项目重构技术要点和总结
2018/01/23 Javascript
用p5.js制作烟花特效的示例代码
2018/03/21 Javascript
如何使用VuePress搭建一个类型element ui文档
2019/02/14 Javascript
jQuery/JS监听input输入框值变化实例
2019/10/17 jQuery
token 机制和实现方式
2020/12/15 Javascript
Python中的os.path路径模块中的操作方法总结
2016/07/07 Python
解决Pycharm调用Turtle时 窗口一闪而过的问题
2019/02/16 Python
详解Python中的内建函数,可迭代对象,迭代器
2019/04/29 Python
Django框架模板用法入门教程
2019/11/04 Python
python扫描线填充算法详解
2020/02/19 Python
Python如何避免文件同名产生覆盖
2020/06/09 Python
css3动画事件—webkitAnimationEnd与计时器time事件
2013/01/31 HTML / CSS
css3中flex布局宽度不生效的解决
2020/12/09 HTML / CSS
STUBHUB日本:购买和出售全球活动门票
2018/07/01 全球购物
Overload和Override的区别
2012/09/02 面试题
关于毕业的中学校园广播稿
2014/01/26 职场文书
夫妻双方自愿离婚协议书
2014/10/24 职场文书
演讲比赛通讯稿
2015/07/18 职场文书
2015年城管执法工作总结
2015/07/23 职场文书
2015年国庆节标语大全
2015/07/30 职场文书
小学思想品德教学反思
2016/02/24 职场文书
python基于turtle绘制几何图形
2021/06/15 Python
Java并发编程之原子性-Atomic的使用
2022/03/16 Java/Android
Python实现提取PDF简历信息并存入Excel
2022/04/02 Python