绘图功能Canvas

绘图功能 Canvas 一 绘制矩形 目前有三种绘制矩形的语法 fillRect x y width height 绘制一个实心矩形 strokeRect x y width height 绘制一个矩形边框 clearRect x y width height 清楚指定的区域矩形 利用 fillStyle 和 strokeStyle 属性可以方便的设置矩形的填充和线条 例 二 应用 canvas API 绘制曲线路径 在每个 canvas 实例对象中都拥有一个 path 对象 创建自定义图形的过程就 是不断地对 path 对象操作的过程 每当开始一次新的图形绘制任务时 都 需要先使用 beginPath 方法来重置 path 对象至初始状态 这个简单的函 数不带任何参数 它来通知 canvas 将要开始绘制一个新的图形了 moveTo X Y 方法可以设置绘图起始坐标 lineTo X Y 等画线方法 可以从当前起点绘制直线 圆弧 以及曲线到目标位置 closePath 方法 将自定义图形进行闭合 该方法将自动创建一条从当前坐标到起始坐标的 直线 一旦确定完成 则需要继续调用 stroke 和 fill 函数来完成将路径渲 染到画面的最后一步 beginPath 开始一个新路径 moveTo X Y 移动路径的绘图起点 lineTo X Y 从 moveTo 定义的点开始绘制连续的路径 或者从上一 次的 lineTo 的终点开始绘制 closePath 连接最后的点和最初的点并关闭路径绘制 描边样式 lineWidth 是指描边的线条宽度 lineJoin 用来修饰当前形状中线段的连接方式 可以把它的值设置为 round bevel 和 miter3 个选项 lineCap 用来指定线条末端的样式 可以把它设置为 butt square 或 round miterLimit 用来设定外延交点与连接点的最大距离 strokeStyle 用来改变线条的颜色 绘制曲线 1 arc X Y radius startAngle endAngle anticlockwise 参数 X 和 Y 为圆心坐标 r 为半径 startAngle 为起始角度 endAngle 为结 束角度 anticlockwise 为顺时针还是逆时针 2 bezierCurveTo cp1x cp1y cp2x cp2y x y cp1x 为第一个控制点的横坐标 cp1y 为第一个控制点的纵坐标 cp2x 为第 二个控制点的横坐标 cp2y 为第二个控制点的纵坐标 x 为贝济埃曲线的 终点横坐标 y 为贝济埃曲线的终点纵坐标 3 quadraticCurveTo cpX cpY x y cpX 为控制点的横坐标 cpY 为控制点的纵坐标 x 为曲线终点的横坐标 y 为曲线终点的纵坐标 在 canvas 中插入图像 在 drawImage img x y 方法中 image 是 image 或者 canvas 对象 x 和 y 是其在目标 canvas 中的起始坐标 绘制渐变图像 在 canvas 绘图中支持两种类型的渐变 线性渐变和放射性渐变 createLinearGradient x0 y0 x1 y1 表示渐变的起点 终点 createRadialGradient x0 y0 r0 x1 y1 r1 沿着两个圆之间的锥面绘制渐变 该方法 创建并返回一个新的 CanvasGradient 对象 该对象在两个指定圆的圆周之间放 射性的插入颜色 注意 这个方法并没有指定任何用来渐变的颜色 缩放 canvas 对象 使用 scale X Y 比如 X 为 2 就代表所绘制的图像中全部元素都会变成两 倍宽 translate 这个方法用来指定新的原点坐标 后续操作的坐标值都是相对于新的 原点坐标来操作取值 若要恢复原点坐标 可以使用 restore 方法 旋转 rotate angle angle 为正数时 按顺时针方向旋转 Canvas 文本应用 fillText text x y maxwidth 将对文本应用填充式渲染 strokeText text x y maxwidth 对文本进行描边渲染