文本

• font设置文本的字号，字体等属性
• textAlign 水平对齐
• textBaseline 垂直对齐
• 文本的绘制

//填充文字
fillText(text,x,y,maxWidth)
//描边文字
strokeText(text,x,y,maxWidth)
//获取文字宽度的方法
measureText(text)

图像

1. drawImage()

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

ctx.drawImage(
	img,
    //裁剪的位置，代码表示右半角
    width/2,height/2,
    //裁剪的尺寸，代码表示整个视图变为原来的四分之一
    width/2,height/2,
    //图像基于canvas的位置
    50,50,
    //缩放
    width,height
)

像素操作

1. ImageData

• 是图片的数据化
• data:Uint8ClampedArray[r,g,b,a,r,g,b,a,r,g,b,a,r,g,b,a]（8位无符号整型固定数组）
• width:整数
• height:整数

2. 遍历像素

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

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+0]
    	let g=data[ind+1]
    	let b=data[ind+2]
    	let a=data[ind+3]
        console.log(r,g,b,a)
    }
}

变换

1. 状态管理

• 管理上下文对象的状态，状态也就是属性，比如描边颜色，投影
• save()保存当前状态
• restore()恢复上一次保存的状态

2. 变换

• 移动 translate(x,y)
• 旋转 rotate(angle)
• 缩放 scale(x,y)