项目中一直有一个问题困扰着我，我们的画布可以缩放平移旋转，支持拖拽生成图形，生成手写笔迹，如果用户选择的线条粗细为5像素，那么即使画布缩放过绘制出的线条粗细也应该是视觉上的5px，所以再绘制时赋值给context.lineWidth的值需要一个计算过程（利用canvas当前缩放值来计算出一个值）。
那么怎么获取缩放值呢？因为canvas的CanvasRenderingContext2D.getTransform() 方法可以获取当前被应用到上下文的转换矩阵，我试图从这个上面获取代表当前画布缩放值，但没找到转换的方法也不知存不存这样一个转换方法能计算出画布缩放值。
所以我只能从其他方法入手，下面简单介绍下我这个粗暴的方法，就是长度对比法：
首先我们定义两个点 这两个点可以看做是屏幕坐标系的两点A（0,0）B（0,10），当然我们知道这个长度是10。
然后我们再计算出AB两点的位置分别在canvas坐标系中的坐标值，通过什么方法计算呢，我之前的一个博文有介绍过计算方法,，
假如我们再经过这个计算过程后，得到A对应的A1为（5,10）B对应的B1为（10,15）可以计算出A1B1的长度为7.07。那么可以理解为原来10个单位的距离现在7.07个单位就能表示出来了。也就是画布被放大了10/7.07=1.41。
那么计算出来的 lineWidth=5/1.41 。视觉上就是5px的粗细
这个计算方法只适合于计算画布缩放x轴，y轴缩放倍数一致的情况。如果画布被拉扁过，就不适用了。
相关文章参考：
https://www.cnblogs.com/fangsmile/p/5651429.htm
https://www.cnblogs.com/fangsmile/p/9324194.html
标签：7.07,10,canvas,缩放,画布,获取,计算 来源： https://www.cnblogs.com/fangsmile/p/14652281.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。