canvas的使用及API梳理总结前言最近项目需要用到canvas，canvas的API又比较多，借此机会对canva

前言

最近项目需要用到canvas，canvas的API又比较多，借此机会对canvas做一个梳理汇总

介绍

定义

<canvas> 是 HTML5 新增的元素，可用于通过使用 JavaScript 中的脚本来绘制图形。例如，它可以用于绘制图形、制作照片、创建动画，甚至可以进行实时视频处理或渲染。

简单来说，canvas是画布，JavaScript是画笔

使用

我们经常用的Echarts大部分都是用canvas实现的，canvas还能用来开发HTML5的游戏，如果你想要炫酷的特效背景，也可以通过canvas实现。所以canvas的功能是非常强大的

创建

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Title</title>
   <style>
       #canvas {
           background: #000;
       }
   </style>
</head>
<body>
   <canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>

绘制

我们已经有canvas画板了，接下来就需要获取canvas上下文canvas.getContext(contextType, contextAttributes);

    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");

    context.beginPath();
    context.arc(200, 200, 50, 0, Math.PI * 2, true);
    context.closePath();
    context.fillStyle = 'rgb(255,255,255,.5)';
    context.fill();

到这里，我们就在宽高为500px的画板中，绘制了圆心坐标为200px、200px，半径为50px的白色小球

绘制路径

canvas提供了很多绘制API，上面介绍的是绘制圆形的，下面介绍绘制其他路径的API

方法	描述
`fill()`	填充路径
`stroke()`	描边
`arc()`	创建圆弧
`rect()`	创建矩形
`fillRect()`	绘制矩形路径区域
`strokeRect()`	绘制矩形路径描边
`clearRect()`	在给定的矩形内清除指定的像素
`arcTo()`	创建两切线之间的弧/曲线
`beginPath()`	起始一条路径，或重置当前路径
`moveTo()`	把路径移动到画布中的指定点，不创建线条
`lineTo()`	添加一个新点，然后在画布中创建从该点到最后指定点的线条
`closePath()`	创建从当前点回到起始点的路径
`clip()`	从原始画布剪切任意形状和尺寸的区域
`quadraticCurveTo()`	创建二次方贝塞尔曲线
`bezierCurveTo()`	创建三次方贝塞尔曲线
`isPointInPath()`	如果指定的点位于当前路径中，则返回 true，否则返回 false

具体的绘制可以参考canvas官方文档，不过大致的思路流程和上面介绍的类似

总结

以上只是对canva的基本使用和API做简单的介绍，canvas可以绑定鼠标做很多炫酷的特效，如果做特效可以先了解requestAnimationFrame这个API