Canvas---Canvas绘制钟表，仪表盘
时间：2015-01-30 09:13:03
收藏：0
阅读：311
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
评论（0）