html5学习笔记之五（扩展图形标记）

看视频，做笔记：

1.字体信息

context.font = [CSS font property]

属性有：font-style、font-variant、font-size、font-family，用法如下：

context.font = [font-style font-variant font-weight font-size font-family]

只有font-size和font-family是必须指定的，如果指定的字体找不到则使用默认字体，也可以指定网络路径字体（从可靠性和安全性上考虑，不建议如此做）如：

@font-face{font-family:Scriptina; src:url('fonts/scriptina.ttf)}

2.水平对齐方式

textAlign属性用于判断水平对齐方式

context.textAlign = [left | right | center | *start | end ]

修改浏览器字体排列方向：document.dir = [ *ltr | rtl ] //文档是以左对齐方式还是以右对齐方式开始

3.垂直对齐方式

context.textBaseline = [ top | middle | *alphabetic | bottom | hanging | ideographic ]

4.绘制文字

类似于绘制图形，首先fill，然后stroke：

context.fillText(text, x, y, maxwidth);

context.strokeText(text, x, y, maxwidth);

测量文字宽度：

TextWidth = context.measureText(text).width;

5.内嵌图像

drawImag可以绘制图像(有三种方式)：

context.drawImag(imag, dx, dy)

context.dramImage(imag, dx, dy, dw, dh)

context.dramImage(imag, sx, sy, sw, sh, dx, dy, dw, dh) // 大图中嵌套小图(dx,dy,dw,dh)为原图中要切的图片，(sx,sy,sw,sh)为该切出的图片要贴的地方

例子：

调整图片加载尺寸：

image.onload = function(){context.draw.Image(image,0,0,600,400);};

选择一部分区域贴到目标区域

image.onload = function(){ context.drawImage(image, 0, 0); context.drawImage(image, 620, 300, 300, 375, 390, 10, 200, 250);};

6.绘制像素

getImageData(), putImageData(),createImageData()等函数，可以实现各种滤镜效果

ImageData=context.getImageData(0, 0, canvas.width, canvas.height);将区域的像素放到数组ImageData中

Image对象的属性：ImageData.width、ImageData.height、ImageData.data等，例：

for(var i = 0; i < ImageData.data.length; i+=4){

var r = ImageData.data[i];

var g= ImageData.data[i+1];

var b = ImageData.data[i+2];

var a = ImageData.data[i+3];

alert(r + " " +g + " " + b + " " + a);

}

使用putImageData可以回写像素，例：

for(var i = 0; i < ImageData.data.length; i+=4){

ImageData.data[i] = parseInt(Math.random()*255);

ImageData.data[i+1] = parseInt(Math.random()*255);

}

context.putImageData(ImageData, dx, dy, [ dirtyX, dirtY, dirtyWidth, dirtyHeight ] ); //开始的坐标，长宽高（可选）

创建ImageData：

var imagedata = context.createImageData(2, 2); //2*2的数组

……

context.putImageData(imagedata, 0, 0);//回显，就可以显示了

7.合成影像

图形重叠时绘制方法(多种模式以供选择)：context.globalCompositeOperation = 'source-over'; //覆盖模式

8.createPattern()类似于drawimage()方法：context.createPattern(image, repetition)

 

http://v.youku.com/v_show/id_XMzc4OTI4OTgw.html