Canvas实际应用

目录

一、Canvas签名画板

1.1、效果展示

1.2、代码分析

二、Canvas绘制动态时钟

2.1、效果展示

2.2、代码分析

一、Canvas签名画板

1.1、效果展示

1.2、代码分析

    
    

    粗线条
    细线条
    保存签名
    
    橡皮擦
    清空画布
    

总结：
(1)首先创造一个画板，获取要操作的元素。

(2)改变画笔粗细与颜色在控制台可以打印ctx,获取到它里面的具体属性，在点击事件触发的时候，改变的属性值即可；

(3)橡皮擦其实就是元素的合成，将新元素覆盖在旧的元素上即可；

(4)清空画布直接clearRect;

(5)内容保存：toDataURL()方法返回一个包含图片展示的 data URI ，相当于将画布转换为图片，将地址放在a标签里进行点击，就达到了类似图片下载的效果。

二、Canvas绘制动态时钟

2.1、效果展示

2.2、代码分析

    
    

        当前时间:
         
         
        
    
    

  总结：

(1)时钟的刻度：小时有12个，分钟有60个，都是先画出一条竖着的短线【moveTo结合lineTo】，在循环里进行相应角度的旋转【rotate】;

(2)获取当前时间【getHours、getMinutes、getSeconds】;

(3)绘制秒针、分针、时针：先旋转对应的时间点上rotate，再勾画出自己的样式(比如秒针：2 * Math.PI / 60 * sec===360/60*当前秒数值，就是秒针要在的位置)

(4)让时钟自己动：借助render函数，每次执行前先将画布清空clearRect

js、vue等其他语言也可以实现动态时钟，思路差不多。