canvas

1. 面试题

1.1 canvas和svg的区别及使用场景

• canvas只支持两种形式的图形绘制：矩形和路径（由一些列点连成的线段）。所有其他类型的图形都是通过一条或者多条路径组合而成的。

  1.2 canvas一个像素所占的空间大小

  1.3 canvas优化

  1.4 问canvas绘图的流程，用canvas怎么画一个立方体？坐标自定，怎么给每个面涂色？

  1.5 是否用过canvas 图片污染怎么处理

  1.6 canvas 压缩图片如何做的

  1.7 canvas 图片操作，如何转 base64

  1.8 看见你会canvas，怎么做的（面向对象、绘制、清除、动画帧）

  1.9 canvas写字怎么写（touchstart开始，touchmove计算这次和上次鼠标坐标差绘制，touchend防止跳线设置null）

  1.10canvas画图（面向对象、清理画布、绘制、碰撞检测）

  1.11border-radius用canvas实现，而且缩放不能是椭圆，其中一个角还要有阴影。用到微积分

  1.12为什么 canvas 的图片为什么过有跨域问题

  1.13我现在有一个 canvas，上面随机布着一些黑块，请实现方法，计算 canvas 上有多少个黑块。

  2. canvas基础知识

  2.1 canvas使用步骤

• 获取DOM对象

• 访问绘画上下文

  2.2 HTMLCanvasElement.getContext()

  HTMLCanvasElement.getContext()方法用来获得渲染上下文和它的绘画功能以及返回canvas的上下文，如果上下文没有定义则返回null。

  var ctx = canvas.getContext(contextType);
  var ctx = canvas.getContext(contextType, contextAttributes);

  2.3 绘制矩形

  2.3.1 绘制矩形的方法

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

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

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

  2.4 绘制路径

  图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。一个路径，甚至一个子路径，都是闭合的。

  2.4.1 绘制路径步骤

• 创建路径起点

• 使用画图命令去画出路径
• 把路径封闭
• 一旦路径生成，就能通过描边或填充路径区域来渲染图形

2.4.2 需要的函数

• beginPath() 新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径
• closePath() 闭合路径之后图形绘制命令又重新指向到上下文中
• stroke() 通过线条来绘制图形轮廓

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

  2.4.3 圆弧

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

x, y 为绘制圆弧所在圆上的圆心坐标。radius 为半径。startAngle 以及 endAngle 参数用弧度定义了开始以及结束的弧度。这些都是以x轴为基准。参数anticlockwise 为一个布尔值。为true时，是逆时针方向，否则为顺时针方向。

注意：arc() 函数中表示角的单位是弧度，不是角度。角度与弧度的js表达式：弧度=(Math.PI/180)*角度。

点击查看【codepen】

2.4.4 扇形

点击查看【codepen】

3. 参考文章

3.1 Canvas(3)—-绘制饼状图

写的不错，demo丰富。为了绘制饼图找到的这篇文章。