canvasAPI.docVIP

矩形 描述 fillRect x, y, width, height 画一个矩形 strockRect x, y, width, height 画一个矩形外框 clearRect x, y, width, height 类似于打孔效果，把某个层清除，将其成变透明区 rect x, y, width, height x,y 新矩形的 top 和 left 值。当这个方法被调用，默认调用 moveTo 0,0 绘制路径 描述 beginPath 告诉浏览器，你要开始绘制。当 beginPath 被调用，是另一个过程的开始。相当于 html 中的起始标签。 closePath 结构一个绘制过程。相当于 html 中的结束标签。 stroke 绘制形状外框 fill 绘制实心形状。一旦 fill 被调用，形状的绘制将被结束，不再需要 closePath clip 把后续特性限制在剪接的图形内。 moveTo x, y 描述虚拟的“画笔”放到要开始绘制的点 lineTo x, y 绘制线条，x, y 表示线条的结束点坐标。 arc x, y, radius,startAngle, endAngle, anticlockwise 绘制弧形、圆形。x, y 是圆的中心坐标；radius 半径；startAngle, endAngle，圆形弧度的开始点和结束点，以X轴为准；anticlockwise，逆时针旋转，Boolean。注：Angle 是靠弧度来计算的，而不是以旋转的度数来计算。var var degree 270, // 度数radians Math.PI/180 *degree; // 弧度 quadraticCurveTo cp1x, cp1y, x, y x, y 为结束点坐标；cp1x, cp1y 为第一个控制点的坐标;同上；cp2x, cp2y 为第二个控制点的坐标。注：quadratic curve 只有一个控制点，而bezier curve有两个控制点。所以，别把数字 1 写成字母 L 的小写。 bezierCurveTo cp1x, cp1y, cp2x, cp2y, x, y 图片 描述 drawImage image, x, y [, width, height] 1. imgage, 图片，或者我们的 canvas 对象。如 var img new image ; 2. x, y 在 canvas 中放置图片的坐标，想当于 CSS 的 top, left;3. width, height，生成图片的宽高。 drawImage image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight image 同上；2. 其他属性用图示比较容易理解： s source, d destination canvas； sx, sy, 截取原始变成目标图片的开始坐标点； swidth, sheight 想实现目标图片的大小； dx, dy, 目标图片在画面中的位置坐标点；dwidth, dheight 目标图片在画布中的大小。 createPattern image, type 1. image 同上；2. type 有 repeat, repeat-x, repeat-y, no-repeat。意思同 CSS 中的 background-repeat。 颜色 描述 fillStyle color 填充颜色 注：color 可以是 CSS 颜色中的任何一种。CSS3 color values strokeStyle color 绘制线条颜色。color value 同上 globalAlpha transparentcy value transparency value 可以在 0.0 ~ 1.0 之间的值。表示 alpha 透明。类似于设置 CSS 的 opacity。 线条 描述 lineWidth value 线条的大小。必须是正值。默认值是 1.0。 lineCap type 线条起始点模式。type 有 3 种：butt/round/square。默认为 butt。注：butt 与 spuare 的区别是，spuare 的半个 spuare 在基准线给的两端突出。如图： lineJoin type 线组合模式。type 有 3 种：round/bevel/miter。默认为 miter。 miterLimit value 线条组件斜面的最大值。 渐变 描述 createLinearGradient x