һ
 ע

QQ¼

ֻһٿʼ

ƼĶ

+
̳ WEBҳǰ뿪 ǰ̨ű

Ưıƽcanvasʱ Ч

[]
14982 happy175 2016-8-26 09:36:54
| ʾȫ¥
1F
Ưıƽcanvasʱ

Чͼ


  1. <!DOCTYPE html>
  2. <html lang="en">

  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6. </head>

  7. <body>
  8.     <canvas id="canvas" style="margin: 20px auto 0;display: block"></canvas>
  9. </body>
  10. <script>
  11. var canvas = document.getElementById("canvas");
  12. canvas.width = 800;
  13. canvas.height = 800;
  14. var img = new Image();
  15. var cxt = canvas.getContext("2d");
  16. window.onload = function() {
  17.     clock()
  18.     setInterval(function(argument) {
  19.         clock()

  20.     }, 1000)
  21. }

  22. function clock() {
  23.     //ȡǰʱ
  24.     var d = new Date();
  25.     var h, m, s;
  26.     h = d.getHours();
  27.     h = h > 12 ? h - 12 : h;
  28.     m = d.getMinutes();
  29.     s = d.getSeconds();

  30.     //Ʊ
  31.     img.src = "httPS://wuchujiang.github.io/pages/image/wood.jpg";
  32.     cxt.clearRect(0, 0, canvas.width, canvas.height);
  33.     img.onload = function() {
  34.         cxt.drawImage(img, 0, 0);
  35.         //ɫ
  36.         var gra2 = cxt.createLinearGradient(200, 0, 600, 0);
  37.         gra2.addColorStop(0, "#3fccde");
  38.         gra2.addColorStop(0.5, "#3fccde");
  39.         gra2.addColorStop(0.5, "#a2d658");
  40.         gra2.addColorStop(1, "#a2d658");
  41.         cxt.beginPath();
  42.         cxt.arc(400, 400, 180, 0, 2 * Math.PI);
  43.         cxt.closePath();
  44.         cxt.fillStyle = gra2;
  45.         cxt.fill();

  46.         //Ʊ
  47.         cxt.save();
  48.         var gra = cxt.createLinearGradient(0, 0, 0, 600);
  49.         gra.addColorStop(0, "#f7f9f7")
  50.         gra.addColorStop(1, "#e0ecde");
  51.         cxt.beginPath();
  52.         cxt.arc(400, 400, 200, 0, 2 * Math.PI, true);
  53.         cxt.arc(400, 400, 180, 0, 2 * Math.PI, false);
  54.         cxt.fillStyle = gra;
  55.         cxt.shadowOffsetX = 0;
  56.         cxt.shadowOffsetY = 10;
  57.         cxt.shadowBlur = 30;
  58.         cxt.shadowColor = "rgba(0,0,0,0.3)";
  59.         cxt.fill()
  60.         cxt.restore();

  61.         //ƿ̶
  62.         for (var i = 1; i <= 60; i++) {
  63.             cxt.save();
  64.             cxt.translate(400, 400);
  65.             cxt.beginPath();
  66.             cxt.rotate((i * (360 / 60)) / 180 * Math.PI);
  67.             var y = i % 5 ? -150 : -147
  68.             var sty = i % 5 ? "rgba(255,255,255,0.6)" : "#fff";
  69.             cxt.moveTo(0, y);
  70.             cxt.lineTo(0, -160);
  71.             cxt.closePath();
  72.             cxt.strokeStyle = sty;
  73.             cxt.lineWidth = 2;
  74.             cxt.stroke();
  75.             cxt.restore();
  76.         }

  77.         //ʱ̶
  78.         for (var i = 1; i <= 12; i++) {
  79.             cxt.save();
  80.             cxt.translate(400, 400);
  81.   &nbs