标签:canvas javascript web html html5
Canvas绘制钟表,仪表盘。
《HTML5 Canvas核心技术》这本书在代码方面,没有丝毫注解,我感觉看的挺费劲,如果你想买书的话,最好还是先下本pdf看看吧。
下面是表盘的绘制图解
函数顺序是按照上图的顺序来写的,最后我为仪表加上了样式。
源代码:
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css"> canvas{ border: 1px solid black; background-color: #fff; } </style> </head> <body> <canvas id="canvas" width="500" height="500"> </canvas> </body> <script type = "text/javascript"> var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var CENTROID_RADIUS = 10, CENTROID_STROKE_STYLE = "rgba(0,0,0,0.5)", CENTROID_FILL_STYLE = "rgba(80,190,240,0.6)"; var RING_INNER_RADIUS = 35, RING_OUTER_RADIUS = 55; var ANNOTATION_FILL_STYLE = "rgba(0,0,230,0.9)", ANNOTATION_TEXT_SIZE = 12; var TICK_WIDTH = 10, TICK_LONG_STROKE_STYLE = "rgba(100,140,230,0.9)", TICK_SHORT_STROKE_STYLE = "rgba(100,140,230,0.7)"; var TRACKING_DIAL_STROKING_STYLE = "rgba(100,140,230,0.5)"; var GUIDEWIRE_STROKE_STYLE = "goldenrod", GUIDEWIRE_FILL_STYLE = "rgba(250,250,0,0.6)"; var circle ={ x : canvas.width/2, y : canvas.height/2, radius : 150 }; var SEC_HAND_LONG = circle.radius + RING_OUTER_RADIUS, MIN_HAND_LONG = SEC_HAND_LONG*(2/3), HOUR_HAND_LONG = SEC_HAND_LONG/3; //Functions------------------------------------------------ //绘制仪表中心的小圆 function drawCentroid(){ context.save(); context.beginPath(); context.strokeStyle = CENTROID_STROKE_STYLE; context.fillStyle = CENTROID_FILL_STYLE; context.arc(circle.x,circle.y,CENTROID_RADIUS,0,Math.PI*2,false); context.stroke(); context.fill(); context.restore(); } //利用非零环绕规则,绘制剪纸效果的仪表外框(圆环) function drawRing (){ context.save(); //顺时针绘制外围圆 context.shadowColor = "rgba(0,0,0,0.7)"; context.shadowOffsetX = 3; context.shadowOffsetY = 3; context.shadowBlur = 6; context.strokeStyle = TRACKING_DIAL_STROKING_STYLE; context.beginPath(); context.arc(circle.x,circle.y,circle.radius+RING_OUTER_RADIUS,0,Math.PI*2,false); context.stroke(); //逆时针绘制内圈 context.strokeStyle = "rgba(0,0,0,0.1)"; context.arc(circle.x,circle.y,circle.radius+RING_INNER_RADIUS,0,Math.PI*2,true); context.fillStyle = "rgba(100,140,230,0.1)"; context.fill(); context.stroke(); context.restore(); } //绘制恰好与长刻度线相交的,内部的圆 function drawTickInnerCircle(){ context.save(); context.beginPath(); context.strokeStyle = "rgba(0,0,0,0.1)"; context.arc(circle.x,circle.y,circle.radius + RING_INNER_RADIUS-TICK_WIDTH,0,Math.PI*2,false); context.stroke(); context.restore(); } //绘制仪表刻度(包括长刻度,短刻度) function drawTicks(){ var radius = circle.radius + RING_INNER_RADIUS, ANGLE_MAX = Math.PI*2, ANGLE_DELTA = Math.PI/64, tickWidth; //利用度数做循环 //cnt用于计算数目 for(var angle = 0,cnt = 0; angle < ANGLE_MAX; angle = angle + ANGLE_DELTA, cnt++){ drawTick(angle,radius,cnt); } //利用半径与半径与x轴夹角绘制单个刻度 function drawTick(angle,radius,cnt){ var tickWidth; context.save(); if(cnt%4 === 0){ tickWidth = TICK_WIDTH; context.strokeStyle = TICK_LONG_STROKE_STYLE; }else{ tickWidth = TICK_WIDTH/2; context.strokeStyle = TICK_SHORT_STROKE_STYLE; } context.beginPath(); context.moveTo( circle.x+Math.cos(angle)*(radius-tickWidth), circle.y+Math.sin(angle)*(radius-tickWidth) ); context.lineTo( circle.x+Math.cos(angle)*(radius), circle.y+Math.sin(angle)*(radius) ); context.stroke(); context.restore(); } } //绘制表盘文字 function drawAnnotations(){ var radius = circle.radius +RING_INNER_RADIUS; context.save(); context.textAlign = "center"; context.textBaseline = "middle"; context.font = ANNOTATION_TEXT_SIZE + "px Helvetial"; context.fillStyle = ANNOTATION_FILL_STYLE; for(var angle=0; angle<Math.PI*2; angle= angle+Math.PI/8 ){ context.beginPath(); context.fillText( (angle*180/Math.PI).toFixed(0), circle.x+Math.cos(angle)*(radius-TICK_WIDTH*2), circle.y+Math.sin(angle)*(radius-TICK_WIDTH*2) ); } context.restore(); } //绘制指针 function drawPointHand(angle,handLong){ var endpt = { x:circle.x+handLong*Math.cos(angle), y:circle.y+handLong*Math.sin(angle) }; context.save(); context.strokeStyle = GUIDEWIRE_STROKE_STYLE; context.fillStyle = GUIDEWIRE_FILL_STYLE; //绘制针柄 context.beginPath(); context.moveTo(circle.x,circle.y); context.lineTo(endpt.x,endpt.y); context.stroke(); //绘制针头(圆) context.beginPath(); context.strokeStyle = TICK_LONG_STROKE_STYLE; context.arc(endpt.x,endpt.y,5,0,Math.PI*2,false); context.stroke(); context.fill(); context.restore(); } //Init----------------------------------------------------- drawCentroid(); drawRing(); drawTicks(); drawTickInnerCircle(); drawAnnotations(); drawPointHand(Math.PI/3,SEC_HAND_LONG); </script> </html>
本文由CSDN MIKUScallion 原创
http://blog.csdn.net/mikuscallion
标签:canvas javascript web html html5
原文地址:http://blog.csdn.net/mikuscallion/article/details/43276981