当前位置:首页 > 编程教程 > javascript技术文章 > JavaScript Canvas绘制圆形时钟效果

JavaScript Canvas绘制圆形时钟效果代码实例

  • 发布时间:
  • 作者:码农之家
  • 点击:160

这篇文章主要知识点是关于js、Canvas、圆形时钟、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

JavaScript函数式编程指南
  • 类型:js函数大小:12.79 MB格式:PDF作者:路易斯·阿泰西奥
立即下载

JavaScript Canvas绘制圆形时钟效果

本文实例为大家分享了Canvas时钟效果展示的具体代码,供大家参考,具体内容如下

<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <title></title> 
 <style> 
  canvas{ 
   display: block; 
   margin: 0 auto; 
   background-color: #fdffad; 
   border: 1px solid #000; 
  } 
 </style> 
 <script type="text/javascript"> 
 
  document.addEventListener('DOMContentLoaded',function(){ 
   var oC=document.querySelector('canvas'); 
   var gd=oC.getContext('2d'); 
   var r=oC.width/2; 
 
   function drawBackground() { 
    gd.save(); 
    //渐变 
 
    var ra = gd.createLinearGradient(600, 0, 400, 0); 
    ra.addColorStop(1, '#2dd9ff'); 
    ra.addColorStop(0, '#8c48dd'); 
 
    //表盘 
    gd.translate(r, r); 
    gd.beginPath(); 
    gd.fillStyle = ra; 
    gd.lineWidth = 10; 
    gd.strokeStyle = '#211f4e'; 
    gd.arc(0, 0, r-5, 0, Math.PI *2, false); 
    gd.fill(); 
    gd.stroke(); 
    //数字 
    for (var i = 1; i < 13; i++) { 
     var rad=i * Math.PI * 2 / 12; 
     var x = Math.sin(rad)*(r-70); 
     var y= -Math.cos(rad)*(r-70); 
     gd.fillStyle = "red"; 
     gd.font = "bold 80px Calibri"; 
     gd.lineWidth = 1; 
     gd.textAlign = 'center'; 
     gd.textBaseline = 'middle'; 
     gd.strokeText(i, x, y); 
    } 
    //点 
    for (var i = 0; i < 60; i++) { 
     gd.beginPath(); 
     var rad=i * Math.PI * 2 / 60; 
     var x = Math.sin(rad)*(r-30); 
     var y= -Math.cos(rad)*(r-30); 
     if (i % 5 == 0) { 
      gd.fillStyle = 'red'; 
     } 
     else { 
      gd.fillStyle = '#ccc' 
     } 
     gd.lineWidth = 2; 
     gd.arc(x, y, 6, 0, Math.PI * 2, false); 
     gd.fill(); 
     gd.stroke(); 
     gd.closePath(); 
    } 
   } 
   //时针 
   function drawHour(h,m){ 
    gd.save(); 
    gd.beginPath(); 
    var rad=2*Math.PI/12*h; 
    var mrad=2*Math.PI/12/60*m; 
    gd.rotate(rad+mrad); 
    gd.lineWidth=20; 
    gd.lineCap='round'; 
    gd.moveTo(0,10); 
    gd.lineTo(0,-r/3); 
    gd.stroke(); 
    gd.closePath(); 
    gd.restore(); 
   } 
   //分针 
   function drawMinutes(m){ 
    gd.save(); 
    gd.beginPath(); 
    var rad=2*Math.PI/60*m; 
    gd.rotate(rad); 
    gd.lineWidth=10; 
    gd.lineCap='round'; 
    gd.moveTo(0,10); 
    gd.lineTo(0,-r/2); 
    gd.stroke(); 
    gd.closePath(); 
    gd.restore(); 
   } 
   //秒针 
   function drawSeconds(s){ 
    gd.save(); 
    gd.beginPath(); 
    var rad=2*Math.PI/60*s; 
    gd.rotate(rad); 
    gd.fillStyle='red'; 
    gd.moveTo(-2,20); 
    gd.lineTo(2,20); 
    gd.lineTo(1,-r+100); 
    gd.lineTo(-1,-r+100); 
    gd.fill(); 
    gd.closePath(); 
    gd.restore(); 
   } 
   //圆点 
   function drawPoint(){ 
    gd.beginPath(); 
    gd.fillStyle='#fff'; 
    gd.arc(0,0,5,Math.PI*2,false); 
    gd.fill(); 
   } 
 
   function drawClock(){ 
    gd.clearRect(0,0,oC.width,oC.height); 
    var oDate=new Date(); 
    var h=oDate.getHours(); 
    var m=oDate.getMinutes(); 
    var s=oDate.getSeconds(); 
    drawBackground(); 
    drawHour(h,m); 
    drawMinutes(m); 
    drawSeconds(s); 
    drawPoint(); 
    gd.restore(); 
 
   } 
   drawClock(); 
   setInterval(drawClock,1000); 
  },false); 
 </script> 
</head> 
<body> 
<canvas width="800" height="800"></canvas> 
</body> 
</html>

效果图:

JavaScript Canvas绘制圆形时钟效果

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

javascript 相关电子书
学习笔记
网友NO.694204

js+canvas实现滑动拼图验证码功能

上图为网易云盾的滑动拼图验证码,其应该有一个专门的图片库,裁剪的位置是固定的。我的想法是,随机生成图片,随机生成位置,再用canvas裁剪出滑块和背景图。下面介绍具体步骤。 首先随便找一张图片渲染到canvas上,这里#canvas作为画布,#block作为裁剪出来的小滑块。 canvas width="310" height="155" id="canvas"/canvascanvas width="310" height="155" id="block"/canvasvar canvas = document.getElementById('canvas') var block = document.getElementById('block') var canvas_ctx = canvas.getContext('2d') var block_ctx = block.getContext('2d') var img = document.createElement('img') img.onload = function() { canvas_ctx.drawImage(img, 0, 0, 310, 155) block_ctx.drawImage(img, 0, 0, 310, 155) }; img.src = 'img.jpg' 下面考虑如何裁剪出拼图的形状,拼图形状比较复杂,首先我们画一个正方形,接着上边的代码写: var x = 150, y = 40, w = 42, r = 10, PI = Math.PI function dr……

网友NO.767749

jquery插件canvaspercent.js实现百分比圆饼效果

在仪表盘的任务增多同时,列表页的百分比圆环或圆饼也随之增多,于是顺手在仪表盘的基础上,封装了一个小小的jquery插件(jq-canvaspercent.js),暂且版本1.0吧,到以后业务的变化在对其进行功能拓展; 暂时性用于页面中有多处百分比圆环的效果处理,还是不错的。 jq-canvaspercent.js代码比较简单,以下直接给出插件代码和几张截图: /* * canvaspercent 0.1 * Copyright:HeavyShell * Date: 2016-06-27 * 利用canvas绘图实现百分比percent圆饼图 */ (function($){ $.fn.drawCanvasPercent = function(options){ //各种属性、参数 var defaults = { type:1, //类型默认1,有[1,2,3] dw:'rem', //判断是单位是rem还是px cir_r:1, //圆饼的直径 cir_color:'#0e9cfa', //圆饼的占比颜色 cir_color_op:'#e0ebf4', //圆饼的占比颜色 line_w:0.16, //圆饼的线条宽度 fill_color:"#fff" //圆饼的中间区域填充颜色 } var options = $.extend(defaults, options); t……

网友NO.898423

JS+HTML5 canvas绘制验证码示例

本文实例讲述了JS+HTML5 canvas绘制验证码。分享给大家供大家参考,具体如下: css样式: stylebody{ text-align: center;}canvas{ background:#ddd;}/style HTML部分: body中添加标签canvas: canvas id="c3"/canvas js部分: //创建两个变量保存验证码的宽度和高度 var w = 120; var h = 30;//将变量值赋值给canvas c3.width = w; c3.height = h;//获取画笔 var ctx = c3.getContext("2d");//创建两个函数,返回指定范围内的随机数,随机颜色//随机数 function rn(min,max){ var n = Math.random()*(max-min)+min; return Math.floor(n); }//随机颜色 function rc(min,max){ var r = rn(min,max); var g = rn(min,max); var b = rn(min,max); return `rgb(${r},${g},${b})`;}//填充的背景 ctx.fillStyle=rc(180,230); ctx.fillRect(0,0,w,h);//创建一个随机的文字[字母和数字]4个 var pool = "ABCDEFGHIJKabced胡歌0123456789哈哼哈哈"; var str =""; for(var i = 0;i4;i++){ var index = Math.floor(Math.random()*pool.length); str ……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

版权投诉 / 书籍推广 / 赞助:520161757@qq.com