canvas学习——第一天

偷偷学习canvas第一天

之前看到有人用canvas做了很多好玩的动画以及简单的游戏，感觉很有意思，所以也来从头记录一下学习过程。

一、canvas 简介

​ 是 HTML5 新增的，一个可以使用脚本(通常为 JavaScript) 在其中绘制图像的 HTML 元素。它可以用来制作照片集或者制作简单(也不是那么简单)的动画，甚至可以进行实时视频处理和渲染。

​它最初由苹果内部使用自己 MacOS X WebKit 推出，供应用程序使用像仪表盘的构件和 Safari 浏览器使用。后来，有人通过 Gecko 内核的浏览器 (尤其是 Mozilla和Firefox)，Opera 和 Chrome 和超文本网络应用技术工作组建议为下一代的网络技术使用该元素。

​Canvas 是由 HTML 代码配合高度和宽度属性而定义出的可绘制区域。JavaScript 代码可以访问该区域，类似于其他通用的二维 API，通过一套完整的绘图函数来动态生成图形。

​ Mozilla 程序从 Gecko 1.8 (Firefox 1.5) 开始支持 , Internet Explorer 从 IE9 开始 。Chrome 和 Opera 9+ 也支持 。
从 菜鸟教程抄的，手动狗头

二、基本使用

<canvas>
	浏览器不支持时显示这里的内容
</canvas>

canvas默认 width为300、height 为 150，单位都是 px，最好是直接在canvas上设置宽高而不是css设置，使用 css 属性来设置宽高，但是如宽高属性和初始比例不一致，他会出现扭曲。

2.1 基本使用

2.11根据id获取canvas

const canvas = document.getElementById('canvas') // 获取canvas

2.12渲染上下文

if (canvas.getContext) { // 检测支持性
	const ctx = canvas.getContext('2d')
	} else {
	return
    }

检测支持性，如果支持的话渲染2d上下文

2.2 绘制形状

canvast 提供了三种方法绘制矩形：
fillRect(x,y,width,height):绘制一个填充的矩形；
strokeRect(x, y, width, height):绘制一个矩形边框；
clearRect(x, y, widh, height):清除指定的矩形区域，然后这块区域会变的完全透明。
x,y为相对于坐标原点的偏移值，width和height是绘制矩形的宽和高。
又是从 菜鸟教程拿的图：

例子：

 methods: {
    draw() {
      const canvas = document.getElementById('canvas') // 获取canvas
      if (canvas.getContext) { // 检测支持性
        const ctx = canvas.getContext('2d')
        ctx.fillRect(10, 10, 100, 100)
        ctx.strokeRect(20, 20, 100, 100)
        ctx.clearRect(20, 20, 20, 20)
      } else {
        return
      }
    }
  },
  mounted() {
    this.draw()
  }

2.3 绘制路径

因为canvas只支持矩形的直接绘制，所以对于其他图形只能通过绘制路径来代替，路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。

使用路径绘制图形需要一些额外的步骤：
1.创建路径起始点
2.调用绘制方法去绘制出路径
3.把路径封闭
4.一旦路径生成，通过描边或填充路径区域来渲染图形。

下面是需要用到的方法：
1.beginPath()
新建一条路径，路径一旦创建成功，图形绘制命令被指向到路径上生成路径
2.moveTo(x, y)
把画笔移动到指定的坐标(x, y)。相当于设置路径的起始点坐标。
3.closePath()
闭合路径之后，图形绘制命令又重新指向到上下文中
4.stroke()
通过线条来绘制图形轮廓
5.fill()
通过填充路径的内容区域生成实心的图形

2.31 绘制三角形

draw() {
      const canvas = document.getElementById('canvas') // 获取canvas
      if (canvas.getContext) { // 检测支持性
        const ctx = canvas.getContext('2d')
        // ctx.fillRect(10, 10, 100, 100)
        // ctx.strokeRect(20, 20, 100, 100)
        // ctx.clearRect(20, 20, 20, 20)
        ctx.beginPath()// 新建路径
        ctx.moveTo(50, 50) // 把起点设置为x=50px,y=50px
        ctx.lineTo(200, 50) // 从起点绘制线条到x=200,y=50处
        ctx.closePath() // 闭合路径
        ctx.stroke() // 绘制路径。
      } else {
        return
      }
    }

当只绘制了一条路径就闭合路径时，结果就是一条路径：

绘制两条路径：

draw() {
      const canvas = document.getElementById('canvas') // 获取canvas
      if (canvas.getContext) { // 检测支持性
        const ctx = canvas.getContext('2d')
        // ctx.fillRect(10, 10, 100, 100)
        // ctx.strokeRect(20, 20, 100, 100)
        // ctx.clearRect(20, 20, 20, 20)
        ctx.beginPath()// 新建路径
        ctx.moveTo(50, 50) // 把起点设置为x=50px,y=50px
        ctx.lineTo(200, 50) // 从起点绘制线条到x=200,y=50处
        ctx.lineTo(200, 100) // 从起点绘制线条到x=200,y=100处
        ctx.closePath() // 闭合路径
        ctx.stroke() // 绘制路径。
      } else {
        return
      }
    }

2.32绘制圆弧

canvas绘制圆弧有两种方法：

1. arc(x, y, r, startAngle, endAngle, anticlockwise)

x,y为圆的圆心位置，r为半径长度，startAngle为开始时的弧度，endAngle为结束时的弧度，anticlockwise为选择是否顺时针绘制。
其中startAngle和endAngle使用Math.PI表示，Math.PI为π，表示180°，比如创建一个半圆:

draw() {
      const canvas = document.getElementById('canvas') // 获取canvas
      if (canvas.getContext) { // 检测支持性
        const ctx = canvas.getContext('2d')
        // ctx.fillRect(10, 10, 100, 100)
        // ctx.strokeRect(20, 20, 100, 100)
        // ctx.clearRect(20, 20, 20, 20)
        ctx.beginPath()// 新建路径
        ctx.moveTo(50, 50) // 把起点设置为x=50px,y=50px
        // ctx.lineTo(200, 50) // 从起点绘制线条到x=200,y=50处
        // ctx.lineTo(200, 100) // 从起点绘制线条到x=200,y=200处
        ctx.arc(50, 50, 40, 0, Math.PI, false)
        ctx.closePath() // 闭合路径
        ctx.stroke() // 绘制路径。
      } else {
        return
      }
    }

2. arcTo(x1, y1, x2, y2, radius)

x1，y1表示第一个点，x2,y2表示第二个点，radius为半径，使用这个方法时，有三个点，一个是起始点，也就是moveTo(x,y)里设置的起始点以及第一个和第二个点，起始点和第一个点，第一个和第二个点相连组成的角，绘制的圆与这两条线相切。

 draw() {
      const canvas = document.getElementById('canvas') // 获取canvas
      if (canvas.getContext) { // 检测支持性
        const ctx = canvas.getContext('2d')
        // ctx.fillRect(10, 10, 100, 100)
        // ctx.strokeRect(20, 20, 100, 100)
        // ctx.clearRect(20, 20, 20, 20)
        ctx.beginPath()// 新建路径
        ctx.moveTo(50, 50) // 把起点设置为x=50px,y=50px
        // ctx.lineTo(200, 50) // 从起点绘制线条到x=200,y=50处
        // ctx.lineTo(200, 100) // 从起点绘制线条到x=200,y=200处
        // ctx.arc(50, 50, 40, 0, Math.PI, false)
        ctx.arcTo(100, 50, 100, 100, 50)
        ctx.closePath() // 闭合路径
        ctx.stroke() // 绘制路径。
      } else {
        return
      }
    }

3.贝塞尔曲线

看了贝塞尔曲线后感觉与上面的绘制弧线的第二个方法差不多，感觉菜鸟教程写的比较好，就放原链接了。