LV2之-----canvas 画布实现自转时钟大转盘

canvas 画布运用实例：1.系统时钟

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>canvas {/* border: 1px solid #000;background-color: #ff8c8c; */display: block;margin: 0 auto;}</style>
</head><body><canvas width="600" height="600" id="mycanvas">你的浏览器不支持 canvas 请更换浏览器</canvas><script>// ------------------------相关知识点------------------------//弧度：arc(中心点x，中心点y，r，起始角度，结束角，false/ture)     注意！！-----false/ture ：默认为false 顺时针方向，ture 逆时针，即为另一半线条// context.arc(100,100,50,0,180*Math.PI/180)//  画出一个弧， 默认从3点钟方向顺时针画// context.arc(100,100,50,0,360*Math.PI/180)//  弧， // context.arc(100,100,50,0,90*Math.PI/180,true) // context.stroke()       // 旋转偏移：// context.rotate(6*Math.PI/180)// context.beginPath()// context.moveto(0,0)// context.lineto(0,100)// cintext.stroke()// ------------------------- 用canvas画一个时钟 ------------------------var context = document.getElementById('mycanvas').getContext('2d'); //获取上下文function drawClock() {// --------------第五步：得到系统当前的 秒，分，时，分别赋给下面的 秒针，分针，秒针.-----------var d = new Date()seconds = d.getSeconds()minutes = d.getMinutes()hour = d.getHours()context.clearRect(0, 0, 600, 600) //清除画布// -------------------- 第 0 步：画 外部修饰物   ----------------// 1.1：画表盘外面的圆：// 外框圆 1：context.beginPath()context.arc(300, 300, 210, 0, 360 * Math.PI / 180)context.stroke();// 给圆填充颜色的代码如下 ：// context.fillStyle = 'pink';// context.fill();// context.closePath()    //!!--存在问题：若设置了填充色，整个表盘背景变色，刻度对应的数字会消失？估计是变得与背景色相融---!!!// 外框圆 2：context.beginPath()context.arc(300, 300, 200, 0, 360 * Math.PI / 180)context.stroke()context.closePath()// ---------------第一步： 画表盘（要画60个空隙，用for循环来实现）& 刻度-------------var num = 12; // 在外部定义一个表盘内部的数字num// 1.2用for循环 画刻度：for (var i = 0; i < 60; i++) {context.save()context.translate(300, 300)context.rotate(i * 6 * Math.PI / 180)context.beginPath()// 1.3:画一个分钟刻度线if (i % 5 == 0) {context.lineWidth = '2'; //加粗分刻度线context.moveTo(0, -160);// 1.4:设置表盘内部的数字 context.font ="20px Arial"; //设置字体的大小，第二个参数不能少 ，！！注意 .font 居然要写在.filltext（）上方才起效！！                   context.fillText(num, -5, -140);num++if (num == 13) {num = 1}} else {//1.5:画一个秒钟刻度线context.lineWidth = '1'context.moveTo(0, -180)}context.lineTo(0, -200) //设置整个表盘的大小context.stroke()context.restore()}// ---------------第二步：画出 秒针--------------------------------context.save()context.translate(300, 300)context.rotate(seconds * 6 * Math.PI / 180)context.beginPath()context.moveTo(0, 20)context.lineTo(0, -130) //设置秒针的长度context.lineWidth = '2' //设置秒针的宽度context.strokeStyle = 'yellow' //设置秒针的颜色  context.stroke()context.restore()// ------------- 第三步：画出 分针 ------------------------------context.save()context.translate(300, 300)context.rotate(minutes * 6 * Math.PI / 180)context.beginPath()context.moveTo(0, 20)context.lineTo(0, -110) //设置秒针的长度context.strokeStyle = 'red'context.lineWidth = '5'context.stroke()context.restore()// ------------- 第四步：画出 时针 ------------------------------context.save()context.translate(300, 300)context.rotate(hour * 30 * Math.PI / 180)context.beginPath()context.moveTo(0, 20)context.lineTo(0, -80)context.strokeStyle = 'black'context.lineWidth = '8'context.stroke()context.restore()}//   ----------------END: 调用执行函数-----------------------------drawClock()setInterval(drawClock, 100)// ----------------- 抖动效果：1   -------------// var time= new Date()// var nowminutes=time.getMinutes();// var afterminutes=time.getMinutes()+1// console.log(afterminutes)// if( nowminutes==afterminutes){//   console.log("a")// }//  --------------- 抖动效果：2  ----------------function warning (){var time = new Date()var nowseconds = time.getSeconds()// console.log(nowseconds)if (nowseconds > 10) {          if (nowseconds%2==0) {context.translate(0, 10)console.log("a")} else {context.translate(0, -10)}}}setInterval(warning,30)</script>
</body></html>

canvas 画布运用实例：2.转盘?

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>canvas实现抽奖转盘</title><style>p {text-align: center;}canvas {border: 1px solid #000;/* background-color: #ff8080; */display: block;margin: 0 auto;}</style>
</head><body><p>点击按钮抽奖</p><canvas id="mycanvas" width="500" height="500"></canvas><script> var context = document.getElementById('mycanvas').getContext('2d'); //获取上下文// 1.2 生成随机颜色的函数// function getRoundColor(){// 关于 生成 min~max的随机整数的公式：parseInt(Math.random()*(max-min))-min//                                  Math.round(Math.random()*(max-min))-min//     var x = parseInt(Math.random()*255);//     var y = parseInt(Math.random()*255);//     var z = parseInt(Math.random()*255);//     // 字符串模板: 字符串用反引号``包裹， 中间加入变量用${变量名}//     return `rgb(${x},${y},${z})`//    }var colors = ["red","blue","black","orange","pink","yellow","white","green"]// // ---------------第一步：用for循环 画出8个扇形-----------------：
function circle(){for (var i = 0; i < 8; i++) {context.beginPath()context.save();context.translate(250, 250); //移动映射的画布，将圆的原点context.rotate(i * 45 * Math.PI / 180);//bgin 1.1：画扇形的关键三步,由原点（0，0）出发连接到弧的起点 ，再从弧的终点连接回原点（0，0）  context.moveTo(0, 0);context.arc(0, 0, 250, 0, 45 * Math.PI / 180); //弧度设为45度        context.lineTo(0, 0);// end//1.2：添加随机颜色：// context.fillStyle=getRoundColor();//设置颜色， fillStyle与fill()要配套使用 !context.fillStyle=colors[i];context.fill();// 填充颜色， fillStyle与fill()要配套使用 !context.restore();context.closePath();}
}// 让 转盘动起来， 原理利用 translate 在两个位置之间来回 移动画布的位置，每次转动1度，再移回原位置， function draw(){context.translate(250,250);context.rotate(1*Math.PI/180);//移动1度context.translate(-250,-250);circle();}// 最后用定时器让转盘连续的动起来setInterval(draw,10);</script></body></html>

LV2之-----canvas 画布实现自转时钟大转盘相关推荐

s时钟画布 android,Canvas画布实现自定义时钟效果
标题 *{margin:0; padding:0; list-style:none;} .box{ width: 420px; height: 420px; margin: 50px auto 0; ...
three - 3 - 基础知识（1. three渲染结构，2.对canvas 进行响应式布局，3.让canvas 画布自适应设备分辨率）
本章节分为3点: 理解three.js 的渲染结构对canvas 进行响应式布局让canvas 画布自适应设备分辨率 canvas 画布的css尺寸和像素尺寸 1.three.js 的渲染结构接 ...
用canvas画布画时钟
canvas canvas简介 HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像. 画布是一个矩形区域,您可以控制其每一像素. canvas 拥有多种绘制路径.矩形.圆形 ...
html：canvas画布绘图简单入门-绘制时钟-3
canvas示例系列: html:canvas画布绘图简单入门-1 html:canvas画布绘图简单入门-2 html:canvas画布绘图简单入门-绘制时钟-3 html:canvas画布绘图简单 ...
canvas绘制精细走动时钟
这里简单了利用canvas做了一个时钟,能够实现分针和时针较精确的走动,没有太多难点,重点的是要实现分针和时针走动,角度的计算,笔者在下面进行说明.先看效果图: 颜色单配的比较难看,读者谅解.请看代码 ...
canvas简单实现动态时钟
使用到的知识: 1. 获取系统时间 2. 画图形,空心图形,实心图形,以及一些属性 3. for循环准备工作:添加一块画布1000*1000(随意),引用canvas.js ...
更新——Canvas画布动画效果之实现倒计时
Hello,大家好! 小W复活啦!继续欢乐的给大家更博,输送新知识~~ 不开玩笑啦!秒进正题~~~ 上次更博,小W给大家介绍了Canvas画布的基础部分,以及实现了一个由7*10点阵图显示的倒计时的基 ...
基于canvas的原生JS时钟效果
概述运用html5新增画布canvas技术,绘制时钟效果,无需引用任何插件,纯js. 详细代码下载:http://www.demodashi.com/demo/11935.html 给大家介绍一个 ...
android canvas 清空画布,清除canvas画布内容(点擦除+线擦除)
清空canvas画布内容 1.重置宽或高由于canvas每当高度或宽度被重设时,画布内容就会被清空,因此可以用以下方法清空:(此方法仅限需要清除全部内容的情况) var c=document.get ...

LV2之-----canvas 画布实现自转时钟大转盘

canvas 画布运用实例：1.系统时钟

canvas 画布运用实例：2.转盘?

LV2之-----canvas 画布实现自转时钟大转盘相关推荐

最新文章

热门文章

LV2之-----canvas 画布实现 自转时钟 大转盘

canvas 画布运用实例：1.系统时钟

canvas 画布运用实例：2.转盘?

LV2之-----canvas 画布实现 自转时钟 大转盘相关推荐

最新文章

热门文章

LV2之-----canvas 画布实现自转时钟大转盘

LV2之-----canvas 画布实现自转时钟大转盘相关推荐