canvas-八卦图和时钟实现
八卦图：
<body>
canvas id=" myCanvas" width="" height= ”"></canvas>
<script>
//获取到画布元素
let myCanvas = document.getElementById( "myCanvas );
//通过画布元素获取到上下文(画笔)
let ctx = myCanvas.getContext("2d" );
//右边白色的半圆
ctx.fillstyle =“#fff";
ctx.beginPath();
ctx.arc(, , , (Math.PI / ) * , (Math.PI / ) * );
ctx.fill();
//左边黑色的圆
ctx.fillstyle = #";
ctx.beginPath();
ctx.arc(, , ， (Math.PI / ) * , (Math.PI / ) * , true);
ctx.fill();
//左边白色的小圆
ctx.fillstyle = "#fff";
ctx.beginPath();
ctx.arc(, ，, (Math.PI / ) * , (Math.PI / ) ., true);
ctx.fill();
//右边黑色的小圆
ctx.fillstyle =“#” ;
ctx.beginPath();
ctx.arc(, , , (Math.PI / ) * , (Math.PI / ) * );
ctx.fill();
//黑色的小圆点
ctx.fillstyle =“#" ;
ctx.beginPath();
ctx.arc(, ， , , Math.PI * );
ctx.fill();
//白色的小圆点
ctx.fillstyle =“#fff";
ctx.beginPath();
ctx.arc(, , , , Math.PI * );
ctx.fill();
</script>
</body>
时钟：
<body>
<canvas id="myCanvas" width="500" height="400">
很抱歉,你的浏览器不支持canvas元素
</canvas>
<script>
var c = document.getElementById('myCanvas');//获取Canvas对象
var ctx = c.getContext('2d');//获取上下文
function drawClock()
{
ctx.clearRect(0,0, c.width, c.height);//清除画布
c.width = c.width;//清除画布时需要重置宽度,否则会有一个画布的重叠
var x = 250,y = 200,r = 180;//定义圆盘的中心坐标和圆盘的半径
/*获取实际的时间*/
var objTime = new Date();
var objHour = objTime.getHours();
var objMin = objTime.getMinutes();
var objSen = objTime.getSeconds();
/*将时间转换为具体的弧度*/
/*
* 因为时钟是从12点的位置算作开始,但是canvas是3点钟的位置算作0度,所以-90度指向12点方向
* 时针是每小时相隔30度,objMin/2是为了做出当分针过半时,时针也相应的处于两个小时之间
* 分针和秒针是每次相隔6度
*/
var arcHour = (-90+objHour*30 + objMin/2)*Math.PI/180;
var arcMin = (-90+objMin*6)*Math.PI/180;
var arcSen = (-90+objSen*6)*Math.PI/180;
/*绘制圆盘*/
ctx.beginPath();
for(var i=0;i<60;i++)//一共360度,一共60分钟,每分钟相隔6度,360/6=60
{
ctx.moveTo(x,y);
ctx.arc(x,y,r,6*i*Math.PI/180,6*(i+1)*Math.PI/180,false);
}
ctx.closePath();
ctx.stroke();
/*绘制白盘盖住下面的线*/
ctx.fillStyle = 'white';
ctx.beginPath();
ctx.arc(x,y,r*19/20,0,360*Math.PI/180,false);//半径取值为r的20分之19
ctx.closePath();
ctx.fill();
/*依葫芦画瓢,制作每一个小时的线*/
/*绘制圆盘*/
ctx.beginPath();
ctx.lineWidth = 3;
for(var i=0;i<12;i++)//一共360度,一共12个小时,每小时相隔30度,360/30=12
{
ctx.moveTo(x,y);
ctx.arc(x,y,r,30*i*Math.PI/180,30*(i+1)*Math.PI/180,false);
}
ctx.closePath();
ctx.stroke();
/*绘制白盘盖住下面的线*/
ctx.fillStyle = 'white';
ctx.beginPath();
ctx.arc(x,y,r*18/20,0,360*Math.PI/180,false);//半径取值为r的20分之18
ctx.closePath();
ctx.fill();
/*开始绘制时针分针和秒针,技巧就是起始弧度和结束弧度值一样*/
/*开始绘制时针*/
ctx.beginPath();
ctx.moveTo(x,y);
ctx.lineWidth = 7;
ctx.lineCap = 'round';
ctx.arc(x,y,r*10/20,arcHour,arcHour,false);//半径取值为r的20分之10
ctx.stroke();
ctx.closePath();
/*开始绘制分针*/
ctx.beginPath();
ctx.moveTo(x,y);
ctx.lineWidth = 5;
ctx.lineCap = 'round';
ctx.arc(x,y,r*12/20,arcMin,arcMin,false);//半径取值为r的20分之12
ctx.stroke();
ctx.closePath();
/*开始绘制秒针*/
ctx.beginPath();
ctx.moveTo(x,y);
ctx.lineWidth = 2;
ctx.lineCap = 'round';
ctx.arc(x,y,r*16/20,arcSen,arcSen,false);//半径取值为r的20分之16
ctx.stroke();
ctx.closePath();
}
setInterval('drawClock()',1000);//每隔1秒调用绘制时钟函数
</script>
</body>
canvas-八卦图和时钟实现的更多相关文章
- canvas画布——画八卦图
实例 创建一个圆形: var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d") ...
- 基于canvas的原生JS时钟效果
概述 运用html5新增画布canvas技术,绘制时钟效果,无需引用任何插件,纯js. 详细 代码下载:http://www.demodashi.com/demo/11935.html 给大家介绍一个 ...
- Aristochart – 灵活的 HTML5 Canvas 折线图
Aristochart 是基于 HTML5 Canvas 的折线图功能库,具有高定制性和灵活性的特点.Aristochart 会帮助你处理图形显示,让你能够专注于业务逻辑处理. 您可能感兴趣的相关文章 ...
- 使用CSS达到阴阳八卦图等图形
CSS还是比較强大的,能够实现中国古典的"阴阳八卦图"等形状. 正方形 #rectangle { width: 200px; height: 100px; backgrount-c ...
- 用CSS伪类制作一个不断旋转的八卦图？
前言 介绍一下如何制作一个不断旋转的八卦图.快速预览代码及效果,点击:八卦图 代码如下: HTML部分 <!DOCTYPE html> <html> <head> ...
- 用CSS实现阴阳八卦图等图形
CSS还是比较强大的,可以实现中国古典的"阴阳八卦图"等形状. 正方形 #rectangle { width: 200px; height: 100px; backgrount-c ...
- css实例——“旋转”太极八卦图
话不多说,直接上代码: HTML代码部分: <!DOCTYPE html> <html> <head> <meta charset="utf-8&q ...
- canvas 绘制八卦图
绘制要点: 1.getContext('2d'); -->绘图环境,2维空间 2.fillRect(x,y,w,h); -->矩形:实心(黑色背景) 3.strokeRect(x,y,w, ...
- [html5] canvas 绘图：八卦图
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <title&g ...
随机推荐
- 21.Merge Two Sorted Lists 、23. Merge k Sorted Lists
21.Merge Two Sorted Lists 初始化一个指针作为开头,然后返回这个指针的next class Solution { public: ListNode* mergeTwoLists ...
- Swift 字面量
所谓字面量,就是指像特定的数字,字符串或者是布尔值这样,能够直接了当地指出自己的类型并为变量进行赋值的值.比如在下面: let aNumber = //整型字面量 let aString = &quo ...
- CXF框架构建和开发 Services
Apache CXF 是一个开源的 Services 框架,CXF 帮助您来构建和开发 Services 这些 Services 可以支持多种协议,比如:SOAP.POST/HTTP.RESTful ...
- Redis有序Set、无序Set的使用经历
为了实现一个类似关系数据库中的卖家信息的单表,首先我们知道单表必然可增删查改,其次为了区分先来后到又需要有ID主键且自增长.开始考虑使用hash数据类型,因为hash是key+列1.列2...这样一来 ...
- 【S/4系列专栏】关于S/4你想知道的问题与答案
转自:http://www.sohu.com/a/152235225_652820 S/4系列专栏将收集国内的实施案例,从各个角度进行分析,包括S/4的由来,S/4各个版本的变化,企业是否有必要选择S ...
- SAP HANA2可视化客户端工具
TreeSoft数据库管理系统使用JAVA开发,采用稳定通用的springMVC +JDBC架构,实现基于WEB方式对 MySQL,Oracle,PostgreSQL,MSSQL, Hive,DB2, ...
- OpenGL学习（3）——Shader（补）
完成章节后练习. 练习 1. Adjust the vertex shader so that the triangle is upside down. #version 330 core layou ...
- MyBatis接口式编程
MyBatis使用接口连接数据库 之前学习了如何传统的使用MyBatis连接数据库,今天学习如何使用更方便快捷的方式练级数据库.使用接口连接数据库 https://www.cnblogs.com/li ...
- 花里胡哨，如何在Linux终端输出带有颜色的字体，将带颜色的字体赋值给变量
背景 在日常操作Linux的情况下,总会遇到一些需求,比如说,把输出的内容用不同颜色标注出来,以达到醒目.提示的目的,那么如何在Linux终端输出带有颜色的字体呢? Linux终端输出字符颜色 ...
- 【MOOC课程学习记录】数据结构
看了中国大学MOOC zju的<数据结构>2019夏的第九次开课.做了一些PTA上的习题,没有全做,因为做得慢,老是不会,加上并不能做到一有空就学习,所以做不完了,给跪了Orz. 以后有时 ...