JavaScript第十五章使用 Canvas 绘图

JavaScript第十五章使用 Canvas 绘图

• <canvas>元素基本用法

使用 元素，必须先设置其 width 和 height 属性，指定可以绘图的区域大小。出现在开始和结束标签中的内容是后备信息，如果浏览器不支持 元素，就会显示这些信息。在使用 元素之前，首先要检测 getContext() 方法是否存在，这一步非常重要。使用 toDataURL() 方法，可以导出在 元素上绘制的图像

• 2D 上下文

  • 填充和描边

  填充，就是用指定的样式（颜色、渐变或图像）填充图形；描边，就是只在图形的边缘画线。 大多数 2D 上下文操作都会细分为填充和描边两个操作，而操作的结果取决于两个属性： fillStyle 和 strokeStyle 。

  • 绘制矩形

  矩形是唯一一种可以直接在 2D 上下文中绘制的形状。与矩形有关的方法包括 fillRect() 、strokeRect() 和 clearRect() 。这三个方法都能接收 4 个参数：矩形的 x 坐标、矩形的 y 坐标、矩形宽度和矩形高度。这些参数的单位都是像素。 fillRect() 方法在画布上绘制的矩形会填充指定的颜色
  strokeRect() 方法在画布上绘制的矩形会使用指定的颜色描边。
  clearRect() 方法用于清除画布上的矩形区域。

  • 绘制路径

  通过路径可以创造出复杂的形状和线条。要绘制路径，首先必须调用 beginPath() 方法，表示要开始绘制新路径。然后，再通过调用下列方法来实际地绘制路径
  arc(x, y, radius, startAngle, endAngle, counterclockwise) ：以 (x,y) 为圆心绘
  制一条弧线，弧线半径为 radius ，起始和结束角度（用弧度表示）分别为 startAngle 和endAngle 。最后一个参数表示 startAngle 和 endAngle 是否按逆时针方向计算，值为 false表示按顺时针方向计算
  arcTo(x1, y1, x2, y2, radius) ：从上一点开始绘制一条弧线，到 (x2,y2) 为止，并且以给定的半径 radius 穿过 (x1,y1) 。
  bezierCurveTo(c1x, c1y, c2x, c2y, x, y) ：从上一点开始绘制一条曲线，到 (x,y) 为止，并且以 (c1x,c1y) 和 (c2x,c2y) 为控制点。
  lineTo(x, y) ：从上一点开始绘制一条直线，到 (x,y) 为止。
  moveTo(x, y) ：将绘图游标移动到 (x,y) ，不画线。
  quadraticCurveTo(cx, cy, x, y) ：从上一点开始绘制一条二次曲线，到 (x,y) 为止，并且以 (cx,cy) 作为控制点。
  rect(x, y, width, height) ：从点 (x,y) 开始绘制一个矩形，宽度和高度分别由 width 和height 指定。这个方法绘制的是矩形路径，而不是 strokeRect() 和 fillRect() 所绘制的独立的形状。

  • 绘制文本

  绘制文本主要有两个方法： fillText() 和 strokeText() 。这两个方法都可以接收 4 个参数：要绘制的文本字符串、x 坐标、y 坐标和可选的最大像素宽度。
  font ：表示文本样式、大小及字体，用 CSS 中指定字体的格式来指定，例如 “10px Arial” 。
  textAlign ：表示文本对齐方式。可能的值有 “start” 、 “end” 、 “left” 、 “right” 和 “cente