首次使用canvas+js画时钟
主要用到知识点:
- arc(x1,y1,radius,startAngle,endAngle,counterclorkwise):以(x,y)为圆心绘制一条弧线,弧线半
径为radius,起始和结束角度(用弧度表示)分别为startAngle 和endAngle。最后一个参数表示
stratAngle和endAngle是否按逆时针方向计算,值为false表示按顺时针计算。 - arcTo(x1,y1,x2,y2,radius):从上一点开始绘制一条弧线,到(x2,y2)截止,并且以给定的半径radius穿过(x1,y1)
-bezierCurveTo(c1x,c1y,c2x,xc2y,x,y):从上一点开始绘制一条曲线,到(x,y)为止,并且以(c1x,c1y)和(c2x,c2y)为控制点 - lineTo(x,y):从上一点开始绘制直线,到(x.y) 为止
- moverTo(x,y):将绘图游标移动到(x,y),不画线。
quadraticCurveTo(cx,cy,x,y):从上一点开始绘制一条二次曲线。到(x,y)为止,并且以(cx,xy)
作为在、控制点
-rect(x,y,width,height):从点(x,y)开始绘制一个矩形,宽度和高度分别由width和height指定。font:表示文本样本、大小及字体,用css中指定字体的格式来指定,eg“10px Arial”
-textAlign:表示文本对齐方式。可能的值有“start”、“end”、“left”、“right”和“center”
-textBaseline:表示文本的基线。可能的值“top”、”hanging”,”middle”,”alphabetic”,”ideographic”和“bottom”
做出的效果图
代码块
代码块语法遵循标准markdown代码,例如:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#canvas1{
background: pink;
}
.content{
text-align: center;
margin: 0 auto;
overflow: auto;
}
</style>
</head>
<body>
<div class="content">
<canvas id="canvas1" width="400" height="400">你的浏览器版本太低</canvas>
</div>
<script>
window.onload=function(){
var can=document.getElementById("canvas1");
if(can.getContext){
var canv=can.getContext("2d");
canv.beginPath();
canv.strokeStyle="#ff0000";
// canv.fillStyle="blue";
//canv.fillRect(0,0,50,50)
//canv.strokeRect(40,20,100,50)
//外圆
canv.arc(200,200,100,0,2*Math.PI,false);
//内圆
canv.moveTo(290,200);//弃掉多余的线
canv.arc(200,200,90,0,2*Math.PI,false);
//绘制分针
canv.moveTo(200,130);
canv.lineTo(200,200);
// 绘制时针
canv.moveTo(150,220);
canv.lineTo(200,200);
//文字部分
canv.font="12px Arial";
canv.textAlign="center";
canv.fillText("12",200,125)
canv.fillText("6",200,280)
canv.fillText("3",120,200)
canv.fillText("9",280,200)
canv.stroke();
}
}
</script>
</body>
</html>
本文原创,转载请注明出处!