类似图形组合，给出动态的切换平铺类型代码

function draw14(id) { //传统的平铺是用for循环来处理的，现在直接调用接口 var image = new Image(); var canvas = document.getElementById(id); if (canvas == null) return false; var context = canvas.getContext("2d"); var type = ["no-repeat", "repeat-x", "repeat-y", "repeat"]; var i = 0; image.src = "Image/wordslogo.jpg"; image.onload = function () { var interval = setInterval(function () { //每次转换平铺类型清空 context.clearRect(0, 0, 400, 300); if (i >= 4) { i = 0; } var ptrn = context.createPattern(image, type[i]); context.fillStyle = ptrn; context.fillRect(0, 0, 400, 300); i++; }, 1000); }; }

图像裁剪：context.clip()

context.clip()只绘制封闭路径区域内的图像，不绘制路径外部图像，用的时候 先创建裁剪区域 再绘制图像（之后绘制的图形都会采用这个裁剪区域，要取消这个裁剪区域就需要用到保存恢复状态）

以下是圆形和星形的裁剪代码

//图像裁剪 function draw15(id) { var canvas = document.getElementById(id); if (canvas == null) return false; var context = canvas.getContext("2d"); context.fillStyle = "black"; context.fillRect(0, 0, 400, 300); image = new Image(); image.onload = function () { drawImg(context,image); } image.src = "Image/html5.jpg" } function drawImg(context, image) { //圆形裁剪区 //createCircleClip(context) //星形裁剪区 create5StarClip(context); context.drawImage(image,0,0); } function createCircleClip(context) { context.beginPath(); context.arc(200, 150, 100, 0, Math.PI * 2, true); context.closePath(); context.clip(); } function create5StarClip(context) { var n = 0; var dx = 200; var dy = 135; var s = 150; context.beginPath(); var x = Math.sin(0); var y = Math.cos(0); var dig = Math.PI / 5 * 4; for (var i = 0; i < 5; i++) { var x = Math.sin(i * dig); var y = Math.cos(i * dig); context.lineTo(dx + x * s, dy + y * s); } context.closePath(); context.clip(); }

像素处理：

获取像素颜色数组： var imagedata=context.getImageData(sx,sy,sw,sh)

sx:cavas的x轴坐标点 sy:canvas的y轴坐标点 sw:距离x的宽度 sh:距离y的高度

可以利用context.getImageData返回的一个像素颜色数组，顺序是所取像素范围的从左到右，从上到下，数组的元素是（所有图形，包括图片，和绘制的图形）每个像素的rgba

[r1,g1,b1,a1,r2,g2,b2,a2…]

注：对于 ImageData 对象中的每个像素，都存在着四方面的信息，即 RGBA 值：
R - 红色 (0-255)
G - 绿色 (0-255)
B - 蓝色 (0-255)
A - alpha 通道 (0-255; 0 是透明的，255 是完全可见的)
数组存储于 ImageData 对象的 data 属性中。

设置像素颜色：
context.putImageData(imagedata,dx,dy,dirtyX,dirtyY,dirtyWidth,dirtyHeight)

imagedata:修改后的imagedata dx:重绘图像的起点横坐标（重绘的起点和原来的图像一致的话就会把原来的图形覆盖掉，看起来就像是原来的图像变成现在的图像一样） dy:重绘图像的起点纵坐标 //以下可选参数，设置重绘的矩形范围，如果缺省，默认会重绘所有的imegedata dirtyX:矩形左上角x轴坐标 dirtyY:矩形左上角y轴坐标 dirtyWidth:矩形长度 dirtyHeight:矩形高度

对imagedata数组中的各个像素的r、g、b、a值进行修改，再调用putImageData方法进行绘制

function draw16(id) { var canvas = document.getElementById(id); if (canvas == null) return false; var context = canvas.getContext("2d"); context.fillStyle = 'red' //在右下角画一个正方形 context.fillRect(250,250,150,50); var image = new Image(); image.src = "Image/html5.jpg"; image.onload = function () { //在左上角画一幅图片 context.drawImage(image, 0, 0,200,200); //实验证明imagedata取的是canvas所在范围画的图形，不止是图片 //不会取该区域内是空白的canvas的像素 var imagedata = context.getImageData(0, 0, 400, 300); //修改imagedata for (var i = 0, n = imagedata.data.length; i < n; i += 4) { imagedata.data[i + 0] = 255 - imagedata.data[i + 0]; //red; imagedata.data[i + 1] = 255 - imagedata.data[i + 1]; //green imagedata.data[i + 2] = 255 - imagedata.data[i + 2]; //blue //imagedata.data[i + 3] = 255 - imagedata.data[i + 3]; //a } context.putImageData(imagedata, 0, 0); } }

绘制文字

填充文字：context.fillText(text,x,y)

绘制文字轮廓 context.strokeText(text,x,y)

text:要绘制的文字

x:文字起点的x坐标轴

y:文字起点的y坐标轴

context.font:设置字体样式

context.textAlign:水平对齐方式

start、end、right、center

context.textBaseline:垂直对齐方式

top、hanging、middle、alphabetic、ideographic、bottom