canvas教程

HTML5 CANVAS 奇异的时钟

字号+ 作者:H5之家 来源:H5之家 2016-10-01 11:01 我要评论( )

一、HTML代码 : !doctype html html head meta charset=utf-8 link href=style/style.css rel=stylesheet type=text/css title/title /head body div class=header/div div class=textClick to Remove Color/div script src=js/jquery.js type=text/javascr

一、HTML代码
<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <link href="style/style.css" rel="stylesheet" type="text/css">
  <title></title>
 </head>
 <body>
  <div class="header"></div>
  <div class="text">Click to Remove Color</div>
  <script src="js/jquery.js" type="text/javascript"></script>
       <script src="js/js.js" type="text/javascript"></script>
 </body>
</html>

二、CSS代码:
html, body { width: 100%; height: 100%; padding: 0px; margin: 0px; background-color: #1c1c1c; overflow: hidden; } .header { width: 100%; height: 100%; position: relative; } .header canvas { left: 50%; top: 50%; position: absolute; } .text { border-radius: 4px; position: absolute; font-family: sans-serif; color: #BBB; bottom: 40px; left: calc(50% - 100px); cursor: pointer; pointer-events: none; width: 200px; font-size: 13px; text-align: center; line-height: 40px; background-color: rgba(255, 255, 255, 0.05); }
三、JS代码:

请下载。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 去自学吧,自学编程

    去自学吧,自学编程

    2016-09-29 16:00

  • 中国最大的HTML5学习平台

    中国最大的HTML5学习平台

    2016-09-26 16:00

  • Android Canvas中rotate()和translate()方法详解

    Android Canvas中rotate()和translate()方法详解

    2016-09-26 15:00

  • 建站前端技术:最佳HTML5绘图工具

    建站前端技术:最佳HTML5绘图工具

    2016-09-26 15:00

网友点评