看视频,做笔记:
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)