H5新特性：canvas学习2

1.canvas绘制文本

①canvas绘制文本需要用到的两个方法：fillText()  strokeText()

• 参数一：text 文本内容  

• 参数二：x 文本的起始x轴坐标  

• 参数三：y 文本的起始y轴坐标  

• 参数四：maxWidth：可选参数，文本在画布上的最大宽度，如果指定了该值，文本宽度超出的话会自动水平缩放

//1.fillText('xxx',x,y,maxWidth)  
cxt.fillText('前端要分享', 50, 50);
//2.strokeText('xxx',x,y,maxWidth)
cxt.strokeText('前端要分享', 50, 100);

②在绘制文本之前，可以给文本设置一些样式

ctx.font： 绘制文本时可设置文本的字体样式，默认字体样式是 10px sans-serif

ctx.font = "48px serif"

ctx.textAlign：绘制文本时设置文本的水平方向的对齐方式，默认是左对齐，即文本在坐标点右侧，它的值有：

• left：文本在坐标点点右侧，坐标点在文本左侧

• right：文本在坐标点左侧侧

• center：文本中间位置在坐标点

• start：同left

• end：同right

ctx.textBaseline：绘制文本时设置文本基线，决定文本垂直方向的对齐方式，默认是alphabetic，它的值有：

• top：基线在文本的顶部

• hanging：基线是悬挂基线

• middle：基线在文本中间

• alphabetic：基线是标准的字母基线

• bottom：基线在文本的底部

2.canvas绘制圆弧

①绘制圆弧可以使用arc()方法，以(x,y)坐标点为圆心，绘制指定半径的的圆或圆弧

arc(x,y,r,startAngle,endAngle)

• x：圆心点x轴坐标

• y：圆心点y轴坐标

• r：圆弧半径

• startAngle：圆弧的起始弧度位置，单位以弧度表示 Math.PI

• endAngle：圆弧的终止弧度位置，单位以弧度表示 Math.PI

• directron：决定圆弧绘制的顺序 默认 false 顺时针旋转。 true 逆时针旋转。

求圆上点的坐标：

const x = midpointX + radius*Math.cos(angle*Math.PI/180)
const y = midpointY + radius*Math.sin(angle*Math.PI/180)

3.canvas绘制图像

1.方法：drawImage()  

2.将图像绘制在画布上，要等img加载完后再调用drawImage()方法，监听img的load事件，在load事件处理程序中调用drawImage()。

// 绘制图片的方法：drawImage(img,x,y)
//1.将图片原封不动绘制到画布上，有三个参数：参数一: img图片； 参数二：x 图片x轴位置； 参数三：y 图片y轴位置
const img = new Image();
img.src = './imgs/1.jpeg'

//图片加载时的函数
img.onload = function() {
   //绘制图片
   cxt.drawImage(img, 50, 50)
}

3.drawImage()可以接收不同的参数

①三个参数：drawImage(img,x,y)

img: 目标图片    x,y:图片的位置  

②五个参数：drawImage(img,x,y,width,height)

img：目标图片  x,y：图片的位置  width,height：设置图片的大小

//2.将图片按照特定的大小绘制到画布上：img(目标图片) x,y(图片位置) width,height(图片特定大小)
const img1 = new Image();
img1.src = './imgs/1.jpeg';

img1.onload = function() {
     cxt.drawImage(img1, 360, 50, 150, 150)
}

③九个参数：drawImage(img,sourcex,sourcey,souceWidth,souceHeight,x,y,width,height) 常用于绘制雪碧图  

img(目标图片) sourcex,sourcey(图片截取位置) souceWidth,souceHeight(图片截取大小) x,y(绘制图片位置) width,height(图片的大小=截取的图片大小)

//3.雪碧图截取，九个参数：img(目标图片) sourcex,sourcey(图片截取位置) souceWidth,souceHeight(图片截取大小) x,y(绘制图片位置) width,height(图片的大小=截取的图片大小)
const img2 = new Image();
img2.src = './imgs/2.jpeg';

img2.onload = function() {
     cxt.drawImage(img2, 0, 0, 195.5, 196, 50, 360, 195.5, 196)
}

4.canvas状态的保存和恢复

1.方法：save()和restore()

save()：用于状态保存，无参数；Canvas状态存储在栈中，每当save()方法被调用后，当前的状态就被推送到栈中保存。

restore()：用于状态恢复，无参数；每一次调用 restore 方法，上一个保存的状态就从栈中弹出，所有设定都恢复(类似数组的 pop())。

5.canvas画布变形

①canvas画布位移: translate(x,y) 可以改变坐标系的位移  

x,y：表示移动后的坐标原点的位置

cxt.translate(100, 100) //将坐标系原点的位置从(0,0)变为(100,100)

②canvas画布旋转：rotate(angle)  angle是弧度  将1弧度转换为角度：angle*Math.fllor(1)/180

cxt.fillStyle = 'blue'
cxt.rotate(1) //cxt.rotate(angle*Math.floor(1)/180)
cxt.fillRect(0, 0, 100, 100)

③canvas画布的缩放：scale(x,y)  x,y:分别对应x,y轴放大或者缩小的倍数  缩放的本质是画布的缩放

cxt.fillStyle = 'blue';
cxt.scale(2, 2)
cxt.fillRect(100, 100, 100, 100)