哈哈哈俺又来啦，这次带来的是canvas实现一些画布功能的文章，希望大家喜欢！
前言
因为也是大三了，最近俺也在找实习，之前有一个自己的小项目:
https://github.com/zhcxk1998/School-Partners
面试官说可以往深层次思考一下，或许加一些新的功能来增加项目的难度，他提了几个建议，其中一个就是 试卷在线批阅，老师可以在上面对作业进行批注，圈圈点点等 俺当天晚上就开始研究这个东东哈哈哈，终于被我研究出来啦！
采用的是
canvas 绘制画笔，由css3的
transform 属性来进行平移与缩放，之后再详细介绍介绍（希望大家可以留下宝贵的赞与star嘻嘻）
效果预览
动图是放cdn的，如果访问不了，可以登录在线尝试尝试: test.algbb.cn/#/admin/con…
公式推导 如果不想看公式如何推导，可以直接跳过看后面的具体实现~ 1. 坐标转换公式 转换公式介绍
其实一开始也是想在网上找一下有没有相关的资料，但是可惜找不到，所以就自己慢慢的推出来了。我就举一下横坐标的例子吧！
通用公式
这个公式是表示，通过公式来将鼠标按下的坐标转换为画布中的相对坐标，这一点尤为重要
(transformOrigin – downX) / scale * (scale-1) + downX – translateX = pointX
参数解释
transformOrigin: transform变化的基点（通过这个属性来控制元素以哪里进行变化）
downX: 鼠标按下的坐标（注意，用的时候需要减去容器左偏移距离，因为我们要的是相对于容器的坐标）
scale: 缩放倍数，默认为1
translateX: 平移的距离
推导过程
这个公式的话，其实就比较通用，可以用在别的利用到
transform 属性的场景，至于怎么推导的话，我是用的笨办法具体的测试代码，放在文末，需要自取~
1. 先做出两个相同的元素，然后标记上坐标，并且设置容器属性
overflow:hidden 来隐藏溢出内容
ok，现在就有两个一样的矩阵啦，我们为他标记上一些红点，然后我们对左边的进行css3的样式变化
transform矩形的宽高是
360px * 360px 的，我们定义一下他的变化属性，变化基点选择正中心，放大3倍
