clock

## 一、canvas 通过JS完成画图而不是css canvas 默认 inline-block，可以认为是一种特殊的图片。 ### 1、canvas 划线 ```html

``` > （宽高不能放在style里面，否则比例不对） > > canvas里面的width和height相当于图片的原始尺寸，加了外部style的宽高，就相当于对图片进行压缩和拉伸。 ```js // 1、获取原生dom对象 let dom = document.getElementById('can'); // 2、获取绘图对象 let can = dom.getContext('2d'); // 3d是webgl // 定义线条起点 can.moveTo(0,0); // 定义线条中点（非终点） can.lineTo(400,400); can.lineTo(800,0); // 对标记范围进行描边 can.stroke() // 对标记范围进行填充 can.fill(); ``` ![](./img/1.png) ### 2、设置线条属性线条默认宽度是1. > （一定要在绘图之前设置。） ```js can.lineWidth = 2; //设置线条宽度 can.strokeStyle = '#f00'; // 设置线条颜色 can.fillStyle = '#f00'; // 设置填充区域颜色 ``` ### 3、折线样式 - `miter`：尖角（当尖角长度值过长时会自动变成折角，如果强制显示尖角：`can.miterLimit = 100`设置尖角长度阈值） - `round`：圆角 - `bevel`：折角 ```js can.lineJoin = 'miter'; can.moveTo(100, 100); can.lineTo(300, 100); can.lineTo(100, 200); can.stroke() can.lineJoin = 'round'; can.moveTo(400, 100); can.lineTo(600, 100); can.lineTo(400, 200); can.stroke() can.lineJoin = 'bevel'; can.moveTo(700, 100); can.lineTo(900, 100); can.lineTo(700, 200); can.stroke() ``` ![](./img/2.png) ### 4、设置线帽 - `round`：加圆角线帽 - `square`：加直角线帽 - `butt`：不加线帽 ```js can.lineCap = 'round'; can.moveTo(100, 100); can.lineTo(300, 100); can.stroke() // 新建绘图，使得上一次的绘画样式不会影响下面的绘画样式（代码加在上一次绘画和下一次绘画中间。） can.beginPath() can.lineCap = 'square'; can.moveTo(100, 200); can.lineTo(300, 200); can.stroke() can.beginPath() can.lineCap = 'butt'; can.moveTo(100, 300); can.lineTo(300, 300); ``` ![](./img/3.png) ### 5、画矩形 ```js // 参数：x,y,宽，高 can.rect(100,100,100,100); can.stroke(); ``` ![](./img/4.png) ```js // 画完即填充 can.fillRect(100,100,100,100); ``` ![](./img/5.png) ### 6、画圆弧 ```js // 参数：圆心x，圆心y，半径，圆弧起点与圆心的夹角度数，圆弧终点与圆心的夹角度数，true（逆时针绘画） can.arc(500,300,200,0,2*Math.PI/360*90,false); can.stroke() ``` ![](./img/6.png) 示例： ```js can.moveTo(500,300); can.lineTo(500 + Math.sqrt(100), 300 + Math.sqrt(100)) can.arc(500, 300, 100, 2 * Math.PI / 360 *startDeg, 2 * Math.PI / 360 *endDeg, false); can.closePath()//将图形起点和终点用线连接起来使之成为封闭的图形 can.fill() ``` ![](./img/7.png) > 1、`can.beginPath()` // 新建绘图，使得上一次的绘画样式不会影响下面的绘画样式（代码加在上一次绘画和下一次绘画中间。） > > 2、`can.closePath()` //将图形起点和终点用线连接起来使之成为封闭的图形。 ### 7、旋转画布 ```js can.rotate(2*Math.PI/360*45); // 一定要写在开始绘图之前 can.fillRect(0,0,200, 10); ``` > 旋转整个画布的坐标系（参考坐标为画布的(0,0)位置） ![](./img/8.png) ### 8、缩放画布 ```js can.scale(0.5,2); can.fillRect(0,0,200, 10); ``` **整个画布**：x方向缩放为原来的0.5，y方向拉伸为原来的2倍。 ![](./img/9.png) ### 9、画布位移 ```js can.translate(100,100) can.fillRect(0,0,200, 10); ``` ![](./img/10.png) ### 10、保存与恢复画布状态 ```js can.save() // 存档：保存当前画布坐标系状态 can.restore() // 读档：恢复之前保存的画布坐标系状态 ``` ![](./img/11.png) ![](./img/12.png) ### 11、示例1：指针时钟 ```html clock

``` ![](./img/13.png) ### 12、示例2：圆弧时钟 ```html clock

``` ![](./img/1.gif)