利用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 相关文章推荐
jQuery库与其他JS库冲突的解决办法
Feb 07 Javascript
简单常用的幻灯片播放实现代码
Sep 25 Javascript
JavaScript原型链示例分享
Jan 26 Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
Aug 31 Javascript
如何判断Javascript对象是否存在的简单实例
May 18 Javascript
基于JQuery实现分隔条的功能
Jun 17 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
Feb 18 Javascript
vue.js语法及常用指令
Oct 29 Javascript
基于iScroll实现内容滚动效果
Mar 21 Javascript
Node.js+Express+Mysql 实现增删改查
Apr 03 Javascript
Vue 使用typescript如何优雅的调用swagger API
Sep 01 Javascript
Promise静态四兄弟实现示例详解
Jul 07 Javascript
浅谈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
php中inlcude()性能对比详解
2012/09/16 PHP
php获取操作系统语言代码
2013/11/04 PHP
支付宝接口开发集成支付环境小结
2015/03/17 PHP
php + WebUploader实现图片批量上传功能
2019/05/06 PHP
yii框架使用分页的方法分析
2019/07/25 PHP
原生js实现半透明遮罩层效果具体代码
2013/06/06 Javascript
浅谈js 闭包引起的内存泄露问题
2015/06/22 Javascript
基于jquery插件编写countdown计时器
2016/06/12 Javascript
微信小程序 实例应用(记账)详解
2016/09/28 Javascript
js倒计时小实例(多次定时)
2016/12/08 Javascript
分析JS中this引发的bug
2017/12/12 Javascript
使用vue for时为什么要key【推荐】
2019/07/11 Javascript
JavaScript链式调用原理与实现方法详解
2020/05/16 Javascript
深入解析微信小程序开发中遇到的几个小问题
2020/07/11 Javascript
Python内建数据结构详解
2016/02/03 Python
实例讲解Python中函数的调用与定义
2016/03/14 Python
简单谈谈python中的多进程
2016/11/06 Python
详解python中Numpy的属性与创建矩阵
2018/09/10 Python
python射线法判断一个点在图形区域内外
2019/06/28 Python
Python3实现二叉树的最大深度
2019/09/30 Python
python 实现Flask中返回图片流给前端展示
2020/01/09 Python
python同义词替换的实现(jieba分词)
2020/01/21 Python
使用Python项目生成所有依赖包的清单方式
2020/07/13 Python
django中cookiecutter的使用教程
2020/12/03 Python
HTML5的结构和语义(1):前言
2008/10/17 HTML / CSS
捷克体育用品购物网站:D-sport
2017/12/28 全球购物
在网络中有两台主机A和B,并通过路由器和其他交换设备连接起来,已经确认物理连接正确无误,怎么来测试这两台机器是否连通?如果不通,怎么来判断故障点?怎么排
2014/01/13 面试题
大学生入党自我鉴定
2013/10/31 职场文书
2014三八妇女节活动总结
2014/03/01 职场文书
个人合作协议书范本
2014/04/18 职场文书
好学生评语大全
2014/05/05 职场文书
护士节活动总结
2014/08/29 职场文书
教师党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
特此通知格式
2015/04/27 职场文书
每日六道java新手入门面试题,通往自由的道路
2021/06/30 Java/Android
Win11 25163.1010更新补丁KB5016904推送,测试服务验证管道(附更新修复汇总)
2022/07/23 数码科技