canvas图片怎么改变色调 如何用canvas绘制钟表？
如何用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()()()()//画笔结束5//设置里画笔的线宽//可以设置画笔的颜色(250,250,248,0,360,false)//手工绘制圆形，坐标250,250半径200，整圆（0-360度），false意思是顺时针()//绘图()//已经结束画布}$(function(){canvas(canvas)ctx(2d)clockImagefutureImage()setInterval(drawScene,1000)})lt/scriptgt
如何使用html5中的画布canvas绘制文字？
版权声明：本文内容由互联网用户自发贡献，本站不承担相关法律责任.如有侵权/违法内容,本站将立刻删除。
