canvas学习笔记-绘制矩形及路径(一)

2. 矩形

  • canvas只支持一种原生的图形绘制:矩形
  • 所有其他的图形的绘制都至少需要生成一条路径。

绘制矩形三种方法:

// 绘制一个填充的矩形
fillRect(x, y, width, height);
// 绘制一个矩形的边框
strokeRect(x, y, width, height);
// 清除指定矩形区域,让清除部分完全透明。
clearRect(x, y, width, height);

矩形示例

3. 路径

图形的基本元素是路径。路径是点的集合。
使用路径绘制图形一般步骤如下:

  • 1.beginPath()新建一条路径(有时需要创建路径起始点)
  • 2.lineTo,arc,rect等绘制路径
  • 3.closePath闭合路径(根据实际需求)
  • 4.stroke fill绘制或者填充(路径没有此步骤,图形不会显示)

路径绘制常见方法

// 直线路径
lineTo(x, y)

// 矩形路径
rect(x, y, width, height)

// 圆弧路径
arc(x, y, radius, startAngle, endAngle, anticlockwise)

// 椭圆路径(chrome37+)
ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, anticlockwise)

// 二次贝塞尔曲线
quadraticCurveTo(cp1x, cp1y, x, y)

// 三次贝塞尔曲线
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

// Path2D(chrome36+, addPath chrome68+)
new Path2D(path);
    原文作者:小闲
    原文地址: https://segmentfault.com/a/1190000018042126
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞