如何绘制精美时钟Canvas
绘制时钟Canvas需要的知识点
getContext()
getContext()判断浏览器是否支持canvas,可以通过canvas的getContext()方法来查看是否成功获取对象。我们用的最基本的绘图环境在canvas中绘图,通过调用canvas对象的getContext()方法来获取绘图环境。getContext()方法只需要一个参数:绘图环境的类型。在游戏中,我们使用2D类型的绘图环境。
save()
save()保存当前环境的状态
restore()
restore()返回之前保存过的路径状态和属性
translate()
translate(x,y) 方法重新映射画布上的 (x,y) 位置
beginPath()
beginPath() 方法开始一条路径,或重置当前的路径
Rotate
rotate(弧度) 方法旋转当前的绘图
lineWidth
lineWidth 属性设置或返回当前线条的宽度,以像素计
lineCap
lineCap 属性设置或返回线条末端线帽的样式。属性值Round,向线条的每个末端添加圆形线帽。
moveTo()
moveTo(x,y)把路径移动到画布中的指定点,不创建线条。开始点。
lineTo()
lineTo() 方法添加一个新点,然后创建从该点到画布中最后指定点的线条。指向点。
arc()
arc() 方法创建弧/曲线(用于创建圆或部分圆)。
arc(圆的中心的 x 坐标,圆的中心的 y 坐标,圆的半径,(起始角,以弧度计,弧的圆形的三点钟位置是 0 度),结束角,以弧度计,(False = 顺时针/true = 逆时针))
stroke()
stroke() 方法会实际地绘制出通过 moveTo() 和 lineTo() 方法定义或其它已定义的路径。默认颜色是黑色
fillStyle
fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式。
fill()
fill() 方法填充当前的图像(路径)。默认颜色是黑色.
textBaseline
textBaseline 属性设置或返回在绘制文本时的当前文本基线。属性值有top,middle,bottom。fillText() 或 strokeText() 方法在画布上定位文本时,将使用指定的 textBaseline 值
Arr.foreach
Arr.foreach(function(数组元素值变量,数组元素索引变量){})
Sin()、Cos()
Sin(x)、Cos(x)方法可返回一个数字的整数,传入的值是角度所对应的弧度。弧长=弧度*半径,一个圆的弧长=2πr.要使用Math计算相应的值
fillText()
fillText(在画布上输出的文本,文本的 x 坐标位置,文本的 y 坐标位置,允许的最大文本宽度,以像素计) 方法在画布上绘制填色的文本。文本的默认颜色是黑色
New Date()
New Date()返回getHours,getMinutes,getSeconds
setInterval()
setInterval(要调用的函数或要执行的代码串,周期性执行或调用 code 之间的时间间隔,以毫秒计) 。setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
案例 绘制时钟Canvas
Index.html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<style type="text/css">
div{
margin-top: 100px;
text-align: center;
}
#clock{
}
</style>
</head>
<body>
<div>
<canvas id="clock" height="300px" width="300px"></canvas>
</div>
<script type="text/javascript" src="js/canvas.js" ></script>
</body>
</html>
Js 文件代码
var clock=document.getElementById('clock');
var ctx=clock.getContext('2d');
var width=ctx.canvas.width;
var height=ctx.canvas.height;
var r=width/2;
var rem=width/300;
function drawBackground(){
ctx.save();
ctx.translate(r,r);
ctx.beginPath();
ctx.lineWidth=10*rem;
ctx.arc(0,0,r-5*rem,0,2*Math.PI,false);
ctx.stroke();
var hourNumbers=[3,4,5,6,7,8,9,10,11,12,1,2];
ctx.font=18*rem + 'px arial';
ctx.textAlign='center';
ctx.textBaseline='middle';
hourNumbers.forEach(function(number,i){
var rad=2*Math.PI/12*i;
var x=Math.cos(rad)*(r-30*rem);
var y=Math.sin(rad)*(r-30*rem);
ctx.fillText(number,x,y);
})
for (var i=0;i<60;i++) {
var rad=2*Math.PI/60*i;
var x=Math.cos(rad)*(r-18*rem);
var y=Math.sin(rad)*(r-18*rem);
ctx.beginPath();
if (i%5==0) {
ctx.fillStyle='#000';
ctx.arc(x,y,2*rem,0,2*Math.PI,false);
} else{
ctx.fillStyle='#CCCCCC';
ctx.arc(x,y,2*rem,0,2*Math.PI,false);
}
ctx.fill();
}
}
function drawHours(hour,minute){
ctx.save();
ctx.beginPath();
var rad=2*Math.PI/12*hour;
var mrad=2*Math.PI/12/60*minute;
ctx.rotate(rad+mrad);
ctx.lineWidth=6*rem;
ctx.lineCap='round';
ctx.moveTo(0,10*rem);
ctx.lineTo(0,-r/2);
ctx.stroke();
ctx.restore();
}
function drawMinutes(minute){
ctx.save();
ctx.beginPath();
var mrad=2*Math.PI/60*minute;
ctx.rotate(mrad);
ctx.lineWidth=3*rem;
ctx.lineCap='round';
ctx.moveTo(0,10*rem);
ctx.lineTo(0,-r+30*rem);
ctx.stroke();
ctx.restore();
}
function drawSeconds(second){
ctx.save();
ctx.beginPath();
ctx.fillStyle='#c14543';
var srad=2*Math.PI/60*second;
ctx.rotate(srad);
ctx.lineWidth=3*rem;
ctx.lineCap='round';
ctx.moveTo(-2*rem,15*rem);
ctx.lineTo(2*rem,15*rem);
ctx.lineTo(1*rem,-r+18*rem);
ctx.lineTo(-1*rem,-r+18*rem);
ctx.fill();
ctx.restore();
}
function drawDot(){
ctx.save();
ctx.beginPath();
ctx.arc(0,0,2*rem,0,2*Math.PI,false);
ctx.fillStyle='#fff';
ctx.fill();
ctx.restore();
}
function draw(){
ctx.clearRect(0,0,width,height);
var now=new Date();
var hour=now.getHours();
var minute=now.getMinutes();
var second=now.getSeconds();
drawBackground();
drawHours(hour,minute);
drawMinutes(minute);
drawSeconds(second);
drawDot();
ctx.restore();
}
draw();
setInterval(draw,1000);
效果:
扩展知识点
strokeStyle
strokeStyle 设置或返回笔触线条的颜色、渐变或模式
fillStyle
fillStyle设置或返回填充区域的颜色、渐变或模式
createLinearGradient()
createLinearGradient(渐变开始x位置,渐变开始y位置,渐变结束x位置,渐变结束y位置)创建线性渐变(用在画布内容上)
createRadialGradient
createRadialGradient(x0,y0,开始圆的半径,x1,y1,结束圆的半径)
addColorStop()
addColorStop(介于 0.0 与 1.0 之间的值表示渐变中开始与结束之间的位置,在结束位置显示的 CSS 颜色值) 方法规定 gradient 对象中的颜色和位置。
globalAlpha
globalAlpha,属性值表示透明图取0~1
ctx.globalAlpha=0.2
定义从黑到红到白的的渐变,作为矩形的填充样式:
var my_gradient=ctx.createLinearGradient(0,0,170,0);
my_gradient.addColorStop(0,"black");//
my_gradient.addColorStop(0.5,"red");
my_gradient.addColorStop(1,"white");
ctx.fillStyle=my_gradient;
拓展:
自己制作的手表