canvas学习笔记-基础

基础

1.canvas是一个可以使用脚本来绘制图形的html元素，可以用于绘制图表、制作图片构图或者制作简单的动画;

2.canvas默认大小为300px*150px;

3.只有两个属性-----height和width;

4.支持canvas的浏览器将会忽略在容器中包含的内容，并且只是正常渲染canvas;不支持的将会显示包含在容器之中的内容;

5.canvas起初是空白的。为了展示，首先脚本需要找到渲染上下文，然后在它的上面绘制。canvas 元素有一个叫做 getContext()的方法，这个方法是用来获得渲染上下文和它的绘画功能。

绘制矩形

fillRect(x, y, width, height)绘制一个填充的矩形

strokeRect(x, y, width, height)绘制一个矩形的边框

clearRect(x, y, width, height)清除指定矩形区域，让清除部分完全透明。

绘制路径

图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。

首先，你需要创建路径起始点。然后你使用画图命令去画出路径。之后你把路径封闭。一旦路径生成，你就能通过描边或填充路径区域来渲染图形。

以下是所要用到的函数：

beginPath()新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。

closePath()闭合路径之后图形绘制命令又重新指向到上下文中。

stroke()通过线条来绘制图形轮廓。

fill()通过填充路径的内容区域生成实心的图形

路径使用填充（fill）时，路径自动闭合

使用描边（stroke）则不会闭合路径

如果没有添加闭合路径closePath()到描述三角形函数中，则只绘制了两条线段，并不是一个完整的三角形。

绘制圆弧

arc(x, y, radius, startAngle, endAngle, anticlockwise)

画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。

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

根据给定的控制点和半径画一段圆弧，再以直线连接两个控制点。

贝塞尔曲线

quadraticCurveTo(cp1x, cp1y, x, y) 绘制二次贝塞尔曲线，cp1x,cp1y为一个控制点，x,y为结束点。

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) 绘制三次贝塞尔曲线，cp1x,cp1y为控制点一，cp2x,cp2y为控制点二，x,y为结束点。

path2D对象

Path2D对象已可以在较新版本的浏览器中使用，用来缓存或记录绘画命令，这样你将能快速地回顾路径

Path2D.addPath(path [, transform]） 添加了一条路径到当前路径（可能添加了一个变换矩阵）。

function draw() {
  var canvas = document.getElementById('canvas');
  if (canvas.getContext){
    var ctx = canvas.getContext('2d');

    var rectangle = new Path2D();
    rectangle.rect(10, 10, 50, 50);

    var circle = new Path2D();
    circle.moveTo(125, 35);
    circle.arc(100, 35, 25, 0, 2 * Math.PI);

    ctx.stroke(rectangle);
    ctx.fill(circle);
  }
}
复制代码

在这个例子中，我们创造了一个矩形和一个圆。它们都被存为Path2D对象，后面再派上用场。随着新的Path2D API产生，几种方法也相应地被更新来使用Path2D对象而不是当前路径。在这里，带路径参数的stroke和fill可以把对象画在画布上。

使用SVG paths

新的Path2D API有另一个强大的特点，就是使用SVG path data来初始化canvas上的路径。这将使你获取路径时可以以SVG或canvas的方式来重用它们。

var p = new Path2D("M10 10 h 80 v 80 h -80 Z");
复制代码

转载于:https://juejin.im/post/5d3015ade51d4510835e0355