赞助商链接
当前位置： >>
HTML5 canvas全解析
HTML5 CanvasI. Canvas基础 II. 设置Canvas绘图 样式 III.canvas绘制图形 IV.Canvas引用图像 V. Canvas的画布处 理 VI.Canvas的图形组 合 VII.Canvas绘制文字 VIII.Canvas其他知 识?保存与恢复 ?保存文件 ?获取像素信息 ?基本动画Canvas基础? Canvas元素是HTML5中新增的一个重要元 素，专门用来绘制图形。在页面上放置一个 canvas元素就相当于在页面上放置了一块 “画布”，可以在其中进行图形的描绘。 ? Canvas的绘制需要通过JS编写在其中进行 绘画的脚本。Canvas元素的基础知识? &canvas&看起来很像&img&，唯一不同就是它 不含 src 和 alt 属性。 ? 它只有两个属性，width 和 height，两个都是可 选的，并且都可以 DOM 或者 CSS 来设置。 ? 如果不指定width 和 height，默认的是宽300像 素，高150像素。 ? 虽然可以通过 CSS 来调整canvas的大小，但渲染 图像会缩放来适应布局的 。 ? 结束标签 &/canvas& 是必须的放置Canvas? &style type=&text/css&& ? .canvas { width:150 height:150} ? canvas { border: 1} ? &/style&&body onload=&draw();&& &div class=&canvas&& &canvas id=&canvas& width=&150& height=&150&& &p&写在这里面的内容将展示给不兼容canvas的浏览器 &/p& &/canvas& &/div& &/body& 演示（canvas 基础测试模板2.html）模板JS? 以下js是测试用的html文档中通用的，但是并不指必须如此&script type=&text/javascript&& function draw() { canvas = document.getElementById(&canvas&); if (canvas.getContext) { //检测浏览器是否兼容 ctx = canvas.getContext(&2d&); //你的canvas代码在这里 } //不兼容的代码 &/script&}绘制图形HTML DOM getContext() 方法? ? ? 定义和用法 getContext() 方法返回一个用于在画布上绘图的环境。 语法 Canvas.getContext(contextID) 参数 参数 contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 “2d”，它指 定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API。 提示：在未来，如果 &canvas& 标签扩展到支持 3D 绘图，getContext() 方法可能 允许传递一个 “3d” 字符串参数。（即现在不仅能支持“2D”）。???返回值 一个 CanvasRenderingContext2D 对象，使用它可以绘制到 Canvas 元素中。描述 返回一个表示用来绘制的环境类型的环境。其本意是要为不同的绘制类型（2 维、3 维） 提供不同的环境。当前，唯一支持的是 &2d&，它返回一个 CanvasRenderingContext2D 对象，该对象实现了一个画布所使用的大多数方法。下一页：设置绘图样式返回设置绘图样式? 填充样式? fillStyle()颜色值支持半透明 具体请看示例? 描边样式? ? ? ? strokeStyle()颜色值支持半透明? 设定线条样式设定线宽 lineWidth() 设定图线帽样式 lineCap'butt','round','square'线的链接样式 lineJoin'round','bevel','miter'? 绘制渐变? ? 绘制线性渐变 绘制径向渐变下一页：绘制阴影给图形绘制阴影? ? ? ? shadowOffsetX――阴影的横向移动 shadowOffsetY――阴影的纵向移动 shadowColor――阴影的颜色 shadowBlur――阴影的模糊范围ctx.strokeStyle=&rgb(200,0,0)&; ctx.fillStyle=&rgb(255,0,0)&; ctx.shadowOffsetX=3; ctx.shadowOffsetY=3; ctx.shadowColor=&rgba(150,0,0,0.2)&; ctx.shadowBlur=3; ctx.beginPath(); ctx.moveTo(75,60); ctx.bezierCurveTo(125,20,125,100,75,115); ctx.bezierCurveTo(25,100,25,20,75,60); ctx.stroke(); ctx.fill();示例下一页：绘制线性渐变HTML DOM createLinearGradient() 方法? ? 定义和用法 createLinearGradient() 方法创建一条线性颜色渐变。 语法 createLinearGradient(xStart, yStart, xEnd, yEnd)这个方法创建并返回了一个新的 CanvasGradient 对象，它在指定的起始点 和结束点之间线性地内插颜色值。注意，这个方法并没有为渐变指定任何颜色。 使用返回对象的 addColorStop() 来做到这一点。要使用一个渐变来勾勒线条 或填充区域，只需要把 CanvasGradient 对象赋给 strokeStyle 属性或 fillStyle 属性即可。下一页:canvas线性渐变示例canvas线性渐变示例function draw() { var cxt = document.getElementById('canvas').getContext('2d'); var grd=cxt.createLinearGradient(1,1,175,50); //(开始坐标x，开始坐标y，结束点X，结束点Y) grd.addColorStop(1,“#0000ff”);//addColorStop(offset, color)/*参数：百分比，颜色值*/ grd.addColorStop(0,&#00FF00&); cxt.fillStyle= cxt.fillRect(1,1,175,50); }示例下一页：canvas径向渐变返回HTML DOM createRadialGradient() 方法? ? 定义和用法 createRadialGradient() 方法创建一条放射颜色渐变。 语法 createLinearGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd)返回值 表示一个放射性颜色渐变的一个 CanvasGradient 对象。 描述 这个方法创建并返回了一个新的 CanvasGradient 对象，该对象在两个指定圆的圆周之间放射性地插值颜色。注意， 这个方法并没有指定任何用来渐变的颜色。使用返回对象的 addColorStop() 方法做到这一点。要使用一个渐变来勾 勒线条或填充区域，只需要把 CanvasGradient 对象赋给 strokeStyle 属性或 fillStyle 属性即可。 放射性渐变的绘制方法 使用第一个圆的圆周在偏移 0 处的颜色和第二个圆的圆周在偏移 1 处的颜色，在两个位置之间的圆上插入颜色值（红 色、绿色、蓝色和 alpha）。下一页：canvas径向渐变示例canvas径向渐变示例var radgrad = ctx.createRadialGradient(75,75,1, 75,75,60); &!--(圆一圆心x，圆一圆 心y，圆一半径，圆2圆心x，圆2圆心y， 圆2半径，)--& radgrad.addColorStop(0, '#A7D30C'); radgrad.addColorStop(0.9, '#019F62'); radgrad.addColorStop(1, 'rgba(1,159,98,0)'); ctx.fillStyle = ctx.fillRect(0,0,150,150);下一页：canvas绘制图形通过JS在画布上绘制图形? 使用路径? beginPath() stopPath() ? moveTo() lineTo() ? 绘制矩形 Rect() fillRect() clearRect() ? 绘制圆形 arc() ? 绘制贝塞尔曲线? ? quadraticCurveTo() bezierCurveTo()strokeRect()? Fill() strock()使用图像开始与闭合路径? beginPath()? 该方法不使用参数。通过调用该方法，开始路径的创建。在几次循环地创建 路径的过程中，每次开始创建时都要调用beginPath函数? closePath()? 如果当前子路径是打开的，就关闭它。路径创建完成后，使用图形上下文对 图像的closePath方法将路径关闭。将路径关闭后，路径的创建工作就完成 了，但是注意，这时只是路径创建完毕而已，还没有真正的绘制任何图形。*注：beginPath和 closePath方法有时候即使不用也可以进行填充和描边， 但是如果不使用那么在最后填充的时候将把所有路径当做一个路径进行填充。 示例下一页：HTML DOM moveTo() 方法返回HTML DOM moveTo() 方法? 定义和用法moveTo() 方法可把窗口的左上角移动到一个指定的 坐标。? 语法window.moveTo(x,y)? 参数描述x窗口新位置的 x 坐标y窗口新位置的 y 坐标*注：moveTo其实就相当于我们画图时提起画笔到画布的另一个地方，在这 个过程中我们并没有进行绘制路径。具体用的时候像：开始在哪画、画完一笔 之后再到哪里去画之类的用法。 下一页：HTML DOM lineTo() 方法HTML DOM lineTo() 方法? ? ? ? 定义和用法 lineTo() 方法为当前子路径添 加一条直线。 语法 lineTo(x, y) 参数描述 x, y直线的终点的坐标。 描述 lineTo() 方法为当前子路径添 加一条直线。这条直线从 当前点开始，到 (x, y) 结 束。当方法返回时，当前 点是 (x,y)。ctx.beginPath(); ctx.moveTo(1,1); ctx.arc(50,50,30,0,Mat.PI*2,true); ctx.lineTo(150,150); ctx.closePath(); ctx.stroke(); /*这个例子中我们发现当用了moveTo之 后如果再用arc那么moveTo的点会 自动连接到圆的起点而lineTo则从圆 的终点开始，颠倒顺序后，lineTo的 终点又会自动连接到圆的起点*/*对照moveTo ,lineTo就相当于在刚刚提笔到的地方开始画一条线，这条线的结束点就 是（x，y），另外就是直线画到这里，当前画笔的位置就到了（x，y）这个点。后面 的画矩形就不是了。 示例下一页：HTML DOM rect() 方法返回HTML DOM rect() 方法? 定义和用法 ? rect() 方法为当前路径添加一条矩形子路径。 ? 语法 ? quadraticCurveTo(x, y, width, height) ? 参数描述x, y矩形的左上角的坐标。width, height矩形的大 小。 ? 描述 ? rect() 方法为路径添加了一个矩形。这个矩形是路径的一个子 路径并且没有和路径中的任何其他子路径相连。 ? *当 rect() 方法返回时，当前位置是 (0,0)。? 注：这时候不可以直接使用lineTo方法画路径，必须先moveTo之后才行。? 示例下一页：HTML DOM arc() 方法 返回HTML DOM arc() 方法? ? ? 定义和用法arc() 方法使用一个中心点和半径，为一个画布的当前子路径添加一条弧。语法arc(x, y, radius, startAngle, endAngle, counterclockwise)参数描述x, y描述弧的圆形的圆心的坐标。radius描述弧的圆形的半径。startAngle, endAngle沿着圆指定弧的开始点和结束点的一个角度。这个角度用弧度 来衡量。沿着 X 轴正半轴的三点钟方向的角度为 0，角度沿着逆时针方 向而增加。counterclockwise弧沿着圆周的逆时针方向（TRUE）还是 顺时针方向（FALSE）遍历。?描述这个方法的头 5 个参数指定了圆周的一个起始点和结束点。调用这个方法会 在当前点和当前子路径的起始点之间添加一条直线。接下来，它沿着圆周， 在子路径的起始点和结束点之间添加弧。 最后一个 counterclockwise 参数指定了圆应该沿着哪个方向遍历来连接起 始点和结束点。这个方法将当前位置设置为弧的终点。 示例下一页：HTML DOM quadraticCurveTo() 方法返回HTML DOM quadraticCurveTo() 方法PS下的曲线通过js写出的曲线 示例下一页：HTML DOM bezierCurveTo() 方法返回HTML DOM bezierCurveTo() 方法? ??定义和用法 bezierCurveTo() 方法在一个画布中开始子路径的一个新的集合。 语法：bezierCurveTo(cpX1, cpY1, cpX2, cpY2, x, y)bezierCurveTo() 为一个画布的当前子路径添加一条三次贝塞尔曲线。这条曲线 的开始点是画布的当前点，而结束点是 (x, y)。两条贝塞尔曲线控制点 (cpX1, cpY1) 和 (cpX2, cpY2) 定义了曲线的形状。当这个方法返回的时候，当 前的位置为 (x, y)。示例在下页二维贝塞尔曲线示例Js写出来的PS下的路径PS填充描边ctx.strokeStyle=“rgb(200,0,0)”; //描边颜色 ctx.fillStyle=“rgb(255,0,0)”;// 填充颜色 ctx.beginPath();//开始路径两者可以完 全重合ctx.moveTo(75,60);//曲线起点 ctx.bezierCurveTo(125,20,125,100,75,115);// 右边曲线，（75,115）将作为下条曲线起点 ctx.bezierCurveTo(25,100,25,20,75,60);// 两条曲线的 cp点其实是对称的，合并终点。 ctx.closePath();//闭合路径 ctx.stroke();//描边 ctx.fill();//填充示例 返回在Canvas中引入图像? canvas绘制图像基础 ? drawImage方法（三种用法） ? 图像平铺createPattern方法canvas绘制图像? Canvas 相当有趣的一项功能就是可以引入图像，它可以 用于图片合成或者制作背景等。而目前仅可以在图像中加 入文字（标准说明中并没有包含绘制文字的功能）。只要 是 Gecko 支持的图像（如 PNG，GIF，JPEG等）都可 以引入到 canvas 中，而且其它的 canvas 元素也可以 作为图像的来源。? 在 Canvas API 中，图像通过表示 HTML &img& 元素 的 Image 对象来指定，或者通过使用 Image() 构造函 数所创建的屏幕外图像来指定。一个 Canvas 对象也可 以用作图像来源。 ? 可以使用 drawImage() 方法在一个画布上绘制图像； 而更为常见的形式是，允许源图像的任意矩形区域缩放或 绘制到画布上。drawImage()? 3参数 ctx.drawImage(image,x,y) 其中第一个参数可以使一个IMG元素，可以是一个video元素， 或者JS创建的Image对象。XY分别表示图像在画布中的 起始点坐标。 ? 5参数 ctx.drawImage(image,x,y,w,h) 由于新引入了两个参数，这种方法可以对图像进行缩放。 ? 9参数 ctx.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh) 这种方法可以进行裁切，我们把图像从 （sx，sy）开始宽高 为 sw，sh的这一部分像素放置到画布的（dx,dy）处，宽 高分别为dw，dh。drawImage 示例var myImage= new Image(); // Create new Image object myImage.src = &backdrop.png&; function draw() { var canvas_1 = document.getElementById('canvas_1'); if (canvas_1.getContext) { var ctx_1 = canvas_1.getContext(&2d&); ctx_1.drawImage(myImage,4,4); //三参数 ctx_1.drawImage(myImage,3,93,177,110);//五参数 ctx_1.drawImage(myImage,80,3,40,40,182,90,60,60); ctx_1.drawImage(myImage,117,3,40,40,182,150,60,60);//九参 }}三参数示例 九 参 数五参数示例示例下一页：图像平铺图像平铺HTML DOM createPattern() 方法? ? ? 定义和用法 ? createPattern() 方法为贴图图像创建一个模式。 语法 ? createPattern(image, repetitionStyle) 参数 Image：需要贴图的图像。这个参数通常是一个 Image 对象，但是也可以使用一个 Canvas 元素。 repetitionStyle说明图像如何贴图。可能的值如下所示： &repeat& - 在各个方向上都对图像贴图。默认值。 &repeat-x& - 只在 X 方向上贴图。 &repeat-y& - 只在 Y 方向上贴图。 &no-repeat& - 不贴图，只使用它一次。 ? ? 返回值表示模式的一个 CanvasPattern 对象。描述注： 1.使用createPattern之后并不是在 底部进行平铺。 2.火狐只支持“repeat”方式平铺， 其他方式也只按repeat来。 3.与 drawImage 有点不同，你需 要确认 image 对象已经装载完毕， 否则图案可能效果不对的。createPattern() 方法创建并返回一个 CanvasPattern 对象，该对象表示一个贴图图像所定义的模式。要 使用一个模式来勾勒线条或填充区域，可以把一个 CanvasPattern 对象用作 strokeStyle 属性或 fillStyle 属性的值。下一页：图像裁剪示例Canvas的画布处理? 图像裁剪（画布） ? 坐标变换? 平移 translate ? 扩大 scale ? 旋转 rotate? 矩阵变换图像裁剪HTML DOM clip() 方法? 使用Canvas绘制图像的时候，我们经常会想要只 保留图像的一部分，这是我们可以使用canvas API再带的图像裁剪功能来实现这一想法。 ? Canvas API的图像裁剪功能是指，在画布内使用 路径，只绘制该路径内所包含区域的图像，不会只 路径外的图像。 ? 使用图形上下文的不带参数的Clip方法来实现 Canvas的图像裁剪功能。该方法使用路径来对 Canvas话不设置一个裁剪区域。因此，必须先创 建好路径。创建完整后，调用clip方法来设置裁剪 区域下一页：图像裁剪示例图像裁剪示例注*：裁剪是对画布进行的，裁切 后的画布不能恢复到原来的大小， 也就是说画布是越切越小的，要想 保证最后仍然能在canvas最初定义 的大小下绘图需要注意save和 restore ，后面会说到。 画布是先裁切完了再进行绘图。 并不一定非要是图片，路径也可以 放进去~裁切后的图（部 分代码未给）素材图 （原图很大）ctx.beginPath(); ctx.moveTo(75,60); ctx.bezierCurveTo(125,20,125,100,75,115 ); ctx.bezierCurveTo(25,100,25,20,75,60); ctx.clip(); ctx.closePath(); ctx.drawImage(myImage,20,30,100,100);示例Canvas的坐标变换?平移 translate ?缩放 scale ?旋转 rotate注*：由于canvas的操作是直接对画布进行处理，例如在将画布放大2倍之 后再往画布上画路径加图像都会出现新的图形图像是原图像的两倍，在旋转 一次之后，再次画上的图形图像也会是在原基础上进行了旋转的，所以在一 次进行变换操作之前应该适时的进行保存是很有必要的。平移 translateHTML DOM translate() 方法? 定义和用法? translate() 方法转换画布的用户坐标系统。? 语法? translate(dx, dy)? 参数? 参数描述dx, dy转换的量的 X 和 Y 大小。? 描述? translate() 方法为画布的变换矩阵添加水平的和 垂直的偏移。参数 dx 和 dy 添加给后续定义路径 中的所有点。缩放 scale HTML DOM scale() 方法? 定义和用法? 语法 ? 描述? scale() 方法标注画布的用户坐标系统。 ? scale(sx, sy) ? scale() 方法为画布的当前变换矩阵添加一个缩放变换。缩放通 过独立的水平和垂直缩放因子来完成。例如，传递一个值 2.0 和 0.5 将会导致绘图路径宽度变为原来的两倍，而高度变为原来的 1/2。指定一个负的 sx 值，会导致 X 坐标沿 Y 轴对折，而指定 一个负的 sy 会导致 Y 坐标沿着 X 轴对折。示例旋转 rotate HTML 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图形组合示例1destination-overCopy透明度为0.5， 尽管半透明但是也 未显示下面得Darkerdestination-atopdestination-in 画了三 个图形，红色为最先画 上的，之后才加了该属 性，所以以后的都不会 显示了destination-out 画了 三个图形，黄色为最先 画上的，之后才加了该 属性，所以以后的和黄 色相交的部分都切掉了。Lightersource-atopCanvas组合示例2source-in 只显示 了最后相交的那一 小块，chrome下显 示与atop一样，该 图为ff下截图source-out 只显在与所有 source-out 只显在与所有 已有图形不重合的地方才显 已有图形不重合的地方才显 示 此图为chrome下的解释 示 此图为ff下的解释source-over 默认样式 Ff下显示一样Xor 没看懂！！！Canvas的绘制文字? 填充文字与文字描边? fillText ――填充字体 ? strokeText――轮廓描边? 文字属性设置? font――字体 ? textAlign――水平对齐 ? textBaseline――垂直对齐注：之所以说文字的绘制是因为文字在这里面是以图形的方式存在 的，所以我们可以以处理图形的方式对文字处理，例如做渐变的文 字，对画布进行缩放的时候尽量不要存在文字。绘制文字 fillText()、strokeText()? fillText方法用于填充方式绘制字符串该方法定义如 下所示： ? ctx.fillText(text,x,y,[maxWidth]); ? 该方法接受四个参数，第一个参数text表示绘 制文字的内容，第二个参数x表示绘制文字的 起点横坐标，第三个参数y表示绘制文字的起 点纵坐标，第四个参数maxWidth为可选参数 表示显示文字的最大宽度，可以防止溢出。 ? strokeText方法用于轮廓方式绘制字符串该方法定义 如下所示： ? ctx.strokeText(text,x,y,[maxWidth]); ? 该方法的参数部分的解释与fillText方法相同；文字样式font、textAlign、textBaseline? ctx.font='italic bolder 48px 黑体';? *经过测试：粗体斜体可以不加，粗体斜体顺序可变，但是不可 以放在字体大小和字体后 大小和字体不可变。? textAlign、textBaseline? 分别用来确定文字的水平对齐方式和垂直对齐方式 ? 下图为垂直方向对齐的各种展示 图中横线为文字的y值。示例Canvas其他知识? 保存与恢复状态? Save Restore? 保存文件? toDataURL(“image/jpeg”)? 获取像素信息? getImageData putImageData? 基本动画? clearRect() ? setIntervalCanvas中状态的保存与恢复? Save和restore是一对操作，分别对应进栈和出栈的操作， canvas把当前的状态通过save放入堆栈然后在需要退回到之 前的某种状态时就通过restore返回到之前的状态。 ? 前面已经提到很多地方用到了save和restore，因为这些操作 都会影响到未来的绘图操作，如果不还原到最初的状态就会出 现我们所不想要的效果，例如在时钟动画中如果我们在画完钟 表表盘之后未回退那么很有可能看到的是整个画面都在旋转。 ? 可以保存的状态现在我所知道的有对画布的操作包括裁剪、旋 转、缩放、平移，有定义的各种样式包括填充样式、描边样式 、字体样式等。 ? 另外当我们进行填充和描边的时候所用的样式字体样式，也会 被保存为状态，当然你可以随时重新给他们新的样式，如果你 不希望出现你预想之外的事情，或者你想用之前的样式，那么 你就需要使用保存和恢复状态了。钟表示例裁剪示例太阳系运动canvas保存文件? 通过保存文件可以将canvas内的内容保存为图片，保存 文件的原理其实是把当前的绘画状态输出到一个dataURL 地址指向的数据中的过程，所谓dataURL，是指目前达到 或数浏览器能够识别的一种base64位编码的URL，主要 用于小型的、可以在网页中直接嵌入而不需要从外部文件 嵌入的数据，譬如img元素中的图像文件等。&img src=&data:image/base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAACWCAYAAAA8AXHiAAAgAElE QVR4nOydd1RUV9fG970zNFERxQoM2DswA1bsNSbGil16EVSqvQtqNMU0k1hiLLHQjBoLzZJmTGLvhTp0Buy AtIHn++OWuSAmaDS+31qetc4aGJh272/2fs4u5xK9HW/H2/F2vB1vx9vxdrwdb8fb8Xa8HW/H2/F2vB1vx9 vxdrwdb8fb8Xa8HW/H2/F2vB1vx//HARtqBiX1gYpmwp4CoKJVsKcNsKcNUNFaKCkEKpoJFY2GPXVHV6r/pt/ z//JAV9KHA3WEikZCSdOgpAAoKUw8pkoK44+pO+xpMHqQJYjYN/2+//VAL2oIFb0PFa2Dik5ARRdeYh6BPa 2EPb2HHmT5pj/TmxywJzOoaAjsaT5UFAEVnXuJ4/krVPQZVDQFSmr1pj/TCw0oqQsP09mXhOn5054Ow54C YE/d3/Tn/C8GlGQFJXlA...36KgiobUjiXRQhP4yf53+5r55JQxEDUMSZZ3onSmI+ijiDUQx4IdfoJ6ohi4HIYjaS GIks/B5nd///Ql89taYfc7JONwifVWf9hCzW/dfbBn/T/umrR2wYhVEvg/QwcVePJopYoy+L/V/0dT6N9k9fPWJ DESPR9qge9uCBh5FlaCEgI1/09T3N9k9fPULTQ1em6wF9T6PO5SL9s6Y/103Q59D+6atHbHgLZxSxCFmcfa KtC+298QSIhXgL5xd9Xc+i/dNXj9j0E6TeRwtC2/QYnbUJ7eSE9/4nDNC/aP/01WM0JNFftyMOPNTyWgtkO4 AsziGJfi/69z/P9k9fPWJDFjXIDbHdUWCnac/t0F+zFlnUeNG/+0W0f/rqEZueCPCa3lnxKOIntDjuVfrjeL2zXnvil KL/z9s/ffUYzbbZK4sv0bJNTiGLLwkQ9f4nVzJP0P7pq8dseAvn/+kVzFNs//TVP+2fZtf+H7wWySg/aOLgAAAA AElFTkSuQmCC“&右边的这段放进html就可以直接得到左边的图片Canvas获得像素信息? 在html5中使用Canvas API所能够做到的图像处理技术中还包括像 素处理技术。使用CanvasAPI能够获取图像中的每一个像素，然后得 到该像素颜色的rgb或rgba值。使用图形上下文对象的 getImageData来获取图像中的像素。 imageData变量是一个CanvasPixeArray对象，具有height， width，data等属性。Data属性是一个保存像素数据的数组，内容类 似[r1,g1,b1,a1,r2,g2,b2,a2…]就是每个像素点的rgba值， data.length为索取的像素的数量。 取得了像素信息之后就能够对每个像素进行处理。实现各种复杂的操 作，包括人像识别，图像蒙版等，示例中可以通过该方法获得 canvas内图像的RGB通道和Alpha通道。 通过putImageData可以讲处理后的图像呈现到 画布上。var imagedata =ctx.getImageData(x,y,w,h); for(var i=0,n =imagedata.data.i&n;i+=4){ if (a==2) imagedata.data[i+0] =imagedata.data[i+1] = imagedata.data[i+2]; if(a==0) imagedata.data[i+1] =imagedata.data[i+2] = imagedata.data[i+0]; if(a==1) imagedata.data[i+0] =imagedata.data[i+2] = imagedata.data[i+1]; if(a==3) imagedata.data[i+1]=imagedata.data[i+2]=imagedata.data[i+0]=imagedata.data[i+3]; } ctx.putImageData(imagedata,x,y); }?? ?Js 存在安全性问题 本地不能实现需要上传到本地服务器示例Canvas基本动画? Canvas的动画是通过不停的擦除、重绘来 实现的。具体步骤如下：① 预先编写好用来绘图的函数，在该函数中先用 clearRect方法将画布整体或局部擦除。 ② 用setInterval方法设置动画时间间隔。 ③ 在比较复杂的情况下，我们也可以灾情处于重 回动画的当中插入当前绘制状态的保存与恢复 ，变成擦除、保存绘制状态、进行绘制、恢复 状态的过程。动画实例1跳动的小球（坐标改变）效果是小球简单的弹动。动画很简单，不牵扯 画布的操作，所以不存在保存状态和恢复状态。setInterval(ball,20); ctx.clearRect(0,0,300,230); ctx.drawImage(Ball,p,i); //ctx.fillRect(p,i,50,50);用两种方式实现了小球，黄色为直接 用的png图片，绿色为用渐变填充的。 两种方式实现的方式是相同的，都是 通过不停在不同位置删除、绘制图形 或图像来达到动画的效果。 另外我们也可以通过移动画布来实现 小球的移动。给小球X方向和Y方向各三个状态， 向下（右）、向下（右）撞到下（右） 面“墙壁”后、以及再次撞到上（左） 面“墙壁”，当然一定有更好的实现 方式。示例动画实例2跳动的小球（移动画布）所实现效果与上例完全一样，但是实现的时候 原理却完全不一样，这个动画我们通过移动画 布来让小球移动了，图中的黑色线条便是画布 的边缘。ctx.clearRect(-300,-230,600,600); /*相比移动小球我们每次要擦除更多的画布，因为上 次小球出现的位置现在已经不在我们的画布上了。*/ ctx.drawImage(Ball,0,0);/*我们把球放在了 (0,0)位置，之后便没有再对他进行处理。*/ ctx.translate(movex,movey);/*但是，我们 对画布进行了移动，注意，我们用了两个参数 但是这两个参数我们只修改参数的正负，不进行 累加，因为画布每次平移之后，只要不进行保存 恢复操作，那么他的移动是基于移动后的位置的。*/ p+= i+= /*但是我们要引入两个变量来记录画布已经相对 原点的位置，因为我们要据此来检测碰撞*/我们上次给了小球两组状态， 现在这两组状态我们要给画布， 所谓“撞墙”也就变成了画布 在x或y方向上是否已经移动了 画布的宽或高。示例
更多搜索：
赞助商链接
All rights reserved Powered by
文档资料库内容来自网络，如有侵犯请联系客服。