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,