View Code

draw15(id) { 3 var canvas = document.getElementById(id); 4 if (canvas == null) ; 6 var context = canvas.getContext("2d"); 7 context.fillStyle = "black"; 8 context.fillRect(0, 0, 400, 300); 9 image = new Image(); 10 image.onload = function () { 11 drawImg(context,image); 12 } 13 image.src = "Image/html5.jpg" 14 } drawImg(context, image) { create5StarClip(context); 21 context.drawImage(image,0,0); 22 } createCircleClip(context) { 25 context.beginPath(); 26 context.arc(200, 150, 100, 0, Math.PI * 2, true); 27 context.closePath(); 28 context.clip(); 29 } create5StarClip(context) { 32 var n = 0; 33 var dx = 200; 34 var dy = 135; 35 var s = 150; 36 context.beginPath(); 37 var x = Math.sin(0); 38 var y = Math.cos(0); 39 var dig = Math.PI / 5 * 4; 40 for (var i = 0; i < 5; i++) { 41 var x = Math.sin(i * dig); 42 var y = Math.cos(i * dig); 43 context.lineTo(dx + x * s, dy + y * s); 44 } 45 context.closePath(); 46 context.clip(); 47 }

像素处理：

获取像素颜色数组： 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...]

设置像素颜色：context.putImageData(imagedata,dx,dy,dirtyX,dirtyY,dirtyWidth,dirtyHeight)
    对imagedata数组中的各个像素的r、g、b、a值进行修改，再调用putImageData方法进行绘制

        imagedata:修改后的imagedata

        dx:重绘图像的起点横坐标（重绘的起点和原来的图像一致的话就会把原来的图形覆盖掉，看起来就像是原来的图像变成现在的图像一样）

        dy:重绘图像的起点纵坐标

        //以下可选参数，设置重绘的矩形范围，如果缺省，默认会重绘所有的imegedata

        dirtyX:矩形左上角x轴坐标

        dirtyY:矩形左上角y轴坐标

        dirtyWidth:矩形长度

        dirtyHeight:矩形高度

View Code

1 function draw16(id) { 2 var canvas = document.getElementById(id); 3 if (canvas == null) ; 5 var context = canvas.getContext("2d"); 6 context.fillStyle = 'red' context.fillRect(250,250,150,50); 9 var image = new Image(); 10 image.src = "Image/html5.jpg"; 11 12 image.onload = function () { context.drawImage(image, 0, 0,200,200); imagedata = context.getImageData(0, 0, 400, 300); (var i = 0, n = imagedata.data.length; i < n; i += 4) { imagedata.data[i + 1] = 255 - imagedata.data[i + 1]; imagedata.data[i + 2] = 255 - imagedata.data[i + 2]; } 28 context.putImageData(imagedata, 0, 0); 29 } 30 }

绘制文字

填充文字：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

     var length=context.measureText(text):计算字体长度(px)那么能不能计算高度啊，很遗憾，不能