HTMLcanvas基本属性与用法介绍.ppt

平移 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 在重叠和正常绘制的其他地方，图形都成为透明的。 Canvas图形组合示例1 destination-over Copy透明度为0.5， 尽管半透明但是也 未显示下面得 Darker destination-atop destination-in 画了三个图形，红色为最先画上的，之后才加了该属性，所以以后的都不会显示了 Lighter destination-out 画了三个图形，黄色为最先画上的，之后才加了该属性，所以以后的和黄色相交的部分都切掉了。 source-atop Canvas组合示例2 source-in 只显示了最后相交的那一小块，chrome下显示与atop一样，该图为ff下截图 source-out 只显在与所有已有图形不重合的地方才显示 此图为chrome下的解释 source-out 只显在与所有已有图形不重合的地方才显示 此图为ff下的解释 source-over 默认样式 Ff下显示一样 Xor 没看懂！！！ Canvas的绘制文字 填充文字与文字描边 fillTex