用html5中的canvas写的时钟

<%@ page language="java" contentType="text/html; charset=UTF-8"

    pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>时钟</title>

<script type="text/javascript" src="js/jquery.min.js"></script>

 <script type="text/javascript">

 var cxs;

 var canvas;

 $(document).ready(function(){

     canvas=document.getElementById("canvas");

     cxs=canvas.getContext(‘2d‘);

    });

  function date(){

   cxs.clearRect(0,0,500,500);

   var date=new Date();

   var hour=date.getHours();

   var min=date.getMinutes();

   var sec=date.getSeconds();

     cxs.save();

     cxs.translate(30,25);

     //cxs.rotate(-10*Math.PI/180);

     var img =new Image();

     img.src="${pageContext.request.contextPath }/image/7.png";

     cxs.drawImage(img,0,0,1440,900);

     cxs.restore();

  //表盘

  cxs.strokeStyle="blue";

  cxs.lineWidth=10;

  cxs.beginPath();

  cxs.arc(250,250,200,0,360,false);

  cxs.closePath();

  cxs.stroke();

  cxs.beginPath();

  cxs.font="30px Verdana";

  var gradient=cxs.createLinearGradient(250,250,canvas.width,250);

  gradient.addColorStop("0","magenta");

  gradient.addColorStop("0.5","blue");

  gradient.addColorStop("1.0","red");

  cxs.fillStyle=gradient;

  cxs.fillText("余超的设计",180,230);

  cxs.closePath();

  //小时刻度

  for(var i=0;i<12;i++){

     cxs.save();

     cxs.strokeStyle="#000";

     cxs.translate(250,250);

     cxs.lineWidth=7;

     cxs.rotate(i*30*Math.PI/180);

     cxs.beginPath();

     cxs.moveTo(0,-170);

     cxs.lineTo(0,-190);

     cxs.closePath();

     cxs.stroke();

     cxs.restore();

    }

  //分刻度

  for(var i=0;i<60;i++){

     cxs.save();

     cxs.strokeStyle="#000";

     cxs.translate(250,250);

     cxs.lineWidth=5;

     cxs.rotate(i*6*Math.PI/180);

     cxs.beginPath();

     cxs.moveTo(0,-180);

     cxs.lineTo(0,-190);

     cxs.closePath();

     cxs.stroke();

     cxs.restore();

    }

  //时针

     cxs.save();

     cxs.translate(250,250);

     cxs.lineWidth=5;

     cxs.strokeStyle="#000";

     hour=hour>12?hour-12:hour;

     hour+=min/60;

     cxs.rotate(hour*30*Math.PI/180);

     cxs.beginPath();

     cxs.moveTo(0,10);

     cxs.lineTo(0,-110);

     cxs.closePath();

     cxs.stroke();

     cxs.restore();

     //分针

     cxs.save();

     cxs.translate(250,250);

     cxs.lineWidth=6;

     cxs.strokeStyle="#000";

     min+=sec/60;

     cxs.rotate(min*6*Math.PI/180);

     cxs.beginPath();

     cxs.moveTo(0,15);

     cxs.lineTo(0,-140);

     cxs.closePath();

     cxs.stroke();

     cxs.restore();

     //秒针

     cxs.save();

     cxs.translate(250,250);

     cxs.lineWidth=4;

     cxs.strokeStyle="red";

     cxs.rotate(sec*6*Math.PI/180);

     cxs.beginPath();

     cxs.moveTo(0,20);

     cxs.lineTo(0,-170);

     cxs.closePath();

     cxs.stroke();

     cxs.beginPath();

     cxs.arc(0,0,5,0,360,false);

     cxs.closePath();

     cxs.fillStyle="grey";

     cxs.fill();

     cxs.stroke();

     cxs.beginPath();

     cxs.arc(0,-150,5,0,360,false);

     cxs.closePath();

     cxs.fillStyle="grey";

     cxs.fill();

     cxs.stroke();

     cxs.restore();
}

  setInterval(date,1000);

</script>

</head>

<body onload="date()">

  <canvas width="500" height="500" id="canvas">您的浏览器版本较低，请升级后再使用！！</canvas>

</body>

</html>

用html5中的canvas写的时钟,布布扣,bubuko.com

时间： 2024-08-02 02:50:56

用html5中的canvas写的时钟的相关文章

HTML5中的canvas基本概念及绘图

* Canvas(画布) * 基本内容 * 简单来说,HTML5提供的新元素<canvas> * Canvas在HTML页面提供画布的功能 * 在画布中绘制各种图形 * Canvas绘制的图形与HTML页面无关 * 无法通过DOM获取绘制的图形 * 无法为绘制的图形绑定DOM事件 * 只能使用Canvas提供的API * Canvas用途 * 在HTML页面中绘制图表(例如柱状图.饼状图等) * 网页游戏 - Flash技术 * 使用HTML5中的Canvas * 如何使用Canvas * 在

HTML5中的<canvas>画布:使用canvas元素在网页上绘制四分之一圆(3)

前几天自己做了个四分之一的圆,放到手机里面测试.效果不是很好.于是今天通过查资料,找到了canvas.自己研究了一天,发现可以使用canvas画圆.代码如下: 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 7 </head> 8 <body&g

第七讲：HTML5中的canvas两个小球全然弹性碰撞

<html> <head> <title>小球之间的碰撞(全然弹性碰撞)</title> <script src="../js/jscex.jscexRequire.min.js" type="text/javascript"></script> </head> <body> <canvas id="mc" width="1200px&

HTML5中的<canvas>画布:简单介绍(0)

<canvas> 标签是 HTML 5 中的新标签,像所有的dom对象一样它有自己本身的属性.方法和事件, 其中就有绘图的方法,js能够调用它来进行绘图 ,最近在研读<html5与css3权威指南>下面对其中最好玩的canvas的学习做下读书笔记与实验.温馨提示:以下所有实验请使用最新版的opera,火狐. 定义: <canvas> 标签定义图形,比如图表和其他图像. <canvas> 标签只是图形容器,您必须使用脚本(javascript)来绘制图形.

HTML5中的<canvas>画布:使用canvas元素在网页上绘制线条和圆(1)

什么是 Canvas? HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形.字符以及添加图像的方法. 创建 Canvas 元素向 HTML5 页面添加 canvas 元素. 规定元素的 id.宽度和高度: 1 <canvas id="myCanvas" width="200" height="100"></ca

HTML5 中的 canvas 画布

---恢复内容开始--- 在HTML5中新添加的元素,canvas 现在支持 IE9+的版本注意:HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成. <canvas> 标签只是图形容器,您必须使用脚本来绘制图形. 在使用canvas之前应该给用户说明必须是ie9+的版本,否则不支持. 绘制简单的直线 1.先获取画布 var canvas = document.getElementById('canvas'); 2.配置绘制的环境 v

HTML5中的 Canvas

什么是Canvas? Canvas元素是HTML5的一部分,允许脚本语言动态渲染位图像.Canvas由一个可绘制地区HTML代码中的属性定义决定高度和宽度.JavaScript代码可以访问该地区,通过一套完整的绘图功能类似于其他通用二维的API,从而生成动态的图形. 我们可以用Canvas做以下: 1. 游戏:毫无疑问,游戏在HTML5领域具有举足轻重的地位.HTML5在基于Web的图像显示方面比Flash更加立体.更加精巧,运用Canvas制作的图像能够令HTML5游戏在流畅度和跨平台方面发挥

关于HTML5中的canvas标签的个个人理解

HTML5 canvas这个玩意用通俗的话来讲就是一块用来画画的布,不过这不是普通的布,这是个类似于神笔马良的那个神笔一样神奇的东西,可以画出很多精湛美妙的东西.本文就展示两个基于canvas的炫酷效果,可以让我们对canvas的潜力有个比较直观的认识. 个人感觉在canvas有很好的发展的空间,可以预计如果国家的网速如果无压力的跟上的话,不可质疑的说这将是HTML的天下..因为在canvas中,他的想象无限思想有多远那么他的发展空间就有多远,当然前提是技术要过硬,当然是我的一个臆想,不过不可否

HTML5中的Canvas

1.Canvas标签的宽高一定要设置在标签上或者采用js添加属性,如果用css去设置的话,会把画布被拉伸,相当于将默认的画布拉伸到指定位置.默认为300px*100px; <canvas width=500 height=400></canvas> 或者 canvas=document.getElementsByTagName('canvas')[0]; canvas.width=500; canvas.height=400; 这样就能够解决Canvas中的问题 2.Canvas绘