圣诞树怎么用手机画，圣诞树画图工具

使用代码画图是程序员的必备技能，但是怎么才能画出手绘风格的图片呢？今天虫虫就给大家介绍一款手绘风格的JS小工具Rough.js。

概述Rough.js 是一个开源迷你图形库，允许您以非常小的尺寸（9kB 压缩）以粗糙的手绘风格进行绘制。这个库定义了绘制直线、曲线、圆弧、多边形、圆、椭圆的基本图形，通过强大的SVG路径格式绘制图形，并创建基本图形、表格等、统计曲线以及任何你能想到的东西。

最简单的安装方法是使用npm 进行一键安装。

您可以通过运行npm install –saveroughjs 将其导入您的页面。

importrough from \’roughjs\’;基本用法Roughjs使用起来非常简单，有基本的画布、直线、矩形、椭圆、圆柱、线性路径(直线、多边形、曲线、圆弧等基本形状)。

例如，绘制一个矩形非常容易。要绘制，只需指定其左顶点的坐标、高度和宽度。

const rc=rough.canvas(document.getElementById(\’canvas\’));rc.rectangle(10, 10, 200, 200); //x,y 坐标、宽度、高度或可用的左顶点格式的SVG:

const rc=rough.svg(svg);let node=rc.rectangle(10, 10, 200, 200); //x, y, width, heightsvg.appendChild(node);同样，设置相应的参数即可。

rc.circle(80, 120, 50); //圆的中心坐标centerX, centerY, 直径rc.ellipse(300, 100, 150, 80); //椭圆的中心坐标centerX, centerY, width width, height 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\’ }); (10,150,10)\’,fillWeight: 3 //阴影粗线});rc.rectangle(220, 15, 80, 80, {fill: \’red\’,hachureAngle: 60, //角度阴影， hachureGap: 8});rc.矩形(120, 105, 80, 80, {fill: \’rgba(255,0,200,0.2)\’,fillStyle: \’solid\’ //Fill}); fillStyle属性表示填充样式，支持填充样式：hachure（默认样式） 、实线、锯齿形、剖面线、点、旭日形、虚线、锯齿线对应的效果为：影线是使用粗糙度指定的。波音规定的粗糙度和曲率将绘制近似平行的线。可以使用fillWeight、hachureAngle 和hachureGap 属性进行进一步配置。传统的实心填充物。 zigzag 绘制填充形状的锯齿线。交叉剖面线与剖面线类似，但它绘制交叉剖面线（类似于彼此成90 度的两个剖面线）。点用粗糙的点填充形状。虚线与Hatchure类似，但线是虚线。可以使用dashOffset 和dumpGap 属性进一步配置Dasshed。锯齿线与锯齿线类似，但各条线以锯齿形图案绘制。之字形的大小可以使用zigzagOffset 属性进行配置。

粗糙度和曲率、描边、dashOffset 和zigzagOffse 等属性用于定义特定的绘图样式。

rc.rectangle(15, 15, 80, 80, {粗糙度： 0.5, fill: \’红色\’ });rc.rectangle(120, 15, 80, 80, {粗糙度： 2.8, fill: \’蓝色\’ });rc.rectangle( 220, 15, 80, 80, { Bowing: 6, stroke: \’green\’, stroke width: 3 }); 当然，以上只是rough.js的基本功能。没什么。 rough.js 的另一个重要方面是它对SVG 路径语法的支持和渲染。 SVG（可缩放矢量图形）是一种标准的2D 矢量图形表示形式，其基本语法以XML 表示。 SVG 拥有丰富的绘图元素，其中最基本且使用最广泛的是路径元素，它允许您绘制任意复杂的形状。 rough.js 中的SVG 路径函数改编自mozilla-central 算法的相关部分。

rc.path(\’M80 80 A 45 45, 0, 0, 0, 125 125 L 125 80 Z\’, { fill: \’绿色\’ });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: \’红色\’ });rc .path(\’M230 230 A 45 45, 0, 1, 1, 275 275 L 275 230 Z\’, { fill: \’blue\’ }); 综合示例—— 圣诞树圣诞节到了，祝大家节日快乐圣诞快乐”！为了学习上面的基本用法，让我们做一个综合练习，使用rough.js 生成一个简单的圣诞树。首先，我们来介绍一下rough.js 库。

首先，创建一个800*600的画布。

//开始绘制圣诞树，指定树体、树干和圣诞球的颜色。

const treeColor=\’green\’; const trainColor=\’brown\’; const DrawingColor=\’red\’; //使用椭圆图形绘制树的顶部。

rc.ellipse(400, 100, 180, 100, { fill: TreeColor }); 通过循环10 个椭圆来绘制树。您可以添加循环以使其更加复杂。

for (let i=10; i 0; i–) {let height=400 – (10- i) * 30;let width=200 + i * 30;rc.ellipse(400, height, width, 100 , { fill:treeColor });}//绘制树干

rc.rectangle(375, 450, 50, 100, { fill: trainColor });//绘制圣诞球，随机位置绘制5个球

for (let i=5; i 0; i–) {let height=400 – (5 – i) * 60;let width=200 + i * 30;rc.circle(400 – width/2 + Math .random () * 宽度， 高度+ Math.random() * 50, 20, { fill: 装饰色});rc.circle(400 – 宽度/2 + Math.random() * 宽度， 高度+ Math.random( ) * 50 , 20, { fill:decorationColor });//添加“圣诞快乐”字样

ctx.font=\’50px serif\’;ctx.fillText(\’圣诞快乐！@chongchong\’, 50, 580);} 注意，请将上述文件另存为christmas.htm，并与rough.js 保存在同一目录下。您可以通过在浏览器中打开christmas.htm 来渲染圣诞树。

总结Rough.js 是一个迷你图形库，但具有无限的扩展性，您可以使用它来实现您的许多创意。这里我们截取了一些基于Rough.js 的优秀产品的截图。一些参数可以交互指定。

基于Rough.js的最小生成树可视化：

迷宫

很多迹象：