第一个Canvas实例-钟表

说到HTML5，我们就要首先知道Canvas标签，这个标签定义了一块画布，所有图形的画面都要在这块画布上呈

现出来。其实光有Canvas是做不了任何事的，学过Windows的人都知道，在Windows里面绘图要先得到一个设

备上下文DC，在Canvas里面绘图同样要得到一个渲染上下文，在HTML5中，我们的图形并不是直接画到屏幕上

的，而是先画到一个上下文上，然后再刷新到屏幕上的。在Canvas中，我们通过语句getContext('2d')方法

返回一个CanvasRenderingContext2D对象，即渲染上下文对象，然后通过调用它的方法来实现Canvas绘图。

Canvas实现模拟电子时钟，代码如下

clock.html

<!doctype html>
<html><head></head><body><!-- 定义canvas画布，包括宽度和高度，还有背景颜色 --><canvas id="clock" width="1350" height="620" style="background:black">你的浏览器不支持canvas标！</canvas><!-- 用src引用js源文件 --><script src="clock.js"></script></body>
</html>

clock.js

//获取上下文文档对象
var clock = document.getElementById('clock');
var cxt = clock.getContext('2d');//画指针
function drawPointer(width, color, value, angle, startx, starty, endx, endy){cxt.save();                 //先保存当前画布cxt.lineWidth = width;      //设置画笔的宽度cxt.strokeStyle = color;    //设置画笔的颜色cxt.translate(550, 310);    //重置异次元空间的原点坐标cxt.rotate(value * angle * Math.PI / 180);  //设置旋转的角度，参数是弧度cxt.beginPath();cxt.moveTo(startx, starty);cxt.lineTo(endx, endy);cxt.closePath();            //先闭合路径，再画线cxt.stroke();               //开始画线cxt.restore();              //将旋转后的线段返回给画布
}//画刻度
function drawScale(size, width, color, value, startx, starty, endx, endy){for(var i = 0; i < size; i++){drawPointer(width, color, value, i, startx, starty, endx, endy);}
}//为表盘的中心填充颜色
function drawFill(){cxt.save();cxt.beginPath();cxt.arc(550, 310, 7, 0, 360, false);cxt.closePath();cxt.fillStyle = "red";cxt.fill();cxt.restore();
}//画时钟
function drawClock(){cxt.clearRect(0, 0, 1350, 620);  //清空整个画布var now = new Date();            //获取系统时间，取出时,分,秒var sec = now.getSeconds();var min = now.getMinutes();var hour = now.getHours();min += sec / 60;hour += min / 60;if(hour > 12) hour -= 12;cxt.beginPath();cxt.lineWidth = 10;cxt.strokeStyle = "blue";cxt.arc(550, 310, 300, 0, 360, false);cxt.closePath();cxt.stroke();drawScale(12, 7, "pink", 30, 0, -280, 0, -260);      //画时刻度drawScale(60, 5, "pink", 6,  0, -280, 0, -270);      //画分刻度drawPointer(7, "purple", hour, 30, 0, 12, 0, -210);  //画时针drawPointer(5, "yellow", min, 6, 0, 15, 0, -240);    //画分针drawPointer(4, "red", sec, 6, 0, 17, 0, -250);       //画秒针//细化秒针,为秒针加箭头drawPointer(3, "red", sec, 6, -7, -235, 0, -255);drawPointer(3, "red", sec, 6, 7, -235, 0, -255);drawFill();
}drawClock();
setInterval(drawClock, 1000);   //setInterval()方法中表示每隔1000ms，就执行drawClock一次

运行结果：

第一个Canvas实例-钟表相关推荐

每天一个JavaScript实例-canvas绘图
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
python tkinter计算器实例_Python+tkinter使用80行代码实现一个计算器实例
Python+tkinter使用80行代码实现一个计算器实例本文主要探索的是使用Python+tkinter编程实现一个简单的计算器代码示例,具体如下. 闲话不说,直奔主题.建议大家跟着敲一遍代码, ...
开发一个Canvas小游戏实现一个游戏“引擎”
前言这个游戏其实在三四年前就写了,中间还重构过好几次,之前都是用简单的面向对象和函数式编程来写,游戏中的元素关系到还是分的挺开,但是游戏的渲染,运算等逻辑分的不够清晰,整个逻辑基本都是自顶向下的流水 ...
canvas制作钟表
之前用html+css+JavaScript实现了一个简单钟表,但还是有一些问题,主要是一些css属性不同浏览器支持效果不一样,所以尝试用 canvas实现了一个简单的钟表,效果在下方,当然了,采用c ...
超多经典 canvas 实例，动态离子背景、移动炫彩小球、贪吃蛇、坦克大战、是男人就下100层、心形文字等等等...
超多经典 canvas 实例普及:<canvas> 元素用于在网页上绘制图形.这是一个图形容器,您可以控制其每一像素,必须使用脚本来绘制图形. 注意:IE 8 以及更早的版本不支持 &l ...
PixiJS学习（1）创建一个canvas
简介 PixiJs是一款轻量级的渲染引擎库官网地址:https://www.pixijs.com/ github:https://github.com/pixijs/pixi.js <scri ...
JUnit基础及第一个单元测试实例（JUnit3.8）
JUnit基础及第一个单元测试实例(JUnit3.8) 单元测试单元测试(unit testing) ,是指对软件中的最小可测试单元进行检查和验证. 单元测试不是为了证明您是对的,而是为了证明您没有 ...
每天一个JavaScript实例-apply和call的使用方法
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
每天一个JavaScript实例-获取元素当前高度
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

第一个Canvas实例-钟表

第一个Canvas实例-钟表相关推荐

最新文章

热门文章