JavaScript Canvas绘制圆形时钟效果代码实例
- 发布时间：
- 作者：码农之家
- 点击：160
这篇文章主要知识点是关于js、Canvas、圆形时钟、的内容，如果大家想对相关知识点有系统深入的学习，可以参阅以下电子书
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>
效果图：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农之家。
以上就是本次给大家分享的关于java的全部知识点内容总结，大家还可以在下方相关文章里找到相关文章进一步学习，感谢大家的阅读和支持。
javascript 相关电子书
学习笔记
<
1
>
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……
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……
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 ……