canvasshiyw1120时钟shiyw11

​x
 
<title>canvasshiyw1120时钟</title>
<div>
 <canvas id="clock" height="200px" width="200px"></canvas>
 </div>
<style>
  div {
  text-align: center;
}
#clock {
  border: 1px solid #cccccc;
}
</style>
<script>
var dom = document.getElementById('clock');
var ctx = dom.getContext('2d');
var width = ctx.canvas.width;
var height = ctx.canvas.height;
var r = width / 2;
var rem = width/200;
function drawBackground() {
    ctx.save(); //存储当前环境变量；
    ctx.translate(r, r); //重置坐标到r，r
    ctx.beginPath(); // 起始一条路径
    ctx.lineWidth = 10*rem; //设置线宽10；
    ctx.arc(0, 0, r - ctx.lineWidth /2, 0, 2 * Math.PI, false);
    ctx.stroke();
    var hourNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2]; //定义数组
    ctx.font = 18*rem+"px Arial";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
       hourNumbers.forEach(function(number, i) {
        var rad = 2 * Math.PI / 12 * i;
        var x = Math.cos(rad) * (r - 30*rem);
        var y = Math.sin(rad) * (r - 30*rem);
        ctx.fillText(number, x, y);
    });
    for (var i = 0; i < 60; i++) {
        var rad = 2 * Math.PI / 60 * i;
        var x = Math.cos(rad) * (r - 18*rem);
        var y = Math.sin(rad) * (r - 18*rem);
        ctx.beginPath();
        if (i % 5 === 0) {
            ctx.arc(x, y, 2*rem, 0, 2 * Math.PI, false);
            ctx.fillStyle = "#000";
        } else {
            ctx.arc(x, y, 2*rem, 0, 2 * Math.PI, false);
            ctx.fillStyle = "#ccc";
        }
        ctx.fill();
    }
}
function drawHour(hour, minute) {
  ctx.save();
  ctx.beginPath();
  var rad = 2 * Math.PI / 12 * hour;
  var mrad = 2 * Math.PI / 12 / 60 * minute;
  ctx.rotate(rad + mrad);
  ctx.lineWidth = 6*rem;
  ctx.lineCap = "round";
  ctx.moveTo(0, 10*rem);
  ctx.lineTo(0, -r / 2);
  ctx.stroke();
  ctx.restore();
}
function drawMinute(minute) {
  ctx.save();
  ctx.beginPath();
  var rad = 2 * Math.PI / 60 * minute;
  ctx.rotate(rad);
  ctx.lineWidth = 3*rem;
  ctx.lineCap = "round";
  ctx.moveTo(0, 10*rem);
  ctx.lineTo(0, -r + 30*rem);
  ctx.stroke();
  ctx.restore();
}
function drawSecond(second) {
  ctx.save();
  ctx.beginPath();
  ctx.fillStyle = 'red';
  var rad = 2 * Math.PI / 60 * second;
  ctx.rotate(rad);
  ctx.moveTo(-2*rem, 20*rem);
  ctx.lineTo(2*rem, 20*rem);
  ctx.lineTo(1, -r + 16*rem);
  ctx.lineTo(-1, -r + 16*rem);
  ctx.fill();
  ctx.restore();
}
function drawDot() {
  ctx.beginPath();
  ctx.fillStyle = '#fff';
  ctx.arc(0, 0, 3*rem, 0, 2 * Math.PI, false);
  ctx.fill();
}
function draw01() {
  ctx.clearRect(0, 0, width, height);
  var now = new Date();
  var hour = now.getHours();
  var minute = now.getMinutes();
  var second = now.getSeconds();
  drawBackground();
  drawHour(hour, minute);
  drawMinute(minute);
  drawSecond(second);
  drawDot();
  ctx.restore();
}
draw01();
setInterval(draw01, 1000);
</script>
​
​
​
​
​
​
​
​
​
​
​
​
​
​
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
  <style>
  *{
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.wrapper{
  width: 90%;
  margin: 0 auto;
  max-width: 80rem;
}
 
.cols{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
 
.col{
  width: calc(25% - 2rem);
  margin: 1rem;
  cursor: pointer;
}
 
.container{
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-perspective: 1000px;
          perspective: 1000px;
}
 
.front,
.back{
  background-size: cover;
  background-position: center;
  -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  text-align: center;
  min-height: 70px;
  height: auto;
  border-radius: 10px;
  color: #fff;
  font-size: 1.5rem;
}
 
.back{
  background: #cedce7;
  background: -webkit-linear-gradient(45deg,  #cedce7 0%,#596a72 100%);
  background: -o-linear-gradient(45deg,  #cedce7 0%,#596a72 100%);
  background: linear-gradient(45deg,  #cedce7 0%,#596a72 100%);
}
 
.front:after{
  position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    content: '';
    display: block;
    opacity: .6;
    background-color: #000;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    border-radius: 10px;
}
.container:hover .front,
.container:hover .back{
    -webkit-transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    -o-transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
    transition: transform .7s cubic-bezier(0.4, 0.2, 0.2, 1), -webkit-transform .7s cubic-bezier(0.4, 0.2, 0.2, 1);
}
 
.back{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
 
.inner{
    -webkit-transform: translateY(-50%) translateZ(60px) scale(0.94);
            transform: translateY(-50%) translateZ(60px) scale(0.94);
    top: 50%;
    position: absolute;
    left: 0;
    width: 100%;
    padding: 2rem;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    outline: 1px solid transparent;
    -webkit-perspective: inherit;
            perspective: inherit;
    z-index: 2;
}
 
.container .back{
    -webkit-transform: rotateY(180deg);
            transform: rotateY(180deg);
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}
 
.container .front{
    -webkit-transform: rotateY(0deg);
            transform: rotateY(0deg);
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}
 
.container:hover .back{
  -webkit-transform: rotateY(0deg);
          transform: rotateY(0deg);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
 
.container:hover .front{
  -webkit-transform: rotateY(-180deg);
          transform: rotateY(-180deg);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
 
.front .inner p{
  font-size: 2rem;
  margin-bottom: 2rem;
  position: relative;
}
 
.front .inner p:after{
  content: '';
  width: 4rem;
  height: 2px;
  position: absolute;
  background: #C6D4DF;
  display: block;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: -.75rem;
}
 
.front .inner span{
  color: rgba(255,255,255,0.7);
  font-family: 'Montserrat';
  font-weight: 300;
}
 
@media screen and (max-width: 64rem){
  .col{
    width: calc(33.333333% - 2rem);
  }
}
 
@media screen and (max-width: 48rem){
  .col{
    width: calc(50% - 2rem);
  }
}
 
@media screen and (max-width: 32rem){
  .col{
    width: 100%;
    margin: 0 0 2rem 0;
  }
}
  </style>
</head>
<body>
<div class="wrapper">
  <div class="cols">
    <div class="col" ontouchstart="this.classList.toggle('hover');">
      <div class="container">
        <div class="front" style="background-image: url(img/1.jpg)">
          <div class="inner">
            <p>焦点新闻</p>
                  <span></span>
          </div>
        </div>
        <div class="back">
          <div class="inner">
            <p>焦点新闻</p>
          </div>
        </div>
      </div>
    </div>
    ......
  </div>
</div>
</body>
</html>
​
​
​
​
​
​
​
<canvas id="canvas" width="500" height="500" style="background:#000;"></canvas>
​
<script>
​
window.onload = function(){
  var canvas = document.getElementById('canvas'),  //获取canvas元素
      context = canvas.getContext('2d'),  //获取画图环境，指明为2d
      centerX = canvas.width/2,   //Canvas中心点x轴坐标
      centerY = canvas.height/2,  //Canvas中心点y轴坐标
      rad = Math.PI*2/100, //将360度分成100份，那么每一份就是rad度
      speed = 0.1; //加载的快慢就靠它了 
​
  //绘制5像素宽的运动外圈
  function blueCircle(n){
    context.save();
    context.strokeStyle = "#fff"; //设置描边样式
    context.lineWidth = 5; //设置线宽
    context.beginPath(); //路径开始
    context.arc(centerX, centerY, 100 , -Math.PI/2, -Math.PI/2 +n*rad, false); //用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)
    context.stroke(); //绘制
    context.closePath(); //路径结束
    context.restore();
  }
  //绘制白色外圈
  function whiteCircle(){
    context.save();
    context.beginPath();
    context.lineWidth = 2; //设置线宽
    context.strokeStyle = "red";
    context.arc(centerX, centerY, 100 , 0, Math.PI*2, false);
    context.stroke();
    context.closePath();
    context.restore();
  }  
  //百分比文字绘制
  function text(n){
    context.save(); //save和restore可以保证样式属性只运用于该段canvas元素
    context.strokeStyle = "#fff"; //设置描边样式
    context.font = "40px Arial"; //设置字体大小和字体
    //绘制字体，并且指定位置
    context.strokeText(n.toFixed(0)+"%", centerX-25, centerY+10);
    context.stroke(); //执行绘制
    context.restore();
  } 
  //动画循环
  (function drawFrame(){
    window.requestAnimationFrame(drawFrame);
    context.clearRect(0, 0, canvas.width, canvas.height);
    whiteCircle();
    text(speed);
    blueCircle(speed);
    if(speed > 100) speed = 0;
    speed += 0.1;
  }());
}
​
</script>
​
​
​
​
​
​
​
​
​
​
<script>
/*Only needed for the controls*/
var phone = document.getElementById("phone_1"),
  iframe = document.getElementById("frame_1");
​
/*View*/
function updateView(view) {
  if (view) {
    phone.className = "phone view_" + view;
  }
}
​
/*Controls*/
function updateIframe() {
  iframe.src = document.getElementById("iframeURL").value;
​
  phone.style.width = document.getElementById("iframeWidth").value + "px";
  phone.style.height = document.getElementById("iframeHeight").value + "px";
​
  /*Idea by /u/aerosole*/
  document.getElementById("wrapper").style.perspective = (
    document.getElementById("iframePerspective").checked ? "1000px" : "none"
  );
}
updateIframe();
​
/*Events*/
document.getElementById("controls").addEventListener("change", function() {
  updateIframe();
});
​
document.getElementById("views").addEventListener("click", function(evt) {
  updateView(evt.target.value);
});
​
</script>
​
​
<style>
​
body {
    font-family: 'Open Sans', sans-serif;
    background-color: #FFFAF6;
  }
  /*Basic Phone styling*/
  
  .phone {
    border: 40px solid #ddd;
    border-width: 55px 7px;
    border-radius: 40px;
    margin: 50px auto;
    overflow: hidden;
    transition: all 0.5s ease;
  }
  
  .phone iframe {
    border: 0;
    width: 100%;
    height: 100%;
  }
  /*Different Perspectives*/
  
  .phone.view_1 {
    transform: rotateX(50deg) rotateY(0deg) rotateZ(-50deg);
    box-shadow: -3px 3px 0 #BBB, -6px 6px 0 #BBB, -9px 9px 0 #BBB, -12px 12px 0 #BBB, -14px 10px 20px #666;
  }
  
  .phone.view_2 {
    transform: rotateX(0deg) rotateY(-60deg) rotateZ(0deg);
    box-shadow: 5px 1px 0 #BBB, 9px 2px 0 #BBB, 12px 3px 0 #BBB, 15px 4px 0 #BBB, 0 7px 20px #999;
  }
  
  .phone.view_3 {
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    box-shadow: 0px 3px 0 #BBB, 0px 4px 0 #BBB, 0px 5px 0 #BBB, 0px 7px 0 #BBB, 0px 10px 20px #666;
  }
  /*Controls*/
  
  #controls {
    position: absolute;
    top: 20px;
    left: 20px;
    font-size: 0.9em;
    color: #333;
  }
  
  #controls div {
    margin: 10px;
  }
  
  #controls div label {
    width: 120px;
    display: block;
    float: left;
  }
  
  #views {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 200px;
  }
  
  #views button {
    width: 198px;
    border: 1px solid #bbb;
    background-color: #fff;
    height: 40px;
    margin: 10px 0;
    color: #666;
    transition: all 0.2s;
  }
  
  #views button:hover {
    color: #444;
    background-color: #eee;
  }
  
  @media (max-width:900px) {
    #wrapper {
      transform: scale(0.8, 0.8);
    }
  }
  
  @media (max-width:700px) {
    #wrapper {
      transform: scale(0.6, 0.6);
    }
  }
  
  @media (max-width:500px) {
    #wrapper {
      transform: scale(0.4, 0.4);
    }
  }
​
</style>
​
​
<!--The Main Thing-->
<div id="wrapper">
  <div class="phone view_1" id="phone_1">
    <iframe src="http://www.runcodex.com" id="frame_1"></iframe>
  </div>
</div>
​
<!--Controls etc.-->
<div id="controls">
  <div>
    <label for="iframeURL">URL:</label>
    <input type="text" id="iframeURL" placeholder="https://m.runcodex.com" value="https://m.runcodex.com" />
  </div>
  <div>
    <label for="iframeWidth">Width:</label>
    <input type="number" id="iframeWidth" placeholder="400" value="400" />
  </div>
  <div>
    <label for="iframeHeight">Height:</label>
    <input type="number" id="iframeHeight" placeholder="650" value="650" />
  </div>
  <!--Idea by /u/aerosole-->
  <div>
    <label for="iframePerspective">Add perspective:</label>
    <input type="checkbox" id="iframePerspective" checked="true" />
  </div>
</div>
<div id="views">
  <button value="1">View 1 - Laying</button>
  <button value="2">View 2 - Side</button>
  <button value="3">View 3 - Front</button>
</div>
HTML