浅谈基于Canvas的手绘风格图形库Rough.js


Posted in HTML / CSS onMarch 19, 2018

前言

推荐一个基于Canvas的手绘风格图形JS库。

Rough.js

Rough.js是一个轻量的(大约8k),基于Canvas的可以绘制出粗略的手绘风格库。

提供绘制线条、曲线、弧线、多边形、圆形和椭圆的基础能力,同时支持绘制SVG路径。

浅谈基于Canvas的手绘风格图形库Rough.js

Github:https://github.com/pshihn/rough

安装

下载链接:https://github.com/pshihn/rough/tree/master/dist

NPM

npm install --save roughjs

使用方法

浅谈基于Canvas的手绘风格图形库Rough.js

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

线条和椭圆

浅谈基于Canvas的手绘风格图形库Rough.js

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

填充

浅谈基于Canvas的手绘风格图形库Rough.js

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
});

草绘风格

浅谈基于Canvas的手绘风格图形库Rough.js

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 路径

浅谈基于Canvas的手绘风格图形库Rough.js

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' });

简单的SVG路径

浅谈基于Canvas的手绘风格图形库Rough.js

结合Web Workers

如果在网页中有import Workly 这个Web Workers库,RoughJS会自动将所有的操作转移至web workers,来释放UI主线程。这个在使用RoughJS来创建复杂绘图(如地图)时非常有用。详细阅读相关内容 。

<script src="https://cdn.jsdelivr.net/gh/pshihn/workly/dist/workly.min.js"></script>
<script src="../../dist/rough.min.js"></script>

浅谈基于Canvas的手绘风格图形库Rough.js

例子

https://github.com/pshihn/rough/wiki/Examples

API及文档

https://github.com/pshihn/rough/wiki

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
玩转CSS3色彩
Jan 16 HTML / CSS
css3实例教程 一款纯css3实现的环形导航菜单
Oct 20 HTML / CSS
使用CSS3的::selection改变选中文本颜色的方法
Sep 29 HTML / CSS
Css3新特性应用之视觉效果实例
Dec 12 HTML / CSS
html5 canvas 简单画板实现代码
Jan 05 HTML / CSS
如何使用html5与css3完成google涂鸦动画
Dec 16 HTML / CSS
HTML5实现的图片无限加载的瀑布流效果另带边框圆角阴影
Mar 07 HTML / CSS
用HTML5中的Canvas结合公式绘制粒子运动的教程
May 08 HTML / CSS
HTML5实现页面切换激活的PageVisibility API使用初探
May 13 HTML / CSS
处理HTML5新标签的浏览器兼容版问题
Mar 13 HTML / CSS
手把手教你实现一个canvas智绘画板的方法
Mar 04 HTML / CSS
CSS基础详解
Oct 16 HTML / CSS
基于HTML5 WebGL的3D机房的示例
Mar 16 #HTML / CSS
Html5 APP中监听返回事件处理的方法示例
Mar 15 #HTML / CSS
html5实现多图片预览上传及点击可拖拽控件
Mar 15 #HTML / CSS
微信html5页面调用第三方位置导航的示例
Mar 14 #HTML / CSS
微信端html5页面调用分享接口示例
Mar 14 #HTML / CSS
使用html5新特性轻松监听任何App自带返回键的示例
Mar 13 #HTML / CSS
配置H5的滚动条样式的示例代码
Mar 09 #HTML / CSS
You might like
PHP5 操作MySQL数据库基础代码
2009/09/29 PHP
php 下载保存文件保存到本地的两种实现方法
2013/08/12 PHP
php中filter_input函数用法分析
2014/11/15 PHP
在Mac OS上自行编译安装Apache服务器和PHP解释器
2015/12/24 PHP
php+ajax实现无刷新文件上传功能(ajaxuploadfile)
2018/02/11 PHP
jquery根据name属性查找的小例子
2013/11/21 Javascript
在javascript中执行任意html代码的方法示例解读
2013/12/25 Javascript
基于javascript html5实现多文件上传
2016/03/03 Javascript
jQuery实现右键菜单、遮罩等效果代码
2016/09/27 Javascript
js放到head中失效的原因与解决方法
2017/03/07 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
2017/03/21 jQuery
underscore之function_动力节点Java学院整理
2017/07/11 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
2017/08/01 jQuery
基于js 各种排序方法和sort方法的区别(详解)
2018/01/03 Javascript
vue 组件的封装之基于axios的ajax请求方法
2018/08/11 Javascript
详解Vue+Element的动态表单,动态表格(后端发送配置,前端动态生成)
2019/04/20 Javascript
javascript设计模式 ? 中介者模式原理与用法实例分析
2020/04/20 Javascript
JavaScript手写数组的常用函数总结
2020/11/22 Javascript
js加减乘除精确运算方法实例代码
2021/01/17 Javascript
[04:16]DOTA2英雄梦之声_第09期_斧王
2014/06/21 DOTA
使用Python多线程爬虫爬取电影天堂资源
2016/09/23 Python
python中的随机函数小结
2018/01/27 Python
python使用rpc框架gRPC的方法
2018/08/24 Python
Python 中@property的用法详解
2020/01/15 Python
使用CSS实现阅读进度条
2017/02/27 HTML / CSS
HTML5之tabindex属性全面解析
2016/07/07 HTML / CSS
美国二手奢侈品寄售网站:TheRealReal
2016/10/29 全球购物
LN-CC英国:伦敦时尚生活的缩影
2019/09/01 全球购物
印度手工编织服装和家居用品商店:Fabindi
2019/10/07 全球购物
大学生求职中的自我评价
2013/10/01 职场文书
工作失职检讨书范文
2014/01/16 职场文书
青奥会口号
2014/06/12 职场文书
2014年师德师风工作总结
2014/11/25 职场文书
幼儿园小班个人工作总结
2015/02/12 职场文书
2016年综治和平安建设宣传月活动总结
2016/04/01 职场文书
springboot为异步任务规划自定义线程池的实现
2022/06/14 Java/Android