>

搜狐自定义之微博文告栏加多机械钟,布告栏加

- 编辑:www.bifa688.com -

搜狐自定义之微博文告栏加多机械钟,布告栏加

前言

  近年来径直在上学前端知识,格外谢谢慕课网的教师SilvaZhou以及w3school的科目让自家十分的快的上学到一门技术,前些天学到了什么样行使canvas来画出八个挂钟,雕虫小技,大神勿喷。

  对于canvas,w叁shcool上是那般描述的:

    HTML伍 <canvas> 标签用于绘制图像(通过脚本,平常是 JavaScript)。

    但是,<canvas> 成分本人并不曾绘制本领(它然而是图表的器皿) - 您必须利用脚本来完毕实际的绘图职务。

    getContext() 方法可回到1个指标,该目的提供了用来在画布上制图的不贰诀窍和属性。

前言

      近期在念书HTML5标签,学到Canvas,认为很有意思。便在慕课网找了个demo练手。正是Canvas时钟。

      对于canvas,w三shcool上是如此描述的:

    HTML5<canvas> 标签用于绘制图像(通过脚本,常常是 JavaScript)。

    不过,<canvas> 成分本身并未绘制工夫(它只有是图片的容器) - 您必须选取脚本来实现实际的绘图义务。

    getContext() 方法可回到3个对象,该对象提供了用于在画布上绘制的形式和性质。

 

示例

  本文示举例文告栏,

  近年来网络有很多体裁的canvas机械钟的dome,如下:图片 1

  代码英特网也是一大堆,大家能够自动百度寻觅。

示例

图片 2

 

 

动态可看公告栏状态

正文

正文

一.代码有的

  上边是小编在慕课网学到的并稍加调解的代码

  html代码

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>clock</title>
    <style type="text/css">
        div{
            text-align: center;
            margin-top: 250px;
        }
    </style>
</head>
<body>
    <div>
        <canvas id="clock" width ="200px" height="200px"style="border:1px solid #c3c3c3;">您的浏览器不兼容canvas</canvas>
    </div>

    <script type="text/javascript" src="canvas.js"></script>
</body>
</html>

 

 

 js代码

var dom = document.getElementById('clock');
var ctx = dom.getContext('2d');
var width = ctx.canvas.width;
var height = ctx.canvas.height;
var r = width / 2;
//定义钟盘
function drawBackground(){
    ctx.save();
    ctx.translate(r, r);
    ctx.beginPath();
    ctx.lineWidth = 10;
    ctx.font ='18px Arial';
    ctx.textAlign = 'center'
    ctx.textBaseline = 'middle'
    ctx.arc(0, 0, r-5, 0, 2 * Math.PI, false);
    ctx.stroke();
    var hourNumbers = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
    //遍历获取坐标
    hourNumbers.forEach(function(number, i){
        var rad = 2 * Math.PI / 12 * i;
        var x = Math.cos(rad) * (r - 30);
        var y = Math.sin(rad) * (r - 30);
        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);
        var y = Math.sin(rad) * (r - 18);
        ctx.beginPath();
        if(i % 5 == 0){
            ctx.arc(x, y, 2, 0, 2 * Math.PI, false);
            ctx.fillStyle = '#000';
        }else{
            ctx.arc(x, y, 2, 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;
    ctx.lineCap= 'round';
    ctx.moveTo(0 ,10);
    ctx.lineTo(0 ,-r / 2);
    ctx.stroke();
    ctx.restore();
}
//定义分钟
function drawMinute(minute,second){
    ctx.save();
    ctx.beginPath();
    var rad = 2 * Math.PI / 60 * minute;
    var srad = 2 * Math.PI / 60 /60 * second;
    ctx.rotate(rad   srad);
    ctx.lineWidth = 3;
    ctx.lineCap= 'round';
    ctx.moveTo(0 ,10);
    ctx.lineTo(0 ,-r   18);
    ctx.stroke();
    ctx.restore();
}
//定义秒钟
function drawSecond(second){
    ctx.save();
    ctx.beginPath();
    var rad = 2 * Math.PI / 60 * second;
    ctx.rotate(rad);
    ctx.lineWidth = 3;
    ctx.lineCap= 'round';
    ctx.moveTo(-2 ,20);
    ctx.lineTo( 2, 20);
    ctx.lineTo( 1, -r   18);
    ctx.lineTo( -1, -r   18);
    ctx.fillStyle = '#c14543';
    ctx.fill();
    ctx.restore();
}
//定义钟盘圆点样式
function drawDot(){
    ctx.beginPath();
    ctx.fillStyle = '#fff';
    ctx.arc(0, 0, 3, 0, 2 * Math.PI, false);
    ctx.fill();
}

//时间函数
function draw(){
    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,second);
    drawSecond(second);
    drawDot();
    ctx.restore();
}
setInterval(draw, 1000);

注意事项:1.<canvas>标签最棒不要采取CSS来定义长度大小。

     贰.js中等高校函授数顺序无法乱,不然会被拔除而从未成效。

     3.代码里中度大幅度均为具体px值,画布大小会潜移默化机械钟雅观(化解方案:设置三个比例变量,其值为width/200,将高度大幅用变量值来顶替)。

1.代码有个别

html代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Time</title>

<style type="text/css">
    #clockdiv{
        text-align: center;
    }
</style>

</head>
<body>
<div id="clockdiv">

    <canvas id="dom" width="200" height="200">您的浏览器不兼容canvas</canvas>

<script type="text/javascript" src="Clock.js"></script>
</body>
</html>

js代码

var canvas = document.getElementById('dom');
var context = canvas.getContext('2d');
var height = context.canvas.height;
var width = context.canvas.width;
var r = width / 2;
var rem = width/200;

//时钟背景
function drawBackground() {
    context.save();
    context.translate(r, r);
    context.beginPath();
    context.lineWidth = 8*rem;
    context.strokeStyle = "#000"
    context.arc(0, 0, r - 5*rem, 0, 2 * Math.PI, false);
    context.stroke();
    context.closePath();
//遍历小时数
    var houseNumble = [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 1, 2];
    houseNumble.forEach(function (number, i) {
        context.textAlign = 'center';
        context.textBaseline = 'middle'
        context.font = 18*rem 'px Arial'
        var rad = 2 * Math.PI / 12 * i;
        var x = Math.cos(rad) * (r - 30*rem);
        var y = Math.sin(rad) * (r - 30*rem);
        context.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);
        context.beginPath();
        if (i % 5 == 0) {
            context.fillStyle = "#000"
            context.arc(x, y, 2*rem, 0, 2 * Math.PI);
        } else {
            context.fillStyle = "#ccc"
            context.arc(x, y, 2*rem, 0, 2 * Math.PI);
        }

        context.fill();
        context.closePath();
    }
}
//定义时针
function drawHour(hour,minute) {
    context.save();
    context.beginPath();
    context.lineWidth = 6*rem;
    context.lineCap = 'round'
    var rad = 2 * Math.PI / 12 * hour;
    var mrad = 2* Math.PI/12/60 * minute;
    context.rotate(rad mrad);
    context.moveTo(0, 10*rem);
    context.lineTo(0, -r / 2);
    context.stroke();
    context.restore();
}
//定义分针
function drawMinute(minute) {
    context.save();
    context.beginPath();
    context.lineWidth = 3*rem;
    context.lineCap = 'round';
    var rad = 2 * Math.PI / 60 * minute;
    context.rotate(rad);
    context.moveTo(0, 15*rem);
    context.lineTo(0, -r   34)
    context.stroke();
    context.restore();
}
//定义秒钟
function drawSecond(second) {
    context.save();
    context.beginPath();
    context.lineWidth = 2*rem;
    context.lineCap = 'round';
    context.fillStyle = "red"
    var rad = 2 * Math.PI / 60 * second;
    context.rotate(rad);
    context.moveTo(-2 ,20);
    context.lineTo( 2, 20);
    context.lineTo( 1, -r   18);
    context.lineTo( -1, -r   18);
    context.fill();
    context.restore();
}
//画中心点
function drawDot() {
    context.beginPath();
    context.fillStyle = "#fff"
    context.arc(0, 0, 4*rem, 0, 2 * Math.PI, false);
    context.fill();
}

//时间函数,让时钟根据当前时间跳动
function Draw() {
    context.clearRect(0,0,width,height);
    var time= new Date();
    var hour =time.getHours();
    var minute = time.getMinutes();
    var second = time.getSeconds();
    drawBackground();
    drawHour(hour,minute);
    drawMinute(minute);
    drawSecond(second);
    drawDot();
    context.restore()

}

Draw();
//刷新时钟
setInterval(Draw,1000);

注意事项:壹.有相当的大可能率浏览器不具体意义,原因1:浏览器不匹配,会显示你的浏览器不包容canvas。原因二:代码出错。

          2.<canvas>标签最棒不用采用CSS来定义长度大小。

     三.js中函数顺序不能够乱,不然会被排除而并未有成效。

     四.代码里中度大幅均为现实px值,画布大小会潜移默化机械钟雅观(消除方案:设置3个百分比变量,其值为 rem=width/200 ,将中度大幅用变量值 rem 来取代)。

2.给博客园通知栏增添样式

  这一步相当的简单,

  一.公告栏先须要报名JS权限。

  贰.将团结的JS文件上传出博客的文本里,获得地方,以下是作者文件里的地方。(大家可以直接行使)

    http://www.qjdongsheng.com/uploads/allimg/190506/15354VV9-2.jpg

  三.将上面代码贴入博客侧边栏通知。

<div class="clockdiv"><canvas id="clock" width ="200px" height="200px">您的浏览器不兼容canvas</canvas><div>
<script type="text/javascript" src="http://www.qjdongsheng.com/uploads/allimg/190506/15354VV9-2.jpg"></script>

  4.将上面代码贴入页面定制CSS代码。(加个DIV是为了使机械钟在差别博客样式中的通知栏中居中显示)

.clockdiv{
    text-align: center;
}

  伍.自定义你的体制,使其有着天性化

2.给今日头条布告栏增添机械钟样式

      1.通知栏先必要提请JS权限。(点击管理—设置—申请JS权限)

  ②.将谐和的JS文件上传播博客的文件(点击处理—文件)里,得到地点,以下是本身文件里的地点。(我们可以直接运用)

   http://files.cnblogs.com/files/abao0/Clock.js

  三.将上边代码贴入博客侧边栏通知。

<div id="clockdiv">
    <canvas id="dom" width="200" height="200">您的浏览器不兼容canvas</canvas>
</div>
<script type="text/javascript" src="Clock.js"></script>

  四.将上边代码贴入页面定制CSS代码。(加个DIV是为了使石英钟在不一样博客样式中的文告栏中居中显得)

 #clockdiv {
            text-align: center;
        }

 

 

  五.自定义你的样式,显示区别风格。

后话

 

  希望大家塑造出贰个投机喜爱的享有个性的博客

 

后记

      动手做完四个demo会让协调更有收获,赶紧动起手来吗。

本文由必发88官网发布,转载请注明来源:搜狐自定义之微博文告栏加多机械钟,布告栏加