Canvas 绘制图形、图像、文字

绘制图形

绘制矩形

//绘制矩形fillRect|strokeRect(位置x，位置y，宽度，高度)
context.strokeRect(150, 50, 100, 100) // 路径
context.fillRect(350, 50, 100, 100) // 填充

context.beginPath()
context.rect(150, 50, 100, 100)
context.stroke() // 显示路径
context.closePath()

context.beginPath()
context.rect(350, 50, 100, 100)
context.fill() // 填充颜色
context.closePath()

// 清除模式
context.fillRect(0, 0, 600, 400)

绘制圆弧

圆弧

// context.arc(圆心x,圆心y,半径,开始的角度,结束的角度)
// 顺时针false 逆时针true 默认值false
context.arc(300, 200, 50, 0, Math.PI / 2, false)
context.fill()

绘制笑脸

context.beginPath()
context.arc(300, 200, 150, 0, Math.PI * 2)
context.stroke()
context.closePath()

// 嘴巴
context.beginPath()
context.arc(300, 200, 100, 0, Math.PI)
context.stroke()
context.closePath()

// 左眼
context.beginPath()
context.arc(250, 150, 20, 0, Math.PI * 2)
context.stroke()
context.closePath()

// 右眼
context.beginPath()
context.arc(350, 150, 20, 0, Math.PI * 2)
context.stroke()
context.closePath()

arcTo()方法主要用来绘制圆弧，需要给出两个点的坐标，当前点与第一个点形成一条直线，第一个点与第二个点形成另一条直线，然后画出与这两根直线相切的弧线。

context.beginPath()
context.moveTo(0, 0)
context.arcTo(50, 50, 100, 0, 25)
context.lineTo(100, 0)
context.stroke()

提示

上面代码中，arcTo()有 5 个参数，前两个参数是第一个点的坐标，第三个参数和第四个参数是第二个点的坐标，第五个参数是半径。然后，(0, 0)与(50, 50)形成一条直线，然后(50, 50)与(100, 0)形成第二条直线。弧线就是与这两根直线相切的部分。

绘制线段

context.beginPath()
context.moveTo(100, 300)
context.lineTo(300, 300)
context.lineTo(200, 150)
context.lineTo(100, 300)
context.stroke()
context.closePath()

// 两条线段使用fill()时会填充为三角形
context.beginPath()
context.moveTo(300, 300)
context.lineTo(500, 300)
context.lineTo(400, 150)
// context.lineTo(300, 300);
context.fill()
context.closePath()

绘制图像

三种绘制图片的的方式

context.drawImage(image, dx, dy)
context.drawImage(image, dx, dy, dWidth, dHeight)
context.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

// 获取图片
let img = new Image()
img.src = './tx.png'
img.onload = function () {
  // 第一种绘制图片的方式
  // 参数1图片对象，参数2、3将图片渲染到画布的水平和垂直位置
  // context.drawImage(img, 0, 0);

  // 第二种绘制图片的方式
  // 把图片缩放到600*400
  // context.drawImage(img, 100, 0, 400, 400);

  // 第三种绘制图片的方式
  /*
    裁剪图片
    img参数后面四个参数分别为原图片上面要裁剪的起点位置和终点位置
           最后四个参数分别为画布的位置和要渲染的矩形宽高
*/
  context.drawImage(img, 300, 0, 600, 400, 0, 0, 600, 400)
}

绘制文本

以下方法和属性用于绘制文本。

CanvasRenderingContext2D.fillText()：在指定位置绘制实心字符。
CanvasRenderingContext2D.strokeText()：在指定位置绘制空心字符。
CanvasRenderingContext2D.measureText()：返回一个 TextMetrics 对象。
CanvasRenderingContext2D.font：指定字型大小和字体，默认值为 10px sans-serif。
CanvasRenderingContext2D.textAlign：文本的对齐方式，默认值为 start。
CanvasRenderingContext2D.direction：文本的方向，默认值为 inherit。
CanvasRenderingContext2D.textBaseline：文本的垂直位置，默认值为 alphabetic。

// 文字，大小/字体
context.font = '100px Microsoft YaHei'
// 填充渲染文字
// context.fillText(文本, x, y, 绘制文字最大宽度);
// context.fillText("Text", 50, 100, 100);
// context.strokeText("Text", 200, 100, 100);

// 文本对齐选项
// context.textAlign='start | left | center | right |end';
context.textAlign = 'center'
// 文本基线对齐
// context.textBaseline='top | hanging | middle | alphabetic | ideographic | bottom';
context.textBaseline = 'middle'
// 文本方向
// context.direction='inherit | ltr | rtl';
// context.direction='rtl';

// 预测量文本宽度
// let text = context.measureText('Hello!');
// console.log(text);

context.strokeText('Hello!', 300, 200)

context.arc(300, 200, 5, 0, Math.PI * 2)
context.fill()

Canvas 绘制图形、图像、文字 ​

绘制图形 ​

绘制矩形 ​

绘制圆弧 ​

绘制线段 ​

绘制图像 ​

绘制文本 ​

Canvas 绘制图形、图像、文字

绘制图形

绘制矩形

绘制圆弧

绘制线段

绘制图像

绘制文本