canvas学习二

一、绘制文字

【1】font字体属性

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

css 设置字体：p{ font: bold 15px 微软雅黑; }

canvas 设置字体：ctx.font = 'bold 15px 微软雅黑'

【2】textAlign水平对齐

textAlign 设置或返回文本内容的当前对齐方式

start：默认, 文本在指定的位置开始

end：文本在指定的位置结束

center：文本的中心被放置在指定的位置

left：文本左对齐

right：文本右对齐

【3】textBaseline垂直对齐

textBaseline 设置或返回在绘制文本时使用的当前文本基线

alphabetic：默认，文本基线是普通的字母基线

top：文本基线是 em 方框的顶端

hanging：文本基线是悬挂基线

middle：文本基线是 em 方框的正中

ideographic：文本基线是 em 基线

bottom：文本基线是 em 方框的底端

【4】文本绘制方法

填充文字： fillText(text, x, y, maxWidth)

描边文字： strokeText(text, x, y, maxWidth)

解释：

text：填充的文字

x y：坐标

maxWidth：文字最大宽度，该值小于文字宽度会自动缩小填充文字

【5】获取文字宽度方法

获取文字宽度：ctx.measureText(text)

【6】案例

二、绘制图片

【1】绘制图像的基本方式(绘图+位移)

语法：ctx.drawImage(img， x，y)

参数说明：

img：是绘制图片的dom对象

x y ：图片向右和向下位移坐标

【2】绘图+位移+宽高

语法：ctx.drawImage(img，x，y，width，height)

参数说明：

img：是绘制图片的dom对象

x y ：图片向右和向下位移坐标

width：绘制图片的宽度

height：绘制图片的高度

【3】绘图+位移+宽高+裁剪

语法：ctx.drawImage(img，sx，sy，swidth，sheight，x，y，width，height)

参数说明：

img：是绘制图片的dom对象

sx sy：裁剪的左上角坐标

swidth：裁剪图片的高度

sheight：裁剪的高度

x y ：图片向右和向下位移坐标

width：绘制图片的宽度

height：绘制图片的高度

【4】JavaScript建立图像源的方式

// 第一种
var img = document.getElementById('imgId');

// 第二种
let img = new Image(); //这个就是img标签的dom对象
img.src = '/images/test.gif';
img.alt = '文本信息';
img.onload = function() {
  //图片加载完成后，执行此方法
};

【5】案例

三、像素操作

【1】imageData是什么？

ImageData 是图片的数据化，是一个对象，它具备以下几个属性：

data：Uint8ClampedArray[r, g, b, a, r, g, b, a, r, g, b, a, r, g, b, a]

width：整数，ImageData的宽度

heidth：整数，ImageData的高度

Uint8ClampedArray 翻译过来是 8位无符号整型固定数组，每四个数组元素代表了一个像素点的rgba信息，每个元素数值取值范围是[0，255]。若小于0，则为0，大于255，则为255。若为小数，则取整，取整的方法是银行家舍入。

【2】获取imageData对象

方法：ctx.getImageData(x, y, width, height)

作用：用来获取canvas画布上指定矩形区域的像素数据

解释：

xy: 矩形的左顶点横纵坐标

width: 矩形的宽度

height: 矩形的高度

【3】imageData可以做什么？

我可以通过不同的算法，对ImageData 中的像素进行不同的处理。比如调整图片的色调，检测图像边缘，实现艺术效果，马赛克，人脸识别……

【4】案例

遍历图片像素，通过灰度算法对图片像素做处理使图片变成灰色调

四、变换

【1】缩放scale()

作用：scale()方法缩放当前绘图，更大或更小

语法：ctx.scale(scalewidth，scaleheight)

scalewidth : 缩放当前绘图的宽度 (1=100%， 0.5=50%，2=200%，依次类推)

scaleheight : 缩放当前绘图的高度 (1=100%，0.5=50%，2=200%，依次类推)

注意：缩放的是整个画布，缩放后，继续绘制的图形会被放大或缩小

【2】位移translate()

语法：ctx.translate(x, y)

x：添加到水平坐标（x）上的值

y：添加到垂直坐标（y）上的值

注意：发生位移后，相当于把画布的 0,0 坐标更换到新的 x,y 的位置，所有绘制的新元素都被影响。位移画布一般配合缩放和旋转等。

【3】旋转rotate()

作用：方法旋转当前的绘图

语法：context.rotate(angle)

angle：弧度（PI）

注意：参数是弧度（PI），如需将角度转换为弧度，请使用 degrees*Math.PI/180 公式进行计算

【4】绘制环境保存和还原

ctx.save() 保存当前环境的状态，可以把当前绘制环境进行保存到缓存中

ctx.restore() 恢复之前保存过的路径状态和属性，获取最近缓存的 ctx，一般配合位移画布使用

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