canvas圖片怎么改變色調(diào) 如何用canvas繪制鐘表？
如何用canvas繪制鐘表？lt!DOCTYPEhtmlgtlthtmlgtltheadgtltmetacharsetutf-8/gtlttitlegtHTML5timerlt/titlegtltsc
如何用canvas繪制鐘表？
lt!DOCTYPEhtmlgt
lthtmlgt
ltheadgt
ltmetacharsetutf-8/gt
lttitlegtHTML5timerlt/titlegt
ltscript
ltstylegt
.clocks{height:500pxmargin:25pxauto position:relativewidth:500px}lt/stylegtlt/headgtltbodygtltheadergtlth2gtHTML5timerlt/h2gtlt/headergtltdivclassclocksgtltcanvasidcanvaswidth500height500gtlt/canvasgtlt/divgtlt/bodygtlt/htmlgt
ltscriptgtvarcanvas,ctx
varclockRadius250varclockImage
functioncomplete(){(0,0,,)}functiondrawScene(){light()vardatefunDate()varhours()varminutes()varseconds()hourshoursgt12?hours-12:hoursvarhourhoursminutes/60varminuteminutesseconds/60()ctx.drawImage(clockImage,0,0,500,500)(canvas.width/2,canvas.height/2)()36pxArial#000ctx.textAligncenterctx.textBaselinemiddlefor(varn1nlt12n){vartheta(n-3)*(Math.PI*2)/12varxclockRadius*0.9*(theta)varyclockRadius*0.9*(theta)(n,x,y)}()vartheta(hour-3)*2*Math.PI/12(theta)()(-15,-5)(-15,5)(clockRadius*0.5,1)(clockRadius*0.5,-1)()()()vartheta(minute-15)*2*Math.PI/60(theta)()(-15,-4)(-15,4)(clockRadius*0.8,1)(clockRadius*0.8,-1)()()()vartheta(seconds-15)*2*Math.PI/60(theta)()(-15,-3)(-15,3)(clockRadius*0.9,1)(clockRadius*0.9,-1)#0f0()()()()//畫(huà)筆結(jié)束5//設(shè)置里畫(huà)筆的線(xiàn)寬//可以設(shè)置畫(huà)筆的顏色(250,250,248,0,360,false)//手工繪制圓形，坐標(biāo)250,250半徑200，整圓（0-360度），false意思是順時(shí)針()//繪圖()//已經(jīng)結(jié)束畫(huà)布}$(function(){canvas(canvas)ctx(2d)clockImagefutureImage()setInterval(drawScene,1000)})lt/scriptgt