HTML5之canvas绘制动态时钟 - 推酷
HTML5之canvas绘制动态时钟
& & & & &最近看了一些HTML5的网页，感觉很高端，于是开始上手HTML5,跟着网上的视频学，收获还是不小，今天说说这几天学的HTML5新加的canvas标签，通过写这篇博客来巩固一下这几天学到的东西。
& & & & &canvas标签是是HTML5新加的绘制背景的，但是正像&canvas&的意思“画布”一样，它只是一张给别人在上面画东西的东西，就像我们小学时的美术本一样是给我们来 画画的纸，自己并不能画什么东西，所以要想在布上绘制东西就需要借助canvas 的API和javascript操作实现画图或者其他的一些操作。
& & & & &canvas有一些自己常用的属性，如&id&,&width&，&height&，&style....&不用说 ，width和height属性是设置画布的大小的，也就是规定我们所能作图的区域，style属性可以设置画布的背景颜色，同时&id&是每一个画布对象都必须要有的，因为在下面用javascript来操作canvas画布的时候要用到。
下面具体介绍一下使用HTML5来在网页上绘制一个显示当前系统时间的时钟。
& & Step 1：创建一个画布，并指定大小和id,同时给画布加上一个背景色
&canvas id = &clock& width = &500& height =&500& style = &background:gray&&
你的浏览器太老了不支持canvs标签，看不到时钟！
& & Step2:在script中通过document.getElementById()来得到画布，同时使用getContext()方法来返回一个对象 & & 指出访问绘图功能必要的API
var clock = document.getElenmentById(&clock&);
var cxt = clock.getContext('2d');
& & Step3:使用的到的cxt进行各种属性的设置和绘制了，上代码：
var clock = document.getElementById('clock');
var cxt = clock.getContext('2d');
function drawClock() {
//清屏,可以看到针在移动
cxt.clearRect(0,0,500,500);
//得到系统当前的时间
var now = new Date();
//得到时分秒
var sec = now.getSeconds();
var min = now.getMinutes();
var hour = now.getHours();
//小时是浮点数 类型要得到时针准确的位置，必须将当前的分钟也转换为//小时
hour = hour+min/60;
//将24小时转化为12小时制
hour =(hour&12)?(hour-12):
//绘制表盘
cxt.lineWidth=10;
cxt.strokeStyle = &blue&;
cxt.beginPath();
cxt.arc(250,250,200,0,360,false);
cxt.stroke();
cxt.closePath();
//绘制刻度
for(var i = 0; i & 12; i++) {
cxt.save();
//设置时针的粗细
cxt.lineWidth = 7;
//设置时针的颜色
cxt.strokeStyle=&#000&;
//设置异次元空间的0,0点
cxt.translate(250,250);
//再设置旋转角度
cxt.rotate(i*30*Math.PI/180);
//开始绘制
cxt.beginPath();
cxt.moveTo(0,-170);
cxt.lineTo(0,-190);
cxt.stroke();
cxt.closePath();
cxt.restore();
for(var i = 0; i & 60; i++) {
cxt.save();
//设置分刻度的粗细
cxt.lineWidth = 5;
//设置分刻度的颜色
cxt.strokeStyle = &#123&;
//设置或者重置画布的0,0点
cxt.translate(250,250);
//设置旋转的角度
cxt.rotate(i*6*Math.PI/180);
//开始绘制
cxt.beginPath();
cxt.moveTo(0,-180);
cxt.lineTo(0,-190);
cxt.stroke();
cxt.closePath();
cxt.restore();
cxt.save();
//设置时针风格
cxt.lineWidth = 7;
//设置时针的颜色
cxt.strokeStyle = &#000& ;
//设置异次元空间的0,0点
cxt.translate(250,250);
//设置旋转的角度
cxt.rotate(hour*30*Math.PI/180);
//开始绘制
cxt.beginPath();
cxt.moveTo(0,-140);
cxt.lineTo(0,10);
cxt.stroke();
cxt.closePath();
cxt.restore();
cxt.save();
//设置分针的风格
cxt.lineWidth = 5;
cxt.strokeStyle = &#000&;
//设置异次元空间分针画布的圆心
cxt.translate(250,250);
//设置旋转角度
cxt.rotate(min*6*Math.PI/180);
//开始绘制
cxt.beginPath();
cxt.moveTo(0,-160);
cxt.lineTo(0,15);
cxt.stroke();
cxt.closePath();
cxt.restore();
cxt.save();
//设置秒针的风格
cxt.lineWidth = 3;
cxt.strokeStyle = '#000';
//设置异次元分针画布的圆心
cxt.translate(250,250);
//设置旋转角度
cxt.rotate(sec*6*Math.PI/180);
//绘制秒针
cxt.beginPath();
cxt.moveTo(0,-170);
cxt.lineTo(0,20);
cxt.stroke();
cxt.closePath();
//画出时针，分针，秒针的交叉点
cxt.beginPath();
cxt.arc(0,0,5,0,360,false);
//设置填充样式
cxt.fillStyle = &gray&;
cxt.fill();
//设置笔触样式(秒针已设置)
cxt.stroke();
cxt.closePath();
//设置秒针前段的小圆点
cxt.beginPath();
cxt.arc(0,-150,5,0,360,false);
//设置填充样式
cxt.fillStyle=&gray&;
cxt.fill();
//设置笔触样式(秒针已设置)
cxt.stroke();
cxt.closePath();
cxt.restore();
//使用setInterval(方法名，每隔多少毫秒重绘一下）每隔一段时间重新绘制，看到动的效果
drawClock();
//刷新不出现延迟
setInterval(drawClock,1000);
&在上面的代码中主要就是
的那几个属性和方法下面细说一下：
getContext()
返回一个对象，指出访问绘图功能必要的
设置或返回当前的线条宽度(1--10)
strokeStyle
&设置或返回用于笔触的颜色、渐变或模式（线条的）
beginPath()
起始一条路径，或重置当前路径,每画一个新的图形都要重置一个新的路径，不然所有的图会连起来
closePath()
创建从当前点回到起始点的路径，绘图就发生在beginPath()和closePath()中间，有始有终
曲线（用于创建圆形或部分圆）,有六个参数，依次是圆心x,y,坐标，半径，画过的幅度，后面的boolean值控制顺时针还是逆时针
绘制已定义的路径,不调用这个方法就不会有东西出来。画的是线条，对应的有填充的fill()
保存当前环境的状态,主要是用在旋转的时候,对应的是下面的释放restore()方法，他们两个是成对出现
返回之前保存过的路径状态和属性。
translate()
重新映射画布上的
位置,目前我只知道主要用在旋转那里，重置圆心，后面的都要以当前的圆心为标准
把路径移动到画布中的指定点，不创建线条,相当于起始点
添加一个新点
，和上面的moveTo()指定的点构成一条直线
fillStyle()
设置填充的样式，颜色,和上面的strokeStyle()对应记忆
填充当前绘图，没有这个方法也不会有显示，和上面的stroke()对应记忆
setInterval()
指定相应的时间再次执行指定的方法，两个参数，一个是方法名，一个是时间
clearRect()
在给定的矩形内清除指定所画的东西。
旋转当前绘图,传入一个角度的参数
以上是这个时钟主要用到的canvas中的API和属性，canvas中的属性和方法是很多的，上面只是一小部分，多练练，多用就会熟悉了。
1.使用HTML5中的canvas绘制一些图像还是很简单的，感觉比java简单多了。
2:本人在网页这一块也是新手一枚，算小白一个，可能很多地方写的也不全面。也可能说法有错误，很多地方知道要那么用，但是具体为什么要那么用 还是没怎么搞懂，引用电路实验老师的一句话就是“原理没搞懂”，慢慢来，一点一点进步咯，抱拳！
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致定义图形，比如图表和其他图像，您必须使用脚本来绘制图形。
接下来我们将跟大家分享如何在画布上（Canvas）画一个时钟。
先看下效果图：
&!DOCTYPE html&
&html lang="en" &
&meta charset="utf-8" /&
&title&HTML5 时钟&/title&
&link href="css/main.css" rel="stylesheet" type="text/css" /&
&script src="/jquery-latest.min.js"&&/script&
height: 500
margin: 25
width: 500
&h2&HTML5 时钟&/h2&
&div class="clocks"&
&canvas id="canvas" width="500" height="500"&&/canvas&
Javascript 代码
// inner variables
var canvas,
var clockRadius = 250;
var clockI
// draw functions :
function clear() { // clear canvas function
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
function drawScene() { // main drawScene function
clear(); // clear canvas
// get current time
var date = new Date();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
hours = hours & 12 ? hours - 12 :
var hour = hours + minutes / 60;
var minute = minutes + seconds / 60;
// save current context
ctx.save();
// draw clock image (as background)
ctx.drawImage(clockImage, 0, 0, 500, 500);
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.beginPath();
// draw numbers
ctx.font = '36px Arial';
ctx.fillStyle = '#000';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
for (var n = 1; n &= 12; n++) {
var theta = (n - 3) * (Math.PI * 2) / 12;
var x = clockRadius * 0.7 * Math.cos(theta);
var y = clockRadius * 0.7 * Math.sin(theta);
ctx.fillText(n, x, y);
// draw hour
ctx.save();
var theta = (hour - 3) * 2 * Math.PI / 12;
ctx.rotate(theta);
ctx.beginPath();
ctx.moveTo(-15, -5);
ctx.lineTo(-15, 5);
ctx.lineTo(clockRadius * 0.5, 1);
ctx.lineTo(clockRadius * 0.5, -1);
ctx.fill();
ctx.restore();
// draw minute
ctx.save();
var theta = (minute - 15) * 2 * Math.PI / 60;
ctx.rotate(theta);
ctx.beginPath();
ctx.moveTo(-15, -4);
ctx.lineTo(-15, 4);
ctx.lineTo(clockRadius * 0.8, 1);
ctx.lineTo(clockRadius * 0.8, -1);
ctx.fill();
ctx.restore();
// draw second
ctx.save();
var theta = (seconds - 15) * 2 * Math.PI / 60;
ctx.rotate(theta);
ctx.beginPath();
ctx.moveTo(-15, -3);
ctx.lineTo(-15, 3);
ctx.lineTo(clockRadius * 0.9, 1);
ctx.lineTo(clockRadius * 0.9, -1);
ctx.fillStyle = '#0f0';
ctx.fill();
ctx.restore();
ctx.restore();
// initialization
$(function(){
canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d');
// var width = canvas.
// var height = canvas.
clockImage = new Image();
clockImage.src = 'http://static.oschina.net/uploads/space/5855_nnla_89964.png';
setInterval(drawScene, 1000); // loop drawScene提示本站所有资源仅供学习与参考，请勿用于商业用途。转载请注明来自：
您可能也喜欢
请自觉遵守互联网相关的政策法规，严禁发布色情、暴力、反动的言论。}