canvas进修笔记-绘制矩形及途径(一)

2024年3月13日 173次阅读 来源: 小闲

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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞