HTML5 canvas全解析.pptVIP

平移 translateHTML DOM translate() 方法 定义和用法 translate() 方法转换画布的用户坐标系统。 语法 translate(dx, dy) 参数 参数描述dx, dy转换的量的 X 和 Y 大小。 描述 translate() 方法为画布的变换矩阵添加水平的和垂直的偏移。参数?dx?和?dy?添加给后续定义路径中的所有点。 缩放 scaleHTML DOM scale() 方法 定义和用法 scale() 方法标注画布的用户坐标系统。 语法 scale(sx, sy) 描述 scale() 方法为画布的当前变换矩阵添加一个缩放变换。缩放通过独立的水平和垂直缩放因子来完成。例如，传递一个值 2.0 和 0.5 将会导致绘图路径宽度变为原来的两倍，而高度变为原来的 1/2。指定一个负的?sx?值，会导致 X 坐标沿 Y 轴对折，而指定一个负的?sy?会导致 Y 坐标沿着 X 轴对折。 示例 旋转 rotateHTML DOM rotate() 方法 定义和用法 rotate() 方法旋转画布的坐标系统。 语法 rotate(angle) 参数描述 angle旋转的量，用弧度表示。正值表示顺时针方向旋转，负值表示逆时针方向旋转。 描述 rotate() 方法通过指定一个角度，改变了画布坐标和 Web 浏览器中的 Canvas 元素的像素之间的映射，使得任意后续绘图在画布中都显示为旋转的。它并没有旋转 Canvas 元素本身。注意，这个角度是用弧度指定的。 提示： 如需把角度转换为弧度，请乘以 Math.PI 并除以 180。 示例 Canvas中图形图像的组合HTML DOM globalCompositeOperation 属性 定义和用法 globalCompositeOperation 属性说明如何在画布上组合颜色。 语法 CanvasRenderingContext2D.globalCompositeOperation 描述 globalCompositeOperation 属性说明了绘制到画布上的颜色是如何与画布上已有的颜色组合（或“合成”）的。 下面的表格列出了可能的值及其含义。这些值中的 source 一词，指的是将要绘制到画布上的颜色，而 destination 指的是画布上已经存在的颜色。默认值是 source-over。 注：测试时发现火狐下兼容的效果出入很大，某些属性chrome下显示也并非其描述样式。 Canvas中图形图像的组合HTML DOM globalCompositeOperation 属性 值 含义 copy 只绘制新图形，删除其他所有内容。 darker 在图形重叠的地方，颜色由两个颜色值相减后决定。 destination-atop 已有的内容只有在它和新的图形重叠的地方保留。新图形绘制于内容之后。 destination-in 在新图形以及已有画布重叠的地方，已有内容都保留。所有其他内容成为透明的。 destination-out 在已有内容和新图形不重叠的地方，已有内容保留。所有其他内容成为透明。 destination-over 新图形绘制于已有内容的后面。 lighter 在图形重叠的地方，颜色由两种颜色值的加值来决定。 source-atop 只有在新图形和已有内容重叠的地方，才绘制新图形。 source-in 在新图形以及已有内容重叠的地方，新图形才绘制。所有其他内容成为透明。！！ source-out 只有在和已有图形不重叠的地方，才绘制新图形。！！ source-over 新图形绘制于已有图形的顶部。这是默认的行为。 xor 在重叠和正常绘制的其他地方，图形都成为透明的。 HTML5 Canvas Canvas基础 设置Canvas绘图样式 canvas绘制图形 Canvas引用图像 Canvas的画布处理 Canvas的图形组合 Canvas绘制文字 Canvas其他知识 保存与恢复 保存文件 获取像素信息 基本动画 Canvas基础 Canvas元素是HTML5中新增的一个重要元素，专门用来绘制图形。在页面上放置一个canvas元素就相当于在页面上放置了一块“画布”，可以在其中进行图形的描绘。 Canvas的绘制需要通过JS编写在其中进行绘画的脚本。 Canvas元素的基础知识 canvas看起来很像img，唯一不同就是它不含 src 和 alt 属性。 它只有两个属性，width 和 height，两个都是可选的，并且都可以 DOM 或者 CSS 来设置。 如果不指定width 和 height，默认的是宽300像素，高150像素。 虽然可以通过 CSS 来调整canvas的大小，但渲染图像会缩放来适应布