脚本宝典收集整理的这篇文章主要介绍了html5教程-HTML5 canvas绘制arcTo、translate和rotate的画法探索，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 

arcTo(x1,y1,x2,y2,radius) ;

还要加上moveTo的点(x0,y0) ;

第一步：找到切点

过点 (x1,y1), (x0,y0)引射线与点(x1,y1),(x2,y2)所引射线交于点(x1,y1)，作其角平分线，找到圆心，使其到角的两边距离等于radius，且切于两边为p1，p2，即为两切点。

第二步：画线

从起点(x0,y0)引线段到切点p1（p1在点(x1,y1)、(x0,y0)所成的射线上），然后切点p1引以radius为半径的圆弧线到切点p2，终止。

即最终的线段，肯定起于(x0,y0)点，终于切点p2，过切点p1，肯定不过(x1,y1)，可能过(x2,y2)(仅当其刚好是切点的时候)。

canvas默认原点为(0,0)，即左上角点。通过translate可以改变原点，如translate(100,200)，即是将原点改为相对于左上角的(100,200)点。canvas就是一张纸，在上边画图，点、线都是基于一个坐标轴的，translate就是改变了坐标轴原点，即是对坐标轴的变换。

rotate是旋转坐标轴，自然也是基于坐标原点的！故不用translate改变原点的话，rotate就是相对于(0,0)的旋转。配合translate，则会相对于新的坐标原点旋转。这个需要注意。对一个图形，做中心旋转，无疑是较好的选择。

总结一下，就是：tanslate和rotate都是对针对canvas坐标轴的变换。变换后的坐标都是基于新的坐标系统的。二者配合对于一些旋转绘制会相当方便（省去了计算复杂坐标的问题）

（以上是通过不断改变rotate的角度，在同一坐标填充字体的结果。）

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的html5教程-HTML5 canvas绘制arcTo、translate和rotate的画法探索全部内容，希望文章能够帮你解决html5教程-HTML5 canvas绘制arcTo、translate和rotate的画法探索所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。