芝麻信用的这个HTML5 中间的圆弧和刻度怎么实现

html-css022

芝麻信用的这个HTML5 中间的圆弧和刻度怎么实现,第1张

<!DOCTYPE>

<html lang="zh-CN">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />

<title>表盘</title>

</head>

<style type="text/css">

html,body,div,canvas,a{margin: 0pxpadding: 0px}

html,body{width: 100%height: 100%}

body{background: rgba(128,255,0,128)}

#container{width: 40%height: 100%margin:0px autooverflow: hidden}

#clockBoard{width: 550height: 760margin: 0px automargin-top:10%margin-bottom:0pxbackground:linear-gradient(#0e83f5,#20bcf5)}

#pointer{position: relativetop:-560px}

#value{position: relativez-index: 10top: -500left: 210border-radius: 5pxline-height: 20px}

#run{position: relativez-index: 10top: -450left: 105padding: 5pxborder-radius: 5pxbackground: #40ccf5border: 1px solid #40bce5width: 70pxheight: 30pxline-height: 20pxcolor:#ffffont:20px bold}

</style>

<body>

<div id="container">

<div id="clockBoard">

<canvas id="clock" width="550px" height="560px"></canvas>

<canvas id="pointer" width="550px" height="560px"></canvas>

<input type="text" id="value" placeholder="你想得到的值" maxlength="4" min='300'>

<button id="run">Run</button>

</div>

</div>

<script type="text/javascript">

window.onload=function(){

var canvas=document.getElementById('clock')

var ctx=canvas.getContext('2d')

// 绘制外环

ctx.beginPath()

ctx.arc(275,330,180,30/180*Math.PI,150/180*Math.PI,true)

ctx.strokeStyle='#8dc9f8'

ctx.lineWidth='3'

ctx.stroke()

ctx.closePath()

// 绘制内环

ctx.beginPath()

ctx.arc(275,330,150,30/180*Math.PI,150/180*Math.PI,true)

ctx.strokeStyle='#5db3f5'

ctx.lineWidth='12'

ctx.stroke()

ctx.closePath()

ctx.translate(275,330)

// 绘制刻度

var total=[350,'较差',550,'中等',600,'良好',650,'优秀',700,'极好',950]

for(var i=0i<17i++){

if(i%6===3){

ctx.beginPath()

ctx.lineWidth='2'

ctx.strokeStyle='#8dc9f8'

ctx.moveTo(144*Math.sin(7.5*i/180*Math.PI),-144*Math.cos(7.5*i/180*Math.PI))

ctx.lineTo(156*Math.sin(7.5*i/180*Math.PI),-156*Math.cos(7.5*i/180*Math.PI))

ctx.moveTo(-144*Math.sin(7.5*i/180*Math.PI),-144*Math.cos(7.5*i/180*Math.PI))

ctx.lineTo(-156*Math.sin(7.5*i/180*Math.PI),-156*Math.cos(7.5*i/180*Math.PI))

ctx.stroke()

ctx.closePath()

}else{

ctx.beginPath()

ctx.lineWidth='1'

ctx.strokeStyle='#8dc9f8'

ctx.moveTo(150*Math.sin(7.5*i/180*Math.PI),-150*Math.cos(7.5*i/180*Math.PI))

ctx.lineTo(156*Math.sin(7.5*i/180*Math.PI),-156*Math.cos(7.5*i/180*Math.PI))

ctx.moveTo(-150*Math.sin(7.5*i/180*Math.PI),-150*Math.cos(7.5*i/180*Math.PI))

ctx.lineTo(-156*Math.sin(7.5*i/180*Math.PI),-156*Math.cos(7.5*i/180*Math.PI))

ctx.stroke()

ctx.closePath()

}

}

// 绘制文本

ctx.font=''

ctx.fillStyle='#8dc9f8'

ctx.textAlign='center'

ctx.textBaseline='bottom'

ctx.rotate((-7.5*15)/180*Math.PI)

for(var i=0i<11i++){

ctx.fillStyle=i%2? '#8dc9f8':'#cce8fc'

ctx.fillText(total[i],0,-124)

ctx.rotate((7.5*3)/180*Math.PI)

}

ctx.rotate(-7.5*18/180*Math.PI)

ctx.fillStyle='#8dc9f8'

ctx.font='20px normal'

ctx.fillText('BETA',0,-60)

ctx.font='14px normal'

// 获取当前日期

var date=new Date()

var ymd=date.getFullYear()+'.'+(date.getMonth()+1)+'.'+date.getDate()

ctx.fillText('评估时间 : '+ymd,0,95)

ctx.font='45px bold'

// 绘制动画需要重置幕布，所以重建一个canvas对象

var pointer=document.getElementById('pointer')

var ctxPoint=pointer.getContext('2d')

function run(inputValue){

var timer

var i=0

ctxPoint.translate(275,330)

ctxPoint.fillStyle ='#fff'

ctxPoint.strokeStyle='#fff'

// 设置最终的值

var finalValue=inputValue

var value=0

// 根据值的大小确定应该到达的位置

if(finalValue<550){

value=(finalValue-316.7)*0.225

}else if(finalValue<700){

value=(finalValue-550)*0.9+52.5

}else{

value=finalValue>1000?1000:finalValue

value=(value-700)*0.18+187.5

}

var evluate=''

if(inputValue<550){

evluate='较差'

}else if(inputValue<600){

evluate='中等'

}else if(inputValue<650){

evluate='良好'

}else if(inputValue<700){

evluate='优秀'

}else{

evluate='极好'

}

ctxPoint.font='95px bold'

ctxPoint.textAlign='center'

ctxPoint.shadowColor='#fff'

// 所有的动画事件

function slideValue(){

ctxPoint.translate(-275,-330)

ctxPoint.clearRect(0,0,pointer.width,pointer.height)

ctxPoint.translate(275,330)

i++

// 绘制滚动元素

ctxPoint.beginPath()

ctxPoint.shadowBlur=30

ctxPoint.arc(-180*Math.sin((i+60)/180*Math.PI),180*Math.cos((i+60)/180*Math.PI),5,0,2*Math.PI,true)

ctxPoint.fillStyle='#8dc9f8'

ctxPoint.fill()

ctxPoint.arc(-180*Math.sin((i+60)/180*Math.PI),180*Math.cos((i+60)/180*Math.PI),3,0,2*Math.PI,true)

ctxPoint.fillStyle='#fff'

ctxPoint.fill()

// 填充分数和评分

ctxPoint.font='95px bold'

var text=0

if(i<52.5){

text=i/0.225+316.7

}else if(i<187.5){

text=(i-52.5)/0.9+550

}else{

text=(i-187.5)/0.18+700

text=text>1000?1000:text

}

text=text>inputValue?inputValue:text

ctxPoint.shadowBlur=0

ctxPoint.fillText(parseInt(text,10),0,35)

ctxPoint.stroke()

ctxPoint.font='35px bold'

ctxPoint.stroke()

ctxPoint.closePath()

// 如果到达所需要的弧度，则停止，否则继续跳动

if(i>value){

setTimeout(function(){

ctxPoint.fillText('信用'+evluate,0,70)

},200)

clearTimeout(timer)

}else{

timer=setTimeout(slideValue,text/finalValue*15)

}

}

slideValue()

}

// 打开页面时默认的跳动数字

run(850)

// 重新绘制的函数

var runBtn=document.getElementById('run')

var valueInput=document.getElementById('value')

function reRun(){

// 判断输入的内容是否合乎预期

if(isNaN(parseInt(valueInput.value),10)){

return 0

}

ctxPoint.translate(-275,-330)

run(parseInt(valueInput.value,10))

}

// 按钮事件，当点击时重新绘制

runBtn.onclick=reRun

// 键盘事件，当输入数字回车后重新绘制

window.document.onkeydown = function(e){

var e=e||window.event

if(e.keyCode===13){

reRun()

}

}

}

</script>

</body>

</html>

代码：

var clock=document.getElementById("clock")

var cxt=clock.getContext("2d")

function drawNow(){

var now=new Date()

var hour=now.getHours()

var min=now.getMinutes()

var sec=now.getSeconds()

hour=hour>12?hour-12:hour

hour=hour+min/60

//表盘(蓝色)

cxt.lineWidth=10

cxt.strokeStyle="blue"

cxt.beginPath()

cxt.arc(250,250,200,0,360,false)

cxt.closePath()

cxt.stroke()

//刻度

//时刻度

for(var i=0i<12i++){

cxt.save()

cxt.lineWidth=7

cxt.strokeStyle="black"

cxt.translate(250,250)

cxt.rotate(i*30*Math.PI/180)//旋转角度 角度*Math.PI/180=弧度

cxt.beginPath()

cxt.moveTo(0,-170)

cxt.lineTo(0,-190)

cxt.closePath()

cxt.stroke()

cxt.restore()

}

//分刻度

for(var i=0i<60i++){

cxt.save()

//设置分刻度的粗细

cxt.lineWidth=5

//重置画布原点

cxt.translate(250,250)

//设置旋转角度

cxt.rotate(i*6*Math.PI/180)

//画分针刻度

cxt.strokeStyle="black"

cxt.beginPath()

cxt.moveTo(0,-180)

cxt.lineTo(0,-190)

cxt.closePath()

cxt.stroke()

cxt.restore()

}

//时针

cxt.save()

// 设置时针风格

cxt.lineWidth=7

cxt.strokeStyle="black"

cxt.translate(250,250)

cxt.rotate(hour*30*Math.PI/180)

cxt.beginPath()

cxt.moveTo(0,-140)

cxt.lineTo(0,10)

cxt.closePath()

cxt.stroke()

cxt.restore()

//分针

cxt.save()

cxt.lineWidth=5

cxt.strokeStyle="black"

//设置异次元空间分针画布的中心

cxt.translate(250,250)

cxt.rotate(min*6*Math.PI/180)

cxt.beginPath()

cxt.moveTo(0,-160)

cxt.lineTo(0,15)

cxt.closePath()

cxt.stroke()

cxt.restore()

//秒针

cxt.save()

//设置秒针的风格

//颜色:红色

cxt.strokeStyle="red"

cxt.lineWidth=3

//重置原点

cxt.translate(250,250)

//设置角度

//cxt.rotate(330*Math.PI/180)

cxt.rotate(sec*6*Math.PI/180)

cxt.beginPath()

cxt.moveTo(0,-170)

cxt.lineTo(0,20)

cxt.closePath()

cxt.stroke()

//画出时针,分针,秒针的交叉点

cxt.beginPath()

cxt.arc(0,0,5,0,360,false)

cxt.closePath()

//设置填充

cxt.fillStyle="gray"

cxt.fill()

//cxt.strokeStyle="red"

cxt.stroke()

//画出秒针的小圆点

cxt.beginPath()

cxt.arc(0,-140,5,0,360,false)

cxt.closePath()

//设置填充

cxt.fillStyle="gray"

cxt.fill()

//cxt.strokeStyle="red"

cxt.stroke()</p>

<p> cxt.restore()</p>

<p>}

function drawClock(){

cxt.clearRect(0,0,500,500)

drawNow()

}

drawNow()

setInterval(drawClock,1000)

一提到插件，我们得需要了解它的一些配置属性，从官方得知共有10个属性，如下：

barColor

默认：#ef1e25

说明：指的是该curcular栏的颜色。你可以通过像RGB，RGBA十六进制或字符串颜色任一有效的CSS颜色字符串。 但你也可以通过接受目前的百分比值来返回一个动态生成的颜色的功能。

trackColor

默认：#f2f2f2

说明：轨道颜色。

scaleColor

默认：#dfe0e0

说明：刻度线的颜色。

lineCap

默认：round

说明：定义栏线的终点的形状。可能的值有： 对接，圆形和方形 。

lineWidth

默认：3

说明：中间轨道宽度。

size

默认：110

说明：饼图大小。规定为一个正方形。

animate

默认：false

说明：设置动画缓冲时间。

onStart

默认：$.noop

说明：动画开始回调函数。

onStop

默认：$.noop说明：动画结束回调函数。

onStep

默认：$.noop说明：动画过程中回调函数。