介绍 npm install ,,节省roughjs const rc =, rough.canvas (. getelementbyid(& # 39;帆布# 39;));
rc.rectangle(10日,10日,200年,200年),,//,x,, y,,宽度,高度, rc.circle (80,, 120,, 50);,//, centerX,, centerY,,直径
rc.ellipse (300,, 100,, 150,, 80),,//, centerX,, centerY,,宽度、高度
rc.line (80,, 120,, 300,, 100),,//, x1, y1, x2, y2 rc.circle(50岁,50岁,80年,{,填补:& # 39;红色# 39;,});,//,fill with red 影线
,15日,rc.rectangle(120,, 80,, 80,,{,填补:& # 39;红色# 39;,});
rc.circle (50, 150,, 80,, {
,,填满:“rgb(10150年,10)“,
fillWeight才能:,3,//,thicker lines for ,影线
});
,15日,rc.rectangle (220,, 80,, 80,, {
,,填满:& # 39;红色# 39;
hachureAngle才能:,,,//,angle of 影线,
hachureGap才能:8
});
rc.rectangle (120,, 105,, 80,, 80,, {
,,填满:& # 39;rgba (255、0200、0.2) & # 39;,
fillStyle才能:& # 39;固体# 39;,//solid 填补
}); rc.rectangle(15日,15日,80年,80年,{,粗糙度:0.5,填补:,& # 39;红色# 39;,});
,15日,rc.rectangle(120,, 80,, 80,,{,粗糙度:2.8,填补:,& # 39;蓝# 39;,});
,15日,rc.rectangle(220,, 80,, 80,,{,鞠躬:6,中风:,& # 39;绿色# 39;,,strokeWidth:, 3,}); rc.path (& # 39; M80 80年,A 45岁,45岁,0,0,0,125,125,L 125年,80年,z # 39;,,{,填补:& # 39;绿色# 39;,});
rc.path (& # 39; M230 80年,A 45岁,45岁,0,,1,,0,275,125,L 275年,80年,z # 39;,,{,填补:& # 39;紫色# 39;,});
rc.path (& # 39; M80 230年,A 45岁,45岁,0,0,1,125,275,L 125年,230年,z # 39;,,{,填补:& # 39;红色# 39;,});
rc.path (& # 39; M230 230年,A 45岁,45岁,0,1,1,275,275,L 275年,230年,z # 39;,,{,填补:& # 39;蓝# 39;,}); & lt; script src=https://www.yisu.com/zixun/" https://cdn.jsdelivr.net/gh/pshihn/workly/dist/workly.min.js ">
小编给大家分享一下画布中手绘风格图形库Rough.js的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
<强> Rough.js
粗糙。js是一个轻量的(大约8 k),基于画布的可以绘制出粗略的手绘风格库。
提供绘制线条,曲线,弧线,多边形,圆形和椭圆的基础能力,同时支持绘制SVG路径。
Github: https://github.com/pshihn/rough
<强>安装
下载链接:https://github.com/pshihn/rough/tree/master/dist
<强> NPM
<强>使用方法
<强>线条和椭圆
<强>填充
<强>草绘风格
<强> SVG路径
<强>简单的SVG路径
结合Web Workers
如果在网页中有进口工作这个Web Workers库,RoughJS会自动将所有的操作转移至Web Workers,来释放UI主线程。这个在使用RoughJS来创建复杂绘图(如地图)时非常有用。详细阅读相关内容。
以上是“画布中手绘风格图形库Rough.js的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注行业资讯频道!
