给pugjs的stun主题添加canvas时钟

2020年08月07日 10

tech_and_skill

先导

首先隔了这么久才继续进行更新的原因是网站备案和毕业设计，加上刚入职没有时间去进行内容更新，以后会继续更新了

在pugjs中添加一些好用的东西这个系列会长期的添加更新，因为这些都是会用在博客当中的，而且这些操作都比较简单，都是在主题的相应文件位置添加相应代码即可。

内容介绍

这次添加的内容是在右边栏那里加上一个时钟，用来给阅读的人直观地看到时间，时钟的代码是直接从网上拷贝下来的，并且自己做了修改，地址是这里,打开这个链接就能看到一个时钟，此时检查页面元素定位到时钟所在的div标签，其中有一个canvas标签，将其复制下来，并且找到下面与之最近的script标签查看到时钟的逻辑代码，也将其复制下来进行修改后就差不多可以使用了。

首先声明，代码是直接复制的，复制也没有删除，主要是为了学习用途，如果造成侵权或者修改了不应修改的地方，还请拿出版权证据证明后修改或者删除您的代码，自行复制后造成的一切问题与我无关

脚本代码

原脚本

复制下来的脚本内容大致如下，内容有点多请别介意，方便复制

<canvas id="clock" width="400" height="400"></canvas>
<script type="text/javascript">
var time = new Date();
var h = time.getHours(); //时
var m = time.getMinutes(); //分
var s = time.getSeconds(); //秒
h=h>12?(h-12)*5+parseInt(m/12):h*5+parseInt(m/12); //时针 初始位置
//=====================================
var x=200,y=200,sAngle=0; //x y 原点 秒针角度变量
 
function draw(){
    var c=document.getElementById("clock");
    var ctx=c.getContext("2d"); //获取绘图对象
    ctx.clearRect(0,0,c.width,c.height); //清除上次绘制的图形
    s++;//秒针
 
    ctx.fillStyle = '#fff' //填充白色背景色 
    ctx.fillRect(0,0,c.width,c.height);   //设置画布区域
 
	//填充圆点，在画布中心（200,200）绘制一个半径10px的圆形
	ctx.beginPath();
	ctx.arc(x,y,10,0,Math.PI*2,true);
	ctx.fill();
	ctx.closePath();
 		
	//填充版权文字
	ctx.fillStyle="#ccc";
	ctx.font = "12pt Arial"; 
	ctx.fillText("Helloweba.com",150,250);
	//调用日期并填充到画布中
	ctx.fillStyle="#666";
	ctx.font = "14pt Verdana";
	ctx.fillText(time.getMonth()+1+"-"+time.getDate(),183,170);
		
	ctx.save(); //保存当前绘图状态
 
    // 时间刻度
    for(var i=0;i<12;i++){
        var angle=(Math.PI*2)/12;
        ctx.beginPath();//开始绘制
		ctx.font="12px Arial";
        if(i==0||i==3||i==6||i==9){
             ctx.fillStyle="red";
             radius=4;
        }else{
             ctx.fillStyle="blue";
             radius=3;
        }
 
        ctx.arc(x,y-100,radius,0,Math.PI*2,true); //画圆
        ctx.fill(); //填充路径
        trans(ctx,x,y,angle);  //刻度分布              
    }
    ctx.restore(); //恢复上次保存的绘图状态
 
    sAngle=(Math.PI*2)/60*s; //秒度
	//时针转动
    ctx.save(); 
    ctx.strokeStyle="red";
    ctx.lineWidth=3;
    trans(ctx,x,y,(Math.PI*2)/60*h); 
    pointer(ctx,x,y,y-40);
    ctx.restore();
 	
	//分针转动
	ctx.save();
	ctx.strokeStyle="blue";
	ctx.lineWidth=2;
	trans(ctx,x,y,(Math.PI*2)/60*m); 
	pointer(ctx,x,y,y-68);
	ctx.restore();
 
	//秒针转动
	ctx.save();
	ctx.strokeStyle="#000";
	trans(ctx,x,y,sAngle);  
	pointer(ctx,x,y,y-80);
	ctx.restore();  
 
    //数据整理
    if(s%60==0){
		sAngle=0,s=0,m++;
        if(m%12==0){ //每十二分 时针旋转一次
            if(m!=0)h++;
            if(m%60==0)m=0;
        }
     	if(h%60==0)h=0; 
    }
}
 
//绘制指针
function pointer(ctx,x,y,z){
     ctx.beginPath();
     ctx.moveTo(x,y);
     ctx.lineTo(x,z);
     ctx.stroke();
     ctx.fill();
}
 
 //据坐标旋转
function trans(ctx,x,y,angle){
     ctx.transform(Math.cos(angle), Math.sin(angle), 
        -Math.sin(angle), Math.cos(angle), 
        x*(1-Math.cos(angle)) + x*Math.sin(angle), 
      	y*(1-Math.cos(angle)) - y*Math.sin(angle))
}
 
setInterval("draw()",1000);
</script>

修改后的脚本

下面是修改后用之前的网站进行转换成pugjs的脚本，懒一点的就直接复制下面代码吧

br
div(style='position: relative;top: 0px;left: 0px;')
  canvas#clock(width='250', height='250')
script.
  var time = new Date();
  var h = time.getHours(); //时
  var m = time.getMinutes(); //分
  var s = time.getSeconds(); //秒
  h = h > 12 ? (h - 12) * 5 + parseInt(m / 12) : h * 5 + parseInt(m / 12); //时针 初始位置
  //=====================================
  var cc = document.getElementById("clock");
  var x = cc.width/2.0, y = cc.height/2.0, sAngle = 0; //x y 原点 秒针角度变量
  function draw() {
  var c = document.getElementById("clock");
  var ctx = c.getContext("2d"); //获取绘图对象
  ctx.clearRect(0, 0, c.width, c.height); //清除上次绘制的图形
  s++;//秒针
  ctx.fillStyle = '#fff' //填充白色背景色
  ctx.fillRect(0, 0, c.width, c.height);   //设置画布区域
  //填充圆点，在画布中心（200,200）绘制一个半径10px的圆形
  ctx.beginPath();
  ctx.arc(x, y, 10, 0, Math.PI * 2, true);
  ctx.fill();
  ctx.closePath();
  //填充版权文字
  ctx.fillStyle = "#ccc";
  ctx.font = "12pt Arial";
  // ctx.fillText("impressionyang.top", 10, c.height-10);
  //调用日期并填充到画布中
  ctx.fillStyle = "#666";
  ctx.font = "14pt Verdana";
  ctx.fillText(time.getMonth() + 1 + "-" + time.getDate(), c.width/2, c.height/2);
  ctx.save(); //保存当前绘图状态
  // 时间刻度
  for (var i = 0; i < 12; i++) {
  var angle = (Math.PI * 2) / 12;
  ctx.beginPath();//开始绘制
  ctx.font = "12px Arial";
  if (i == 0 || i == 3 || i == 6 || i == 9) {
  ctx.fillStyle = "red";
  radius = 4;
  } else {
  ctx.fillStyle = "blue";
  radius = 3;
  }
  ctx.arc(x, y - 100, radius, 0, Math.PI * 2, true); //画圆
  ctx.fill(); //填充路径
  trans(ctx, x, y, angle);  //刻度分布
  }
  ctx.restore(); //恢复上次保存的绘图状态
  sAngle = (Math.PI * 2) / 60 * s; //秒度
  //时针转动
  ctx.save();
  ctx.strokeStyle = "red";
  ctx.lineWidth = 3;
  trans(ctx, x, y, (Math.PI * 2) / 60 * h);
  pointer(ctx, x, y, y - 40);
  ctx.restore();
  //分针转动
  ctx.save();
  ctx.strokeStyle = "blue";
  ctx.lineWidth = 2;
  trans(ctx, x, y, (Math.PI * 2) / 60 * m);
  pointer(ctx, x, y, y - 68);
  ctx.restore();
  //秒针转动
  ctx.save();
  ctx.strokeStyle = "#000";
  trans(ctx, x, y, sAngle);
  pointer(ctx, x, y, y - 80);
  ctx.restore();
  //数据整理
  if (s % 60 == 0) {
  sAngle = 0, s = 0, m++;
  if (m % 12 == 0) { //每十二分 时针旋转一次
  if (m != 0) h++;
  if (m % 60 == 0) m = 0;
  }
  if (h % 60 == 0) h = 0;
  }
  }
  //绘制指针
  function pointer(ctx, x, y, z) {
  ctx.beginPath();
  ctx.moveTo(x, y);
  ctx.lineTo(x, z);
  ctx.stroke();
  ctx.fill();
  }
  //据坐标旋转
  function trans(ctx, x, y, angle) {
  ctx.transform(Math.cos(angle), Math.sin(angle),
  -Math.sin(angle), Math.cos(angle),
  x * (1 - Math.cos(angle)) + x * Math.sin(angle),
  y * (1 - Math.cos(angle)) - y * Math.sin(angle))
  }
  setInterval("draw()", 1000);

至此就能够添加这个时钟到网站里面了，是不是感觉很简单呢。

后记

虽然觉得直接拉取被人的东西有点不太厚道，但是我可是最强缝合怪啊，想拿来凑一凑再说哈哈哈。

impressionyang

标签