canvas绘图

该元素负责在页面中设定一个区域，然后由js动态地在这个区域中绘制图形。这个技术最早是由美国苹果公司推出的，目的是为了取代flash，很快主流浏览器都支持它。

绘制路径

要绘制路径首先必须调用beginPath()方法，如果想绘制一条连接到起点的线条则调用closePath()方法；如果路径已完成，你想用fillStyle填充它，可以调用fill()方法。另外还可以调用stroke()方法对路径描边，使用strokeStyle。

接口	参数	功能
rect（）	x,y,width,height	从点x,y开始绘制一个矩形，宽和高分别由width和height指定，这个方法是绘制路径。而不是fillRect()和strokeRect()所绘制的独立形状
arc()	x,y,radius,startAngle,endAngle,counterclockwise 六个参数	以x,y为圆心绘制一条弧线，半径为radius，起始和结束角度分别为startAngle和endAngle，最后一个参数表示角度是否按逆时针方向计算，值为false表示顺时针。
lineTo()	x,y	从上一点开始绘制一条直线，到x,y为止
moveTo()	x,y	将绘图游标移动到x,y，不画线。

按照上图，就能画出圆，半圆，，四分之一圆等等。

开始画图

1.先设置一块画布。

<style>.cvs {border：solid 1px blue;  //加一个边框更容易确定位置display: block;      //把canvas设置为块margin: auto;      //canvas居中显示}</style><canvas class="cvs" width="500px" height="500px"></canvas>

2.画一个圆，并将圆心坐标重新设为（0，0）

var c = document.getElementsByClassName('cvs')[0]var cv = c.getContext('2d')cv.translate(250, 250)function yuan() {cv.lineWidth = 10;cv.beginPath()cv.arc(0, 0, 245, 0, 2 * Math.PI, false)cv.closePath()cv.stroke()}

3.在钟面上标上时间和刻度

function num() {var nums = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];for (i = 0; i < nums.length; i++) {var rad = 2 * Math.PI / 12 * i;var x = Math.cos(rad) * 215;var y = Math.sin(rad) * 215;cv.font = "20px Georgia";cv.textBaseline = 'middle';cv.textAlign = "center";cv.fillText(nums[i], x, y);}for (i = 0; i < 60; i++) {var rad = 2 * Math.PI / 60 * i;var x = Math.cos(rad) * 230;var y = Math.sin(rad) * 230;cv.beginPath();if (i % 5 == 0) {cv.fillStyle = '#000'} else {cv.fillStyle = '#ccc'}cv.arc(x, y, 2, 0, Math.PI * 2, false)cv.closePath();cv.fill()}}

4.开始画时针

function dHour(hour, minu) { //因为时针会随着分针的走动而走动，所以设置两个参数cv.save();cv.beginPath();var rad = 2 * Math.PI / 12 * hour;   //时针每小时走的角度var rad2 = 2 * Math.PI / 12 / 60 * minu;cv.lineWidth = 8;cv.lineCap = 'round'cv.rotate(rad + rad2) //时针走的角度cv.moveTo(0, 10)cv.lineTo(0, -115)cv.stroke();cv.restore();}

5.画分针

function dMinu(minu) {   cv.save();cv.beginPath();var rad = 2 * Math.PI / 60 * minu;cv.lineWidth = 5;cv.lineCap = 'round'cv.rotate(rad)cv.moveTo(0, 10)cv.lineTo(0, -160)cv.stroke();cv.restore();}

6.画秒针，秒针的画法和分针基本上一样

function dSecd(secd) {cv.save();cv.beginPath();var rad = 2 * Math.PI / 60 * secd;cv.lineWidth = 3;cv.lineCap = 'round'cv.strokeStyle = "#f00";cv.rotate(rad)cv.moveTo(0, 10)cv.lineTo(0, -200)cv.stroke();cv.restore();}

7.在圆心画一个圆点，用来装饰

function center() {cv.beginPath()cv.arc(0, 0, 5, 0, 2 * Math.PI, false)cv.fillStyle = "gray"cv.fill()}

8.让指针转动

function time() {var d = new Date();var h = d.getHours();var m = d.getMinutes();var s = d.getSeconds();// var cr = Math.floor(Math.random() * 256)// var cg = Math.floor(Math.random() * 256)// var cb = Math.floor(Math.random() * 256)// document.querySelector('body').style.background = "rgb(" + cr + ',' + cg + ',' + cb + ')';    //网页背景每秒随机改变，可以不要cv.clearRect(-250, -250, 500, 500); //每次都清除一下画布，不然每次指针转动都会留下轨迹yuan()num()dHour(h, m)dMinu(m)dSecd(s)center()//将前面函数全部调用}time()setInterval(time, 1000);设置定时器，每秒调用一次

完整代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>clock</title>
</head><body><style>.cvs {display: block;margin: auto;}</style><canvas class="cvs" width="500px" height="500px"></canvas><script>var c = document.getElementsByClassName('cvs')[0]var cv = c.getContext('2d')cv.translate(250, 250)function yuan() {cv.lineWidth = 10;cv.beginPath()cv.arc(0, 0, 245, 0, 2 * Math.PI, false)cv.closePath()cv.stroke()}function num() {var nums = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];for (i = 0; i < nums.length; i++) {var rad = 2 * Math.PI / 12 * i;var x = Math.cos(rad) * 215;var y = Math.sin(rad) * 215;cv.font = "20px Georgia";cv.textBaseline = 'middle';cv.textAlign = "center";cv.fillText(nums[i], x, y);}for (i = 0; i < 60; i++) {var rad = 2 * Math.PI / 60 * i;var x = Math.cos(rad) * 230;var y = Math.sin(rad) * 230;cv.beginPath();if (i % 5 == 0) {cv.fillStyle = '#000'} else {cv.fillStyle = '#ccc'}cv.arc(x, y, 2, 0, Math.PI * 2, false)cv.closePath();cv.fill()}}// 时针function dHour(hour, minu) {cv.save();cv.beginPath();var rad = 2 * Math.PI / 12 * hour;var rad2 = 2 * Math.PI / 12 / 60 * minu;cv.lineWidth = 8;cv.lineCap = 'round'cv.rotate(rad + rad2)cv.moveTo(0, 10)cv.lineTo(0, -115)cv.stroke();cv.restore();}// 分针function dMinu(minu) {cv.save();cv.beginPath();var rad = 2 * Math.PI / 60 * minu;cv.lineWidth = 5;cv.lineCap = 'round'cv.rotate(rad)cv.moveTo(0, 10)cv.lineTo(0, -160)cv.stroke();cv.restore();}// 秒针function dSecd(secd) {cv.save();cv.beginPath();var rad = 2 * Math.PI / 60 * secd;cv.lineWidth = 3;cv.lineCap = 'round'cv.strokeStyle = "#f00";cv.rotate(rad)cv.moveTo(0, 10)cv.lineTo(0, -200)cv.stroke();cv.restore();}// 圆心function center() {cv.beginPath()cv.arc(0, 0, 5, 0, 2 * Math.PI, false)cv.fillStyle = "gray"cv.fill()}function time() {var d = new Date();var h = d.getHours();var m = d.getMinutes();var s = d.getSeconds();// var cr = Math.floor(Math.random() * 256)// var cg = Math.floor(Math.random() * 256)// var cb = Math.floor(Math.random() * 256)// document.querySelector('body').style.background = "rgb(" + cr + ',' + cg + ',' + cb + ')';cv.clearRect(-250, -250, 500, 500);yuan()num()dHour(h, m)dMinu(m)dSecd(s)center()}time()setInterval(time, 1000);</script>
</body></html>

相比太极图，时针难度的确是加大了不少。大家也可以继续在时钟的基础上加上更多的东西，让这个时钟变得更加美观。
希望大家在阅读完之后，有更简单的绘制方法，请在评论区留言，谢谢。

用canvas画时钟（一步步详解附带源代码）相关推荐

用canvas画飞机大战（一步步详解附带源代码,源码和素材上传到csdn,可以免费下载）
canvas绘图该元素负责在页面中设定一个区域,然后由js动态地在这个区域中绘制图形.这个技术最早是由美国苹果公司推出的,目的是为了取代flash,很快主流浏览器都支持它. 飞机大战前面几期用ca ...
前端小游戏2048（一步步详解附带源代码，源码上传到csdn,可以免费下载）
2048小游戏 2048是前端开发必经的一个小游戏,2048小游戏包含了HTML,CSS和JavaScript. 简介 <2048>,是一款益智小游戏,这款游戏是由年仅19岁的意大利程序员 ...
ios 扇形按钮_IOS 开发中画扇形图实例详解
IOS 开发中画扇形图实例详解昨天在做项目中,遇到一个需要显示扇形图的功能,网上搜了一下,发现code4app里面也没有找到我想要的那种类似的效果,没办法了,只能自己学习一下如何画了. 首先我们需要 ...
python比例图_python在地图上画比例的实例详解
现在用python画图已经难不倒一直跟小编学习的小伙伴们了,甚至有的小伙伴画图比小编还要厉害.为此小编还偷偷下了一番功夫,画图这种事情,细节上的完善肯定能让图片更加好看.所以小编知道大家会画地图,但是 ...
DDA画线算法+代码详解-直线扫描算法之一
#DDA画线算法+代码详解-直线扫描算法之一本文目录结构如下 1.直线扫描算法简介 2.DDA直线扫描算法 2.1 公式推理 1.求斜率K: 2.当|K| <= 1 时 3.当|K| > ...
二叉树前序中序后续线索树_后序线索二叉树怎么画线索二叉树基本操作详解 - 办公软件 - 服务器之家...
后序线索二叉树怎么画线索二叉树基本操作详解发布时间:2017-05-23 来源:服务器之家遍历二叉树是以一定规则将二叉树中结点排列成一个线性序列,得到二叉树中结点的先序,中序或后序序列.这实际上 ...
html语言怎么打出红色心形,使用HTML-CSS画爱心的过程详解
如何使用HTML-CSS来画出一个爱心呢,下面我就教大家使用HTML-CSS画爱心的方法. 第一步: 先画一个正方形.如图: css画桃心 .heart-body { width: 500px; ma ...
html5 canvas基础与动画开发详解-吴华-专题视频课程
html5 canvas基础与动画开发详解-533人已学习课程介绍一.本课程几乎包括所有canvas常用的api用法讲解二.包括以下案例应用: 1.坐标系绘制 2.图片裁剪与填充 ...
GPS卫星时钟服务器使用详解
GPS卫星时钟服务器使用详解因为分布式系统使用分布式算法,所以它的同步机制比集中式系统更为复杂.在集中式系统中能够做到的,在某一位置上能集收到系统的所有信息,然后由某些进程检测这些信息,再做出同步决 ...

用canvas画时钟（一步步详解附带源代码）

canvas绘图

绘制路径

开始画图

完整代码

用canvas画时钟（一步步详解附带源代码）相关推荐

最新文章

热门文章