Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                canvas#myCanvas
.info
  h1 Boss, CODING Please.
  .time +00:00:00
              
            
!

CSS

              
                html,body
  //填滿視窗
  width: 100%
  height: 100%
  padding: 0
  margin: 0
  overflow: hidden
  font-family: Abel
  
canvas
  transform: scaleY(-1)
  
.info
  position: absolute
  left: 50px
  bottom: 50px
  
h1,.time
  color: white
  letter-spacing: 3px
  margin: 0

              
            
!

JS

              
                //取得畫布
var c = document.getElementById("myCanvas");
//取得繪圖區域
var ctx = c.getContext("2d"); 
//取得螢幕尺寸,設定畫布跟變數
var ww=c.width=$(window).outerWidth();
var wh=c.height=$(window).outerHeight();
//設定中心點
var center={x: ww/2,y: wh/2};
//因為上下顛倒的關係,scaleY給-1

function getWindowSize(){
  //設定大小
  ww=c.width=$(window).outerWidth();
  wh=c.height=$(window).outerHeight();
  
  //重新設定中心點
  center={x: ww/2,y: wh/2};
  
  //將畫布的零點偏移到中心
  ctx.restore();
  ctx.translate(center.x,center.y);
}

//設定當網頁尺寸變動的時候要重新抓跟設定大小、中心
$(window).resize(getWindowSize);
getWindowSize();

//整個程式的時間,用來做些動態
var time=0;

//設定十毫秒一次
setInterval(draw,10);

function draw(){

  //清除背景
  ctx.fillStyle = "#111";
  ctx.beginPath();
  //起點/長/寬
  ctx.rect(-2000,-2000,4000,4000);
  ctx.fill();
  
  //坐標軸
  ctx.strokeStyle="rgba(255,255,255,0.1)";
  ctx.lineWidth=1;
  //x
  ctx.moveTo(-ww/2,0);
  ctx.lineTo(ww/2,0);
  //y
  ctx.moveTo(0,-wh/2);
  ctx.lineTo(0,wh/2);
  ctx.stroke();

  //------------------------------
  //繪製變動弧線
  //設定半徑
  var r=200;
  //將角度轉換為弧度
  var deg_to_pi=Math.PI/180;
  
  //重新開始繪製
  ctx.beginPath();
  ctx.lineWidth=1;
  for(var i=0;i<=200;i++){
    //設定變動的半徑跟角度
    // var var_r = r;
    var var_r = r + Math.sin(Math.PI*2*i/10+time/20)*2;
    var deg = (i/200)*360 * deg_to_pi;
    //連線
    ctx.lineTo(
      var_r * Math.cos(deg),
      var_r * Math.sin(deg)
    );
  }
  //設定顏色跟繪製
  ctx.strokeStyle="#FFF";
  ctx.stroke();
  
  
  //-----------------------------
  //繪製刻度(內圈)
  
  var r = 220;
  var count = 240;

  ctx.lineWidth=1;
  for(var i=0;i<=count;i++){
    
    //最基本的角度分佈
    var deg = 360*(i/count)*deg_to_pi;
    
    //往內偏移的量
    var pan=(i % 60 == 0 ? -4 : 0);
    
    //長度(用於數設定特定大小)
    var len= 4 + (i % 10 == 0?4:0) + (i % 60 == 0?8:0);
    var opacity=(len>4)?1:0.7;
    
    //開始分結束的半徑
    var start_r = r+pan;
    var end_r = r+pan+len;
    
    //重新開始繪製
    ctx.beginPath();
    ctx.moveTo(
      (start_r) * Math.cos(deg),
      (start_r) * Math.sin(deg)
    );
    ctx.lineTo(
      (end_r) * Math.cos(deg),
      (end_r) * Math.sin(deg)
    );
    
    //設定繪製顏色跟透明度
    ctx.strokeStyle="rgba(255,255,255,"+opacity+")";
    //繪製
    ctx.stroke();
  
  }

  //------------------------------
  //繪製刻度(外圈)
  
  var r = 400;
  var count = 80;

  ctx.lineWidth=1;
  for(var i=0;i<=count;i++){
    //往內偏移的量
    var pan=(i % 60 == 0?-4:0);
    //長度(用於數設定特定大小)
    var len= 4 + (i % 20 == 0?4:0) + (i % 60 == 0?8:0);
    var opacity=(len>4)?1:0.7;
    var deg=360*(i/count)*deg_to_pi;
    
    var start_r=r+pan;
    var end_r=r+pan+len;
    
    //重新開始繪製
    ctx.beginPath();
    ctx.moveTo(
      (start_r)*Math.cos(deg),
      (start_r)*Math.sin(deg)
    );
    ctx.lineTo(
      (end_r)*Math.cos(deg),
      (end_r)*Math.sin(deg)
    );
    
    //設定繪製顏色跟透明度
    ctx.strokeStyle="rgba(255,255,255,"+opacity+")";
    //繪製
    ctx.stroke();
  
  }
  
  //-----抓取現在的時間
  var now=new Date();
  var sec=now.getSeconds();
  var min=now.getMinutes();
  var hour=now.getHours();
  
  //更新文字中的時間
  $(".time").text("+00:"+hour+":"+min+":"+sec);
  
  
  //畫指針的函數
  function drawPointer(r,deg,lineWidth){
    
    //清空
    ctx.beginPath();
    ctx.lineWidth=lineWidth;
    
    //轉換角度(因為從右邊開始)
    var sec_deg = deg + 90;
    
    //從中心出發
    ctx.moveTo(0,0);
    
    //畫線
    ctx.lineTo(
      r*0.8*Math.cos( sec_deg * deg_to_pi ),
      r*0.8*Math.sin( sec_deg * deg_to_pi )
    );
    
    //繪製
    ctx.stroke();
  }
  
  //角度- 刻度/總數    
  //小時會有分鐘偏誤
  drawPointer(400, -360 * ( (sec) / 60 ) , 1 );
  drawPointer(210, -360 * ( (min) / 60 ) , 1 );
  drawPointer(150, -360 * ( (hour + min / 60 ) / 12.0 ) , 4 );
   
  
  //繪製外框
  var r=300;
  var count=240;
  ctx.beginPath();
  ctx.lineWidth=4;
  for(var i=0;i<=count;i++){
    //將240個點平均分布在圓周上,加上一點點時間
    deg= 360 * ( i / count) + time / 200;
    //如果每180度以內餘數 > 90度
    if ( ( deg % 180 ) > 90 ){
      //如果成立就預設要畫
      ctx.lineTo(
        r * Math.cos( deg * deg_to_pi),
        r * Math.sin( deg * deg_to_pi)
      );
    }else{
      //不成立就只移動點,不繪製
      ctx.moveTo(
        r * Math.cos( deg * deg_to_pi),
        r * Math.sin( deg * deg_to_pi)
      );
    }
  }
  
  //設定樣式跟繪製
  ctx.strokeStyle="#FFF";
  //將剛剛預設要畫的都畫出來
  ctx.stroke();
  
  //更新繪製的時間
  time=time+1;
}
              
            
!
999px

Console