Canvas学习

Canvas简介

• <canvas> 可以用于绘制图表、制作图片构图或者制作简单的 (以及不那么简单的) 动画
• <canvas> 是一个 HTML 元素，它同时也是一个画板，可以使用脚本 (通常为 JavaScript ) 来绘制图形

Canvas创建

<canvas id="myCanvas" width="200" height="100"></canvas>

标签属性

属性	说明
id	指定画布 <canvas> 的唯一名称
width	指定画布 <canvas> 的宽度，默认为 300px
height	指定画布 <canvas> 的高度，默认为 150px
style	指定画布 <canvas> 的样式

Canvas绘制

• <canvas> 元素本身是没有绘图能力的，所有的绘制工作必须在 JavaScript 内部完成
• <canvas> 分两种
  • 一个是 2d 就是平面绘图
  • 一个是 webgl 也就是 3D 立体绘图，因为 webgl 还未完全被主流的浏览器所支持，所以我们一般使用 2d 绘图

获取 2d 渲染上下文

• getContext()方法---获取上下文

  • canvas.getContext(contextType, contextAttributes);

  • 参数	说明
    contextType	下文类型，一个字符串，值可以是 2d 、webgl
    contextAttributes	创建上下文时设置属性，一个字典对象，默认为空即可

Canvas矩形 ⭐⭐

绘制矩形---strokeRect()

• strokeRect(x, y, width, height)方法

• 参数	说明
  x	起始点 x 坐标
  y	起始点 y 坐标
  width	矩形长度
  height	矩形高度

注意：

`strokRect()可以被多次调用`----画框
  const canvas=document.querySelector("#canvas");
    let cxt=canvas.getContext("2d")
    cxt.strokeRect(50,50,100,100);//x坐标点,y坐标点，宽度，高度
    cxt.strokeRect(100,100,50,50);

绘制图形示例

填充矩形---fillRect()

• strokeRect(x, y, width, height)方法

• 默认填充是黑色，可以指定颜色

• 参数	说明
  x	起始点 x 坐标
  y	起始点 y 坐标
  width	矩形长度
  height	矩形高度

绘制图形示例

填充样式--fillStyle

• ctx.fillStyle 属性用于设置填充(绘制图形)颜色或者样式,默认是黑色

  • fillStyle设置好填充颜色后调用填充方法后才能看见
  • fillStyle一旦设置后，接下来的颜色就设置为主，想要修改重新设置fillStyle方法的填充颜色

• 语法

  • ctx.fillStyle = color;//颜色
    

  • ctx.fillStyle = gradient;渐变色
    

  • ctx.fillStyle = pattern;//绘画对象。图片或画布
    

• 值	说明
  color	一个字符串颜色值，可以是任意的 CSS 颜色值，比如 red 、#000 等
  gradient	一个渐变，是一个 CanvasGradient 对象 ( 线性渐变或放射性渐变)，我们后面会讲
  pattern	一个绘画对象，是一个 CanvasPattern 对象 ( 可重复的图片)，可以是一张图片，或者另一个画布

Canvas绘制路径⭐⭐⭐

绘制路径为连接绘制点线组成任意图形

• 绘制流程

  • 开始准备画线---beginPath()
  • 确定起始点并移动到该点位置---move(x0,y0)
  • 然后确定好下一个点的位置（可多次调用画多个点）---lineTo(x1,y1)
  • 最后将图形闭合(可选,不选择就不会闭合)---closePath()

• 方法	说明
  ctx.beginPath()	开始一个新路径的
  ctx.move(x,y)	将新路径的起始点移动到坐标 (x，y)
  ctx.lineTo(x,y)	使用直线连接子路径的终点到坐标(x，y)，并不会真正地绘制 为什么说是终点，如果不再继续调用 lineTo() 那么它就是终点了不是
  ctx.closePath()	将画笔返回到当前子路径起始点
  ctx.stroke()	根据当前的画线样式，绘制当前或已经存在的路径

路径绘制矩形--rect()

• rect(x, y, width, height)方法

• 参数	说明
  x	起始点 x 坐标
  y	起始点 y 坐标
  width	矩形长度
  height	矩形高度

路径绘制弧--arcTo()

• ctx.arcTo(x1, y1, x2, y2, radius);

• 参数	说明
  x1	第一个控制点的 x 轴坐标
  y1	第一个控制点的 y 轴坐标
  x2	第二个控制点的 x 轴坐标
  y2	第二个控制点的 y 轴坐标
  radius	圆弧的半径

注意：

1. arcTo() 方法绘制出来的也是虚拟路径，需要使用 stroke() 实体化
2. arcTo也要确定开始绘制位置

 ctx.beginPath();
 ctx.moveTo(50, 50);
 ctx.arcTo(50, 300, 120, 300, 20 * Math.PI);
 ctx.stroke();

路径绘制圆弧--arc()

• arc(圆心x,圆心y,半径r,开始弧度，结束弧度，是否顺时针) 用于绘制圆弧，圆弧路径的圆心在 (x, y) 位置，半径为 r ，根据anticlockwise （默认为顺时针）指定的方向从 startAngle 开始绘制，到 endAngle 结束

• 参数	说明
  x	圆弧中心（圆心）的 x 轴坐标
  y	圆弧中心（圆心）的 y 轴坐标
  radius	圆弧的半径
  startAngle	圆弧的起始点， x轴方向开始计算，单位以弧度表示
  endAngle	圆弧的终点， 单位以弧度表示
  anticlockwise	可选， bool 类型 ，如果为 true，逆时针绘制圆弧，反之，顺时针绘制，默认为 false

示例:

 // 绘制路径圆弧
  ctx.beginPath();
  ctx.arc(600, 50, 50, 30 * Math.PI / 180, 75 * Math.PI / 180);//起始点为（600，50）且顺时针30度到75度的半径为50px圆弧
  ctx.stroke();

//atx.arc(600,50,50,0,2*Math.PI/180)为一个圆

路径绘制填充--fill()

• fill() 方法根据当前的填充样式，填充当前或已存在的路径，可选的填充方法有非零环绕或者奇偶环绕

  • ctx.fill();
    ctx.fill(fillRule)
    ctx.fill(path, fillRule)
    

• 参数	说明
  fillRule	一种算法，决定点是在路径内还是在路径外，允许的值： "nonzero": 非零环绕规则， 默认的规则 "evenodd": 奇偶环绕规则
  path	可选，需要填充的 Path2D 路径

路径线段厚度-- lineWidth属性

• lineWidth 属性用于设置线段厚度的属性 ( 即线段的宽度 )
  • 当给属性赋值时， 0、 负数、 Infinity 和 NaN 都会被忽略；除此之外，都会被赋予一个新值

路径线段样式--setLineDash()

• Canvas 绘制路径时默认使用的实线(solid)，如果我们想要绘制虚线，那么就要使用 setLineDash() 方法

• setLineDash(segments)

  • 参数	说明
    segments	一个数组。一组描述交替绘制线段和间距（坐标空间单位）长度的数字

线段样式示例

1. 设置segment为[1,1]---隔一个显示

   

2. 设置 segment 为 [1,2] --隔两个显示

   

3. 设置为奇数个数，比如 [1,2,3]，Canvas 会把数组复制一遍变成 [1,2,3,1,2,3]

   

   黑 白白 黑黑黑 白 黑黑 白白白
   1  2     3   1   2    3
   

路径线段末端样式--lineCaps属性

• lineCap 用户设置如何绘制每一条线段末端的属性。有3个可能的值，分别是：butt, round and square。默认值是 but

• 值	说明
  butt	线段末端以方形结束
  round	线段末端以圆形结束
  square	线段末端以方形结束，但是增加了一个宽度和线段相同，高度是线段厚度一半的矩形区域

Canvas渐变

创建渐变--CanvasGradient 对象

• 用于描述一个渐变，可以是线性渐变或者放射渐变

• `canvasGradilent这里只是描述canvas渐变,并不是指代Canvas实例方法，而是泛指下面两种渐变---线性渐变,放射渐变`
  

• CanvasGradient只有一种方法addColorStop()

方法	说明
createLinearGradient(x1, y1, x2, y2)	线性渐变
createRadialGradient(x1, y1, r1, x2, y2, r2)	放射渐变

var c   = document.getElementById("canvas-1");
var ctx = c.getContext("2d");

ctx.lineWidth = 8
var gradient = ctx.createLinearGradient(0,0,200,0);
gradient.addColorStop(0,"green");
gradient.addColorStop(1,"blue");
ctx.fillStyle = gradient;
ctx.fillRect(10,10,200,100);

效果

线性渐变Linear

放射渐变Radial

Canvas文字

canvas纹理

创建createPattern()

• ctx.createPattern() 方法用于创建一个纹理，可以使用图像或者另一个 Canvas

• ctx.createPattern(image, repetition);
  

• 参数

  • image --图像源

    1.<img> //img标签
    2.<video> //视频标签
    3.<canvas> //另一个canvas
    4.CanvasRenderingContext2D,
    5.ImageBitmap //位图图形
    6.ImageData //构造函数
    7.Blob //流文件
    

  • repetition --重复图像

    值	说明
    repeat	水平和垂直都重复，默认
    repeat-x	水平重复
    repeat-y	垂直重复
    no-repeat	不重复