使用canvas和JS画出一个钟表

Veröffentlicht am

canvas 是什么呢？？？

canvas是HTML5新出的一个标签，这个标签用来定义图形。
canvas必须使用脚本来绘制图形，最简单的就是使用JavaScript来绘制图形啦。

从最简单的入手

创建一个用于画图的画布

1
2
3
4
5
6
7
8
9
10
<style>
 canvas{
  background: #ccc;
 }
</style>
</head>
<body>
  <canvas width='700px' height='700px' id='canvas'>
		
  </canvas>

现在我们就绘制出了一个长度为700px，宽度为700px的画布了，在这里有人会有疑问，为什么画布的长宽不能再style中定义呢，那是因为，如果在CSS中定义的话，会存在画布的缩放问题，所以为了避免画布被缩放，所以我们要把长宽都放在标签内。

1
2
3
4
window.onload = function (){
 var canvas = document.getElementById('canvas');
 var cobj = canvas.getContext('2d');
 }

getContext(‘2d’)方法是创建了一个二维的绘图环境，导出来一个二维绘图的API。
关于API的方法我在这里不再赘述，有相关资料可以百度，谷歌，MDN等，都有对canvas API的描述。

用canvas画出一个圆形

1
2
3
4
5
6
window.onload = function (){
 var canvas = document.getElementById('canvas');
 var cobj = canvas.getContext('2d');
 cobj.arc(100,100,50)//arc方法规定了三个参数，前两个规定了圆点的位置，第三个规定了半径
 cobj.stroke()//这个方法是将我们绘制的图形打印到页面上
}

此时我们刷新页面，就会的到一个半径为50的圆，如果想美化这个圆形，我们可以用到很多方法，MDN上有相关的介绍

用canvas画出一条线

1
2
3
4
5
6
7
window.onload = function (){
 var canvas = document.getElementById('canvas');
 var cobj = canvas.getContext('2d');
 cobj.moveTo(100,100//moveTo方法规定了2个参数，表示线段起点的位置
 cobj.lineTo(100,200)//lineTo方法必须是接在moveTo之后，表示终点位置
 cobj.stroke()
}

此时我们刷新页面，将会看到一条直线，moveTo和lineTo的两个参数分别对应的x坐标和y坐标，canvas的起点坐标，即（0，0）坐标是在画布的左上角，左上角往下，y坐标越大，左上角往右，x轴越大。