carvans——文本以及变换

文本属性

1. 文字的属性有三种
   • 字体：font
   • 水平对齐： textAlign
   • 垂直对齐：textBaseline

canvas 里的font 属性和css 的font 属性是一样的，它可以设置文本的粗细、字号、字体等。如：

• css 设置字体：p{font:bold 18px serif;}
• canvas 设置字体：ctx.font=‘bold 18px serif’

textAlign 水平对齐方式

下方文字的x 位置都是一样，都是垂直虚线的x 位置，它们的textAlign 属性各不相同。

textBaseline 垂直对齐方式

canvas 图像

图像源

• 图像元素：< img >
• 视频元素：< video >
• canvas：< canvas >

在canvas中利用drawImage绘制图片

• 绘图 + 位移：drawImage(image, x, y)
  

• 绘图 + 位移 + 缩放：drawImage(image, x, y,width,height)
  

• 绘图 + 裁切 + 位移 + 缩放：drawImage(image, x1, y1,w1,h1,x2,y2,w2,h2)

在canvas中播放视频

要点：drawImage(video, x1, y1)

canvas 像素级操作

imageData 是什么
ImageData 是图片的数据化，它具备以下属性:

• data：Uint8ClampedArray [r,g,b,a, r,g,b,a, r,g,b,a, r,g,b,a]
• width：整数
• heidth：整数

注：Uint8ClampedArray 翻译过来是 8位无符号整型固定数组，其取值范围是[0,255]。若小于0，则为0，大于255，则为255。若为小数，则取整，取整的方法是银行家舍入。

怎么拿到imageData()

1. 直接建立ImageData() 对象（相当于自己新建了一张图片）。

• new ImageData()
  • new ImageData(width, height)
  • new ImageData(Uint8ClampedArray, width, height)
• ctx.createImageData()
  • ctx.createImageData(width, height)
  • ctx.createImageData(ImageData)

2. 获取canvas 的ImageData() 对象（可以以此原理获取真实图片的数据）

• ctx.getImageData(x, y, width, height)

理解 ImageData 中的像素集合和图像栅格的对应关系
ImageData 对象的属性：

• data：Uint8ClampedArray [0,1,2,3, 4,5,6,7,8,9,10,11,12,13,14,15]
  • width：2
  • heidth：2
    

遍历像素

• 逐像素遍历：每隔4 个数据遍历一次，简单快捷

for(let i=0;i<arr.length;i+=4){
        let r=data[i+0];
        let g=data[i+1];
        let b=data[i+2];
        let a=data[i+3];
        console.log(r,g,b,a)
}

• 行列遍历：基于行列遍历，可获取像素点的位置信息

 for(let y=0;y<h;y++){
       for(let x=0;x<w;x++){
            let ind=(y*w+x)*4;
            let r=data[ind];
            let g=data[ind+1];
            let b=data[ind+2];
            let a=data[ind+3];
            console.log(r,g,b,a)
        }
    }

灰度算法 ：
要点：灰度算法 const lm =0.299r + 0.587g + 0.114*b ;

canvas 变换

上下文对象的状态管理

上下文对象的状态是什么？

• 上下文对象的状态就是上下文对象的属性。比如描边颜色，填充颜色，投影，线条样式，变换信息…

上下文管理的方法

• 保存当前状态：save()
• 恢复上一次保存的状态：restore()

一般在我们绘制具备同一种样式的图形时，都会用save() restore() 将其包裹起来。这是为了避免当前的图形样式影响以后所要绘制的的图形样式。

状态的嵌套
a - save()
b - save()
restore() – b
restore() – a

变换

变换的本质是对canvas 坐标系的操作
变换有3个特性：

• 移动： translate(x,y)

• 旋转： rotate(angle)
  

• 缩放： scale(x,y)

扩展 - 矩阵变换
相对变换矩阵：transform(a, b, c, d, e, f)
绝对变换矩阵：setTransform(a, b, c, d, e, f)

• a,d ：x，y 轴向的缩放，默认为1
• c,b ：x，y 轴向的倾斜，默认为0
• e,f ：x，y 轴向的位移，默认为0

有变换的地方往往就有状态管理
对canvas 坐标系进行变换后，以后绘制的图形都会受这种变换影响。而我们有时会不想让其它图形受此影响，这样我们就需要用save() 和restore() 将变换方法和绘制图形的方法包裹起来。