前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >给pugjs的stun主题添加canvas时钟

给pugjs的stun主题添加canvas时钟

作者头像
impressionyang
发布2020-08-27 16:00:03
1K0
发布2020-08-27 16:00:03
举报
文章被收录于专栏:impressionyang的个人分享

先导

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

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

内容介绍

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

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

脚本代码

原脚本

  • 复制下来的脚本内容大致如下,内容有点多请别介意,方便复制
代码语言:javascript
复制
<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的圆形
truectx.beginPath();
	ctx.arc(x,y,10,0,Math.PI*2,true);
truectx.fill();
truectx.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);
truetrue
	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();
 	
	//分针转动
truectx.save();
	ctx.strokeStyle="blue";
truectx.lineWidth=2;
	trans(ctx,x,y,(Math.PI*2)/60*m); 
truepointer(ctx,x,y,y-68);
truectx.restore();
 
	//秒针转动
truectx.save();
	ctx.strokeStyle="#000";
truetrans(ctx,x,y,sAngle);  
truepointer(ctx,x,y,y-80);
truectx.restore();  
 
    //数据整理
    if(s%60==0){
truetruesAngle=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的脚本,懒一点的就直接复制下面代码吧

代码语言:javascript
复制
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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-08-07,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 先导
  • 内容介绍
  • 脚本代码
    • 原脚本
      • 修改后的脚本
      • 后记
      相关产品与服务
      ICP备案
      在中华人民共和国境内从事互联网信息服务的网站或APP主办者,应当依法履行备案手续。腾讯云为您提供高效便捷的 ICP 备案服务。
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档