使用canvas绘制图形步骤,canvas 绘图

　　前言

　　推荐一个基于帆布的手绘风格图形射流研究…库。

　　Rough.js

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

　　提供绘制线条、曲线、弧线、多边形、圆形和椭圆的基础能力，同时支持绘制挽救(保存的简写)路径。

　　github:https://github。com/pshi HN/rough

　　安装

　　下载链接：https://github。com/pshi HN/粗/树/主/区

　　NPM

　　新公共管理安装-保存草图使用方法

　　const RC=粗糙。画布(文档。getelementbyid(“canvas”)；rc.rectangle(10，10，200，200)；//x，y，宽度，高度线条和椭圆

　　rc.circle(80，120，50)；//centerX，centerY，diameterrc.ellipse(300，100，150，80)；//centerX，centerY，width，heightrc.line(80，120，300，100)；//x1，y1，x2，y2填充

　　rc.circle(50，50，80，{ fill: red })；//用红色hachurerc.rectangle填充(120，15，80，80，{ fill: red })；rc.circle(50，150，80，{ fill: rgb(10，150，10)，填充权重：3//hachure的粗线});rc.rectangle(220，15，80，80，{ fill: red ，hachureAngle: 60，hachure的角度，hachureGap:8 })；rc.rectangle(120，105，80，80，{ fill: rgba(255，0，200，0.2)，填充样式： solid //solid fill })；草绘风格

　　rc.rectangle(15，15，80，80，粗糙度：0.5，填充：红色 })；rc.rectangle(120，15，80，80，{粗糙度：2.8,填充：蓝色 });rc.rectangle(220，15，80，80，{ bowing: 6，stroke: green ，笔画宽度：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:紫色 });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路径

　　结合网络工作者

　　如果在网页中有有效导入这个网络工作者库，粗略会自动将所有的操作转移至网络工作者，来释放用户界面主线程。这个在使用RoughJS来创建复杂绘图（如地图)时非常有用。详细阅读相关内容。

　　脚本src= https://cdn。jsdelivr。net/GH/pshi HN/work ly/dist/work ly。量滴js /script script src=././dist/rough.min.js/script

　　例子

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

　　应用程序接口及文档

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

　　以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。