zoukankan      html  css  js  c++  java
  • 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,且切于两边为p1p2,即为两切点。

    第二步:画线

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

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

    arcTo

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

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

    总结一下,就是:tanslaterotate都是对针对canvas坐标轴的变换。变换后的坐标都是基于新的坐标系统的。二者配合对于一些旋转绘制会相当方便(省去了计算复杂坐标的问题)

    rotate

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

  • 相关阅读:
    atitit.为什么技术的选择方法java超过.net有前途
    HDU 4022 Bombing STL 模拟题
    定制XP引导屏幕背景图像和替换windows这句话
    《STL源代码分析》---stl_heap.h读书笔记
    2015在大型多人在线游戏市场报告
    于Unity3D调用安卓AlertDialog
    jQuery整理笔记5----jQuery大事
    推断字符串数组里面是空的
    软测试-数据结构
    2014第18周三
  • 原文地址:https://www.cnblogs.com/web100/p/HTML5-canvas-arcTo-translate-rotate.html
Copyright © 2011-2022 走看看