Paper.js 开源的 HTML5 Canvas 画布矢量图形的脚本动画库 - 文章教程

Paper.js 开源的 HTML5 Canvas 画布矢量图形的脚本动画库

发布于 2018-03-02 字数 3187 浏览 3356 评论 0

Paper.js 是一个开源你的脚本动画库,基于最新的 HTML5 Canvas 画布,提供了大量的 API 接口让用户去创建图形和曲线,能够兼容现在的主流浏览器。

Paper.js 开源的 HTML5 Canvas 画布矢量图形的脚本动画库

Paper.js 能够兼容 Scriptographer,他是一个有着活跃的社区,有超过 10 年的发展的针对 Adobe Illustrator 的脚本环境。


Paper.js 是针对现代浏览器的 Canvas 对象和 ECMAScript 5 的支持,所以不兼容旧版本的浏览器。


Paper.js 不仅仅是在 Canvas 对象上绘画,它提供了更多的功能:

  • A Scene Graph / Document Object Model for vector graphics: Work with nested layers, groups, paths, compound paths, rasters, symbols etc.
  • The handling and drawing of these graphic items is automatic and optimised, allowing you to construct or modify your items and styles and leave the drawing commands to Paper.js.
  • A well designed and battle hardened Application Programming Interface (API).
  • PaperScript, a simple extension of JavaScript, allowing the scoped execution of scripts without polluting the global scope, the execution of multiple scripts per page in their separate sand-boxed scopes while sharing the library code, and adding support for operator overloading to any object.
  • There is a good reason for the word Vector in Vector Graphics. Paper.js treats Vector Mathematics as a first class citizen by making working with vectors and geometries as simple as possible through its core types such as Point, Size and Rectangle. The manipulation of Point and Size objects is further simplified in PaperScript, where direct math operations using normal operator syntax are possible on such objects as if they were plain numbers.
  • Construct paths and manipulate their curves and segments in very convenient and fine-grained ways.
  • Inspect and manipulate the precise bounding box of any item, supporting complicated stroke styles with different stroke ends and miter limits.
  • Smoothen curves, and simplify path segments by fitting curves through points.
  • Simulate dashed strokes which are currently lacking from the Canvas object, at near native drawing speed.
  • Most blend modes known from Illustrator and Photoshop supported through emulation in JavaScript: multiply, screen, overlay, soft-light, hard-light, color-dodge, color-burn, darken, lighten, difference, exclusion, hue, saturation, luminosity, color, add, subtract, average & negation.


如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。



需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。





2891 文章
84935 人气



文章 0 评论


文章 0 评论


文章 0 评论


文章 0 评论


文章 0 评论