授权协议: MIT
开发语言: JavaScript
操作系统: 跨平台
收录时间: 2018-03-29
提 交 者: 王练

Rough.js 是一个轻量级的(大约8k),基于 Canvas 的可以绘制出粗略的手绘风格的图形库。该库提供绘制线条、曲线、弧线、多边形、圆形和椭圆的基础能力,同时支持绘制 SVG 路径。


Usage


const rc = rough.canvas(document.getElementById('canvas'));
rc.rectangle(10, 10, 200, 200); // x, y, width, height

线条和椭圆


rc.circle(80, 120, 50); // centerX, centerY, diameter
rc.ellipse(300, 100, 150, 80); // centerX, centerY, width, height
rc.line(80, 120, 300, 100); // x1, y1, x2, y2

填充


rc.circle(50, 50, 80, { fill: 'red' }); // fill with red hachure
rc.rectangle(120, 15, 80, 80, { fill: 'red' });
rc.circle(50, 150, 80, {
  fill: "rgb(10,150,10)",
  fillWeight: 3 // thicker lines for hachure
});
rc.rectangle(220, 15, 80, 80, {
  fill: 'red',
  hachureAngle: 60, // angle of hachure,
  hachureGap: 8
});
rc.rectangle(120, 105, 80, 80, {
  fill: 'rgba(255,0,200,0.2)',
  fillStyle: 'solid' // solid fill
});

草绘风格


rc.rectangle(15, 15, 80, 80, { roughness: 0.5, fill: 'red' });
rc.rectangle(120, 15, 80, 80, { roughness: 2.8, fill: 'blue' });
rc.rectangle(220, 15, 80, 80, { bowing: 6, stroke: 'green', strokeWidth: 3 });

SVG 路径


rc.path('M80 80 A 45 45, 0, 0, 0, 125 125 L 125 80 Z', { fill: 'green' });
rc.path('M230 80 A 45 45, 0, 1, 0, 275 125 L 275 80 Z', { fill: 'purple' });
rc.path('M80 230 A 45 45, 0, 0, 1, 125 275 L 125 230 Z', { fill: 'red' });
rc.path('M230 230 A 45 45, 0, 1, 1, 275 275 L 275 230 Z', { fill: 'blue' });
展开阅读全文

代码

的 Gitee 指数为
超过 的项目

Rough.js 的相关资讯

还没有任何资讯

Rough.js 的相关博客

JavaScript手绘风格的图形库RoughJS使用指南

RoughJS是一个轻量级的JavaScript图形库(压缩后约9KB),可以让你在网页上绘制素描风格、手绘样式般的图形。RoughJS定义了绘...

手绘风格的数据可视化实现 Sketchify

多少年以前,我在一家BI企业负责数据可视化产品的开发,作为产品创新的需要,一篇论文吸引了我的目光,《Sketchy Rendering f...

只需几行 JavaScript 代码,网页瞬间有气质了!

最近在网上闲逛,发现一个特别好玩的 JavaScript 库,叫 RoughNotation。干嘛用的呢?就是在网页上给文字加标注,比如下划线、...

只需几行 JavaScript 代码,网页瞬间有气质了!

持续进步的同学都关注了“1024译站” 这是1024译站的第 91 篇文章 最近在网上闲逛,发现一个特别好玩的 JavaScript 库,叫 Ro...

只需几行 JavaScript 代码,网页瞬间有气质了!

最近在网上闲逛,发现一个特别好玩的 JavaScript 库,叫 RoughNotation。干嘛用的呢?就是在网页上给文字加标注,比如下划线、...

颜值即正义!这几个库颠覆你对数据交互的想象

作为一个对UI和动画敏感的切图仔,在日常开发之余,也会关注一些贼好看的图表库和插件。 接下来,我将给大家介绍几款web/pyt...

本月你最值得关注的数据科学开源项目!

码农那点事儿 关注我们,一起学习进步 开源最前线(ID:OpenSourceTop) 猿妹整编 链接:https://www.analyticsvidhya.com/b...

六个开源数据科学项目

简介 我最近参加了一个开放数据科学家职位的面试。正如你所能想象的,有来自各种背景的候选人——软件工程、学习和开发、金融...

Coding and Paper Letter(三十六)

资源整理。 1 Coding: 1.简单的TensorFlow初学者教程。 TensorFlow Course 2.R语言包SpatialEpiApp,运行一个Shiny Web应用程...

Rough.js 的相关问答

还没有任何问答,马上提问

评论 (7)

加载中
打分: 力荐
有点意思~
2018/04/28 14:43
回复
举报
打分: 力荐
还不错
2018/04/19 19:04
回复
举报
打分: 力荐
I like it
2018/04/19 14:15
回复
举报
这个风格有特点
2018/04/19 12:40
回复
举报
打分: 力荐
萌幼儿园风格
2018/04/19 10:46
回复
举报
打分: 力荐
有点文艺范儿~
2018/04/19 10:24
回复
举报
打分: 力荐
好诶好艺术
2018/04/19 09:54
回复
举报
更多评论
7 评论
106 收藏
分享
返回顶部
顶部