德育处主任Pro
德育处主任Pro

眨个眼就学会了Pixi.js

theme: smartblue

本文正在参加「金石计划」

本文简介

带尬猴，我是德育处主任

当今的Web开发中，图形和动画已经成为了吸引用户注意力的重要手段之一。而 Pixi.js 作为一款高效、易用的2D渲染引擎，已经成为了许多开发者的首选~~(我吹的)~~。本文将为工友们介绍PixiJS的基础知识和使用方法，希望可以和工友们~~快速~~光速入门，掌握 Pixi.js 的用法。

实际工作中我还没有用上 Pixi.js，本文只是记录我的学习过程。将我认为入门时需要掌握的知识点记录下来。所以，你们懂的，太难的问题我回答不上，或者我会用拆特鸡皮蹄敷衍你。

环境搭建

本文将使用原生三件套的方式讲解如何使用 Pixi.js，你可以根据自己的需求搭建环境。

我使用 VS Code 开发，并在 VS Code 安装了 Live Server插件 方便启动本地服务。

创建好项目后就需要安装 Pixi.js，常用的方式有 CDN 和 NPM，选其中一种就行。

本文使用 Pixi.js 7.2 版本

CDN

本文为了和各位工友一起快速上手 Pixi.js ，所以会使用 CDN 的方式引入 Pixi.js。

```


## NPM 工作中很多项目都会使用脚手架的方式进行开发，通常也会使用 `npm` 的方式下载依赖包。`Pixi.js` 也提供了这种方式。 ``` npm i pixi.js ``` 下载好 `Pixi.js` 后，在需要用到 `Pixi.js` 的页面中引入即可。 ```js import * as PIXI from 'pixi.js' ```
# 其他依赖包 在创建一些特殊图形时你可以还需要使用到 `@pixi/graphics-extras` ## CDN ```
## NPM ``` npm install @pixi/graphics-extras ``` 这是 `@pixi/graphics-extras` 的npm地址：https://www.npmjs.com/package/@pixi/graphics-extras
# 起步 首先要做的是使用 `Pixi.js` 创建一个画布，并将该画布添加到页面中。
## 创建画布 分2步走： 1. 使用 `Pixi.js` 创建画布 2. 将画布添加到页面中 ![01.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a3c0a980985549d3bf304a86e52aebc2~tplv-k3u1fbpfcp-watermark.image?) ```html

```

如果你使用 npm 的方式安装 Pixi.js 就需要用下面这种写法。

```js import * as PIXI from 'pixi.js' // 引入 Pixi.js

// 1、创建 pixi画布 let app = new PIXI.Application()

// 2、将画布添加到页面中 document.body.appendChild(app.view) ```

前面这两个例子都是将画布添加到页面，你也可以根据需求将画布添加到指定元素里。

```html

```

设置画布宽高

Pixi.js 默认创建出来的画布宽高是 800px * 600px。

你可以在使用 Pixi.js 创建画布的时候设置好画布的宽高。

```js // 创建画布时设置宽高 let app = new PIXI.Application({ width: 640, height: 360 })

// 将画布添加到页面里 document.body.appendChild(app.view) ```

设置画布背景色

细心的工友可能已经发现，Pixi.js 创建出来的画布背景默认是黑色的。你可以在创建画布时手动设置背景色。

眨个眼就学会了Pixi.js_第1张图片

```js // 省略部分代码...

let app = new PIXI.Application({ backgroundColor: 'pink' })

document.body.appendChild(app.view) ```

backgroundColor 接收一个颜色值，除了像上面这样写一个颜色关键词，还可以传入 rgb、十六进制等表示颜色的值。比如：

  • backgroundColor: 'rgb(100, 0, 100)'
  • backgroundColor: '#1182af'
  • backgroundColor: 0x1182af

自动调整大小

如果希望画布跟随父元素大小改变，可以设置 resizeTo。

比如，我想让画布跟随浏览器窗口大小变化，可以这样设置。

js let app = new PIXI.Application({ resizeTo: window })

此时可能你会发现画布的宽高好像导致浏览器产生了水平和垂直的滚动条，可以通过 CSS 解决这个问题。

```css html, body { margin: 0; padding: 0; width: 100%; height: 100%; }

canvas { position: fixed; top: 0; left: 0; } ```

销毁画布

使用 destroy() 方法可以销毁画布。

眨个眼就学会了Pixi.js_第2张图片

```html 删除画布

```

细心的你可能发现了，上面的操作只是清除了画布， 元素还是留在页面上的。

如果你想把 元素也清掉，可以使用 app.destroy() 时传入 true

眨个眼就学会了Pixi.js_第3张图片

```js // 省略部分代码

function delCanvas() { app.destroy(true) } ```

基础图形

创建好画布后，就开始学习一下如何创建基础图形。这也是我认为入门阶段最重要的内容。

先从最简单的图形说起，清楚 Pixi.js 可以创建哪些图形后，后面的章节再讲解如何设置样式。

在 Pixi.js 创建图形需要用到 Graphics 类。Graphics 里包含了很多基础图形。

创建图形需要做以下几步：

  1. 实例化 Graphics 类。
  2. 设置填充或描边颜色。
  3. 创建图形。
  4. 执行绘制操作。

注意：以上几个步骤一定要按顺序做，一定要先设置颜色再创建图形，不然图形就可能没颜色或者使用上下文的颜色。

矩形 (drawRect)

Pixi.js 提供了好几种矩形，最基础的是 drawRect。

语法

drawRect(x, y, width, height)

这语法和 原生Canvas 的 rect() 方法很像。

  • x 和 y 是矩形左上角坐标的位置，这个位置是相对于画布而言的。
  • width 和 height 是矩形的宽高。

看个例子：

眨个眼就学会了Pixi.js_第4张图片

```js // 创建画布 let app = new PIXI.Application({ width: 300, height: 300 })

// 将画布添加到页面 document.body.appendChild(app.view)

// 创建图形类 const graphics = new PIXI.Graphics() // 设置填充颜色 beginFill(颜色, 不透明度) graphics.beginFill(0xffd900, 1) // 创建图形(矩形) graphics.drawRect(50, 50, 200, 100) // 绘制操作 graphics.endFill()

// 将绘制好的图形添加到画布中 app.stage.addChild(graphics) ```

圆角矩形 (drawRoundedRect)

了解了基础的矩形怎么创建之后，接下来的图形都比较容易掌握了。

创建圆角矩形可以使用 drawRoundedRect() 方法，这个方法比普通矩形多一个圆角参数。

语法

drawRoundedRect(x, y, width, height, radius)

  • x、y、width 和 height 都跟 矩形Rect() 一样。
  • radius 参数可以控制四个角的圆角半径。

眨个眼就学会了Pixi.js_第5张图片

```js // 创建画布 let app = new PIXI.Application({ width: 300, height: 300 })

// 将画布添加到页面 document.body.appendChild(app.view)

// 创建图形类 const graphics = new PIXI.Graphics() // 设置填充颜色 beginFill(颜色, 不透明度) graphics.beginFill(0xffd900, 1) // 创建圆角矩形 graphics.drawRoundedRect(50, 50, 200, 100, 10) // 最后一个参数是圆角半径 // 绘制操作 graphics.endFill()

// 将绘制好的图形添加到画布中 app.stage.addChild(graphics) ```

其实在用 drawRoundedRect 时，你不传最后一个参数 radius 它也不会怪你的，因为它本身有默认值嘛。

眨个眼就学会了Pixi.js_第6张图片

```js // 省略部分代码...

graphics.drawRoundedRect(50, 50, 200, 100) ```

倒角矩形 (drawChamferRect)

我不知道把 drawChamferRect 翻译成“倒角矩形”正不正确，意思就是将举行的4个角切掉磨平。

但 drawChamferRect() 并不在 Pixi.js 的基础包里，你需要另外下载 @pixi/graphics-extras，CDN 和 NPM 的地址在前面的《其他依赖包》章节。

drawChamferRect 语法

drawChamferRect(x, y, width, height, chamfer)

chamfer 参数就是倒角的切口，数值越大切口越大。

```html

```

和圆角矩形不同，使用 drawChamferRect() 时一定要传入最后一个参数。

倒圆角矩形 (drawFilletRect)

同样的，我也不清楚用 “倒圆角矩形” 描述 drawFilletRect 这个方法有没有问题，详情看看效果图。

要使用 drawFilletRect() 也需要引入 @pixi/graphics-extras。

语法

DrawFilletRect(x，y，width，height，fillet)

参数 fillet 表示圆角半径，它属于 圆角矩形 drawRoundedRect 的升级版，因为 fillet 可以接收负数。

当 fillet 是正数是，它画出来的图像和普通圆角矩形差不多；当 fillet 为负数时，圆角就会向内凹进去。

眨个眼就学会了Pixi.js_第7张图片

```html

```

圆形 (drawCircle)

圆形是 Pixi.js 的基础图形，并不需要额外的引入 @pixi/graphics-extras.js 。

创建圆形的方法叫 drawCircle()，语法如下：

drawCircle(x, y, radius)

  • x 和 y 是圆心的位置。
  • radius 是圆的半径。

需要注意的是 x 和 y ，它和矩形不同，矩形的 x 和 y 是定义矩形左上角的位置。

眨个眼就学会了Pixi.js_第8张图片

```js // 创建画布 let app = new PIXI.Application({ width: 300, height: 300 })

// 将画布添加到页面 document.body.appendChild(app.view)

// 创建图形类 const graphics = new PIXI.Graphics() // 设置填充颜色 beginFill(颜色, 不透明度) graphics.beginFill(0xffd900, 1) // 创建圆形 graphics.drawCircle(100, 100, 50) // x, y, radius // 绘制操作 graphics.endFill()

// 将绘制好的图形添加到画布中 app.stage.addChild(graphics) ```

椭圆 (drawEllipse)

使用 drawEllipse() 方法可以绘制椭圆，该方法是 Pixi.js 提供的，无需额外引入 @pixi/graphics-extras.js 。

语法

drawEllipse(x, y, width, height)

  • x 和 y 是椭圆的圆心位置。
  • width 是椭圆的宽度，height 是椭圆的高度。

需要注意，在 Pixi.js 中，椭圆是用宽高来表示的。其他 Canvas 库的椭圆宽高可能会用 x 和 y 方向的半径来表示，比如 Fabric.js 的椭圆 ，这点大家需要注意一下。

眨个眼就学会了Pixi.js_第9张图片

```js // 创建画布 let app = new PIXI.Application({ width: 300, height: 300 })

// 将画布添加到页面 document.body.appendChild(app.view)

// 创建图形类 const graphics = new PIXI.Graphics() // 设置填充颜色 beginFill(颜色, 不透明度) graphics.beginFill(0xffd900, 1) // 创建椭圆 graphics.drawEllipse(100, 50, 100, 50) // x, y, width, height // 绘制操作 graphics.endFill()

// 将绘制好的图形添加到画布中 app.stage.addChild(graphics) ```

多边形 (drawPolygon)

使用 drawPolygon() 方法可以绘制多边形，该方法接收1个参数，这个参数是一个数值型数组，用来表示多边形顶点坐标。

drawPolygon 方法会自动将起始点和结束点连接起来，形成一个封闭的图形。

语法

``` drawPolygon(…path)

// 这是我书写习惯 drawPolygon([ x1, y1, x2, y2, x3, y3, ...... ]) ```

眨个眼就学会了Pixi.js_第10张图片

```js // 创建画布 let app = new PIXI.Application({ width: 300, height: 300 })

// 将画布添加到页面 document.body.appendChild(app.view)

// 创建图形类 const graphics = new PIXI.Graphics() // 设置填充颜色 beginFill(颜色, 不透明度) graphics.beginFill(0xffd900, 1)

// 路径，两两一组代表一个坐标 const path = [ 30, 30, 100, 50, 100, 180, 30, 200 ]

// 创建多边形 graphics.drawPolygon(path) // 绘制操作 graphics.endFill()

// 将绘制好的图形添加到画布中 app.stage.addChild(graphics) ```

路径坐标是两两一组的，二维世界里一个点用x和y两个坐标来描述。

上面是我的书写习惯，比较容易看出点的位置和数量。

正多边形 (drawRegularPolygon)

正方形、等边三角形都属于正多边形。

在 Pixi.js 里，使用 drawRegularPolygon() 方法可以绘制正多边形，但前提是要引入 @pixi/graphics-extras.js。

语法

drawRegularPolygon(x, y, radius, sides, rotation)

  • x 和 y 是多边形的中心点坐标。
  • radius 是多边形的半径，也就是中心点到各个点的距离。
  • sides 是多边形的边数，最小值是3。
  • rotation 是多边形的旋转弧度，默认值是0。

需要注意的是，rotation 是以弧度为单位的，如果想直观的表达角度，可以用下面这条公式

角度 * Math.PI / 180

举个例子

眨个眼就学会了Pixi.js_第11张图片

```html

```

圆角正多边形 (drawRoundedPolygon)

Pixi.js 使用 drawRoundedPolygon() 方法绘制圆角，使用该方法之前需要引入 @pixi/graphics-extras.js。

语法

drawRoundedPolygon(x, y, radius, sides, corner, rotation)

相比起正多边形，圆角正多边形多了个圆角，所以需要传入的参数也会比正多边形多一个圆角半径。

  • x 和 y 是圆角正多边形的中心点。
  • radius 是圆角正多边形的半径(中心点到各个顶点的距离)。
  • sides 是边的数量。
  • corner 是每个角的圆角半径，这个参数是必传的！
  • rotation 是旋转弧度。

举个例子

眨个眼就学会了Pixi.js_第12张图片

```html

```

环形 (drawTorus)

环形也是特殊图形，同样 需要引入 @pixi/graphics-extras.js。

创建环形的方法是 drawTorus() 。

语法

drawTorus(x, y, innerRadius, outerRadius, startArc, endArc)

  • x 和 y 是环形的圆心坐标。
  • innerRadius 是内圆半径。
  • outerRadius 是外圆半径。
  • startArc 环形开始位置，默认是0，单位是弧度。该参数可以不填。
  • endArc 环形结束位置，默认是 Math.PI * 2，单位是弧度。该参数可以不填。

如果不填写 startArc 和 endArc ，画出来的是一个没缺口的环形。

眨个眼就学会了Pixi.js_第13张图片

经过前面几个图形的锻炼，本例开始就省略一些套路式的代码了。

```js // 创建画布 let app = new PIXI.Application({ width: 300, height: 300 })

// 将画布添加到页面 document.body.appendChild(app.view)

// 创建图形类 const graphics = new PIXI.Graphics() // 设置填充颜色 beginFill(颜色, 不透明度) graphics.beginFill(0xffd900, 1)

// 创建环形，只传入4个参数 x, y, 内圆半径, 外圆半径 graphics.drawTorus(100, 100, 30, 60) // 绘制操作 graphics.endFill()

// 将绘制好的图形添加到画布中 app.stage.addChild(graphics) ```

如果把开始位置和结束位置也设置一下，就有可能得到一个“不闭合”的环形

眨个眼就学会了Pixi.js_第14张图片

js // 创建环形 graphics.drawTorus(100, 100, 30, 60, 0.5, 5.5)

星形 (drawStar)

星形 drawStar() 也是特殊图形， 需要引入 @pixi/graphics-extras.js。

语法

drawStar(x, y, points, radius, innerRadius, rotation)

  • x 和 y 是星形的中心坐标。
  • points 代表点数，也就是星星有多少个角是由这个参数控制的，这个值必须大于1。

绘制图形 (drawShape)

从官方文档的描述来看，drawShape() 方法是可以绘制任何图形的。

Draw any shape.

眨个眼就学会了Pixi.js_第15张图片

```js // 省略部分代码......

// 创建图形类 const graphics = new PIXI.Graphics() // 设置填充颜色 beginFill(颜色, 不透明度) graphics.beginFill(0xffd900, 1)

// 创建一个多边形对象 const path2 = new PIXI.Polygon([ 10, 10, // 第一个点的坐标 50, 100, // 第二个点的坐标 100, 10 // 第三个点的坐标 ])

graphics.drawShape(path2) // 绘制操作 graphics.endFill()

// 将绘制好的图形添加到画布中 app.stage.addChild(graphics) ```

在这个例子中我使用 PIXI.Polygon 建立了3个坐标点的形状，然后把结果丢进 drawShape 创建图形。

折线 (moveTo 和 lineTo)

在 Pixi.js 里使用 moveTo() 和 lineTo()方法绘制折线，和 原生Canvas 很像。

  • moveTo() 传入的是起始点坐标。
  • lineTo() 可以存在多个，每个 lineTo() 里都可以传入一个坐标点，表示折线的顶点。

眨个眼就学会了Pixi.js_第16张图片

```js // 省略部分代码......

// 创建图形类 const graphics = new PIXI.Graphics() // 设置描边颜色 beginFill(颜色, 不透明度) graphics.lineStyle(4, 0xffd900, 1)

// 创建折线 graphics.moveTo(10, 40) // 起始点 graphics.lineTo(40, 20) // 经过的点 graphics.lineTo(50, 80) graphics.lineTo(100, 70)

// 将绘制好的图形添加到画布中 app.stage.addChild(graphics) ```

闭合折线

在折线的基础上，还可以在最后加上一个 closePath() 方法闭合折线。这就会形成一个封闭图形。

closePath() 方法会将折线的起点和终点连接起来。

眨个眼就学会了Pixi.js_第17张图片

```js // 省略部分代码......

// 创建图形类 const graphics = new PIXI.Graphics()

// 设置秒变颜色 graphics.lineStyle(4, 0xffd900, 1)

graphics.moveTo(10, 40) // 起始点 graphics.lineTo(40, 20) // 经过的点 graphics.lineTo(50, 80) graphics.lineTo(100, 70)

graphics.closePath() // 闭合 ```

圆弧 (arc)

创建圆弧使用的方法是 arc()。

语法

arc(cx, cy, radius, startAngle, endAngle, anticlockwise)

  • cx 和 cy 是圆心坐标。
  • radius 是圆弧半径。
  • startAngle 圆弧的开始角度(以弧度表示)。
  • endAngle 圆弧的结束角度(以弧度表示)。
  • anticlockwise 绘制方向，true 表示逆时针方向绘制，false 表示顺时针。默认值为 false。

眨个眼就学会了Pixi.js_第18张图片

```js // 省略部分代码......

// 创建图形类 const graphics = new PIXI.Graphics()

// 设置线的颜色 graphics.lineStyle(4, 0xffd900, 1)

// 创建圆弧 graphics.arc(100, 100, 50, Math.PI, 2.3 * Math.PI)

// 将绘制好的图形添加到画布中 app.stage.addChild(graphics) ```

圆弧(arcTo)

你没看错，创建圆弧除了 arc() 方法外，还有 arcTo() 方法。

arcTo() 是 Pixi.js 中的一个图形绘制函数，用于绘制从当前点到指定点之间的弧线。

Pixi.js 的 arcTo() 方法其实和 原生Canvas 的 arcTo() 用法差不多，在使用之前害需要 moveTo 配合。

关于 Canvas 的 arcTo() 方法我在 《Canvas 从入门到劝朋友放弃(图解版)》 有讲到，有兴趣的工友可以去看看。

Pixi.js 的 arcTo() 语法

arcTo(x1, y1, x2, y2, radius)

  • x1 和 y1 是弧线的起始点坐标。
  • x2 和 y2 是弧线的终点坐标。
  • radius 是弧线的半径。

眨个眼就学会了Pixi.js_第19张图片

```js // 省略部分代码......

// 创建图形类 const graphics = new PIXI.Graphics()

// 创建折线 graphics.lineStyle(4, 0xffd900, 1) graphics.moveTo(40, 40) // 先确定起始点 graphics.arcTo(120, 40, 120, 120, 80) graphics.endFill()

// 将绘制好的图形添加到画布中 app.stage.addChild(graphics) ```

贝塞尔曲线

贝塞尔曲线是一种数学曲线，可以用于绘制复杂的图形。在 Pixi.js 中，bezierCurveTo 方法可以用来绘制二次或三次贝塞尔曲线。

二次贝塞尔曲线有3个关键坐标点：起始点、控制点、结束点。

三次贝塞尔曲线比二次贝塞尔曲线多1个控制点，理解了二次贝塞尔曲线就能理解三次贝塞尔曲线。

眨个眼就学会了Pixi.js_第20张图片

我用一张图简单讲解一下二次贝塞尔曲线。

moveTo(50, 100) 是起始点，(100, 50) 和 (150, 100) 是贝塞尔曲线的控制点。

将这3个坐标连起来，也就是上图所示的2条灰色的线。

在这两条灰色的线上，各自平均画了4个点，然后按顺序把这些点连起来，如上图所示。

最后，将第一条灰线和红线点交点、红线和黄线点交点、黄线和蓝线点交点、蓝线和绿线点交点以及绿线和最后一条灰线点交点连接起来。形成一条新的曲线。这就是贝塞尔曲线(下图的紫线)。

眨个眼就学会了Pixi.js_第21张图片

因为我画的线比较少，所以形成的曲线还是有棱角。如果希望曲线更圆润，你需要画更多的线形成更多的交点。

说了这么多，回到 Pixi.js ，看看使用 Pixi.js 怎么画贝塞尔曲线。

二次贝塞尔曲线

使用 quadraticCurveTo() 方法可以绘制二次贝塞尔曲线。

语法

quadraticCurveTo(cpX, cpY, toX, toY)

  • 在使用 quadraticCurveTo() 前，需要使用 moveTo() 定义曲线的起点。
  • quadraticCurveTo() 的 cpX 和 cpY 是第一个控制点。
  • toX 和 toY 是第二个控制点。

眨个眼就学会了Pixi.js_第22张图片

```js // 创建图形类 const graphics = new PIXI.Graphics()

// 创建折线 graphics.lineStyle(4, 0xffd900, 1)

graphics.moveTo(50, 100) graphics.quadraticCurveTo(100, 50, 150, 100) // 二次贝塞尔曲线

// 将绘制好的图形添加到画布中 app.stage.addChild(graphics) ```

三次贝塞尔曲线

在 Pixi.js 中，绘制三次贝塞尔曲线需要使用另一个方法：bezierCurveTo()

语法

bezierCurveTo(cpX, cpY, cpX2, cpY2, toX, toY)

绘制三次贝塞尔曲线同样需要先使用 moveTo() 配合。

眨个眼就学会了Pixi.js_第23张图片

```js // 创建图形类 const graphics = new PIXI.Graphics()

// 创建折线 graphics.lineStyle(4, 0xffd900, 1)

graphics.moveTo(50, 100) graphics.bezierCurveTo(100, 50, 150, 100, 200, 100) // 三次贝塞尔曲线

// 将绘制好的图形添加到画布中 app.stage.addChild(graphics) ```

文本 Text

使用 Pixi.js 渲染文本非常简单，只需用到 Text() 方法即可。

语法

new PIXI.Text(text, style, canvas)

在本小节我们只需知道 new PIXI.Text('文本内容') 这样用即可，样式部分我放在后面讲解。

眨个眼就学会了Pixi.js_第24张图片

```js // 创建画布 let app = new PIXI.Application({ width: 300, height: 300, backgroundColor: 0xf0f0f0 })

// 将画布添加到页面 document.body.appendChild(app.view)

const text = new PIXI.Text('雷猴')

// 将文本添加到画布中 app.stage.addChild(text) ```

使用 new PIXI.Text() 创建的文字默认是黑色，所以在本例中我把画布背景色设置成浅灰色，方便观察文字。

图片

在 Pixi.js 里，加载图片资源需要做以下操作：

  1. 加载图片纹理
  2. 将纹理放入“精灵”对象
  3. 将“精灵”添加到画布中

眨个眼就学会了Pixi.js_第25张图片

```js // 创建画布 let app = new PIXI.Application()

// 将画布添加到页面 document.body.appendChild(app.view)

// 加载图片 const texture = PIXI.Texture.from('./dinosaur.png') // 将纹理放在“精灵“的图形对象上 const sprite = new PIXI.Sprite(texture) // 将精灵添加到画布中 app.stage.addChild(sprite) ```

使用 PIXI.Texture 方法加载图片纹理，但这个方法前面是不需要 new 的，这点要注意！

PIXI.Texture.from() 除了加载本地图片，还能加载网络图片。

js const texture = PIXI.Texture.from('https://pixijs.io/examples/examples/assets/bunny.png')

常用样式配置

终于来到样式讲解部分了。

前面讲解的图形、文本、图片都是 Pixi.js 的基础元素，他们都支持样式设置。

基础图形样式

图形的样式我用矩形来举例。基础图形的宽高、半径之类的使用方法在前面已经讲过了，这里不再重复。

填充色

使用 beginFill() 设置填充色。

使用 endFill() 可以结束上一个 beginFill() 方法定义的填充样式。如果没有调用endFill()方法，则填充样式会一直应用到后续的所有形状上，直到定义新的填充样式。

在绘制图形时，通常需要使用beginFill()方法定义填充样式，然后使用drawRect()、drawCircle()等方法绘制形状，最后调用endFill()方法结束填充。

beginFill() 语法

beginFill(color, alpha)

  • color: 要填充的颜色，默认值是0，表示黑色。这个参数有几种情况，我会详细说明。
  • alpha: 透明通道。默认值是1，表示完全不透明。0 表示完全透明。0-1之间的值表示不同程度的半透明。

颜色关键字

举个例子(颜色关键字)

眨个眼就学会了Pixi.js_第26张图片

```js // 省略部分代码......

// 创建图形类 const graphics = new PIXI.Graphics()

// 设置填充颜色 beginFill graphics.beginFill('hotpink')

// 创建图形(矩形) graphics.drawRect(50, 50, 200, 100)

// 绘制操作 graphics.endFill()

// 将绘制好的图形添加到画布中 app.stage.addChild(graphics) ```

在这个例子中，我传入的是 'hotpink' 亮粉色。使用颜色关键字时，需要把关键字用单引号或者双引号括起来。

十六进制

接下来看另一种情况：十六进制颜色表示法。

眨个眼就学会了Pixi.js_第27张图片

```js // 省略部分代码......

// 十六进制颜色表示法 graphics.beginFill('#0fff00')

// 或者 graphics.beginFill(0x0fff00) ```

上面两种写法都是十六进制的颜色表示法，学过 CSS 的工友对这种颜色表示方法应该不陌生。

需要注意的是，如果你使用 # 开头的方式，需要套上单引号或者双引号，把它变成一个字符串。

如果不想套引号，就是用 0x 开头的方式。

数值

接下来看看只传入一个数字的情况。

beginFill(color) 里的 color 参数默认值是 0。它表示黑色。

Pixi.js 会将你传入的十进制数转成十六进制。也就是说，0 会变成 0x000000 。

我们将上一个例子中的 0x0fff00 绿色转成十进制再传入 beginFill() 里，出来的效果是一样的。

眨个眼就学会了Pixi.js_第28张图片

我用手算法计算了一下，0x0fff00 转成十进制后是 1048320

```js // 省略部分代码......

graphics.beginFill(1048320) ```

现在应该知道为什么 beginFill() 默认是黑色了吧。

这种传单个十进制数值的方法我们很少用。

不透明度

不透明度的配置方法就是给 beginFill() 传入第二个参数，这个参数的取值范围是 0 ~ 1 。默认值是1。

js graphics.beginFill('hotpink', 0.8)

这个太简单了，我就不贴图了，你们在自己电脑试试吧。

边框样式

lineStyle() 是 Pixi.js 的描边方法。

语法

lineStyle(width, color, alpha, alignment, native)

  • width: 描边宽度，默认值是 0
  • color: 描边颜色，默认值是 0
  • alpha: 描边的不透明度，默认值是 1
  • alignment: 描边的对齐方式，取值：0 = inner 内部, 0.5 = middle 中间, 1 = outer 外部，默认值是 0.5
  • native: 表示是否使用 LINES 而不是 TRIANGLE_STRIP 来绘制线条。默认值是 false

我们通常只用到前3个参数，甚至只是用到前2个参数。

眨个眼就学会了Pixi.js_第29张图片

```js const app = new PIXI.Application({ width: 300, height: 300 })

document.body.appendChild(app.view)

const graphics = new PIXI.Graphics()

// 设置描边宽度和颜色 graphics.lineStyle(2, 0xff0000) graphics.drawRect(50, 50, 100, 100)

app.stage.addChild(graphics) ```

文本样式

前面提到创建文本使用 new PIXI.Text() 方法，第一个参数是文本内容，第二个参数是样式对象。

常用配置

常见的配置有字体、字号、填充色、描边色。

眨个眼就学会了Pixi.js_第30张图片

```js // 省略部分代码......

const text = new PIXI.Text( "雷猴", { fontFamily: 'Arial', // 字体 fontSize: 36, // 字号 fill: 'yellow', // 填充色 stroke: 'red', // 描边颜色 strokeThickness: 2 // 描边宽度，默认是0 } )

app.stage.addChild(text) ```

字距

letterSpacing 属性可以设置字距。

眨个眼就学会了Pixi.js_第31张图片

js const text = new PIXI.Text( "雷猴", { fill: 'yellow', // 填充色 letterSpacing: 20 } )

文本投影

在 Pixi.js 里设置文字投影需要配置一堆属性，这堆属性都是以 dropShadow 开头的。

具体用法请看代码注释。

眨个眼就学会了Pixi.js_第32张图片

js const text = new PIXI.Text( "雷猴", { fontSize: 60, fill: 'yellow', // 填充色 dropShadow: true, // 开启投影 dropShadowColor: 'red', // 投影颜色 dropShadowBlur: 6, // 投影羽化程度(模糊度) dropShadowAngle: 45 * Math.PI / 180, // 投影角度 dropShadowDistance: 10 // 投影距离 } )

文本渐变填充

通过前面的例子我们已经知道设置文本的 fill 属性可以配置文本颜色，其实这个属性还可以传入一个颜色数组，它就会变成渐变填充。

眨个眼就学会了Pixi.js_第33张图片

js const text = new PIXI.Text( "雷猴", { fontSize: 60, fill: ['yellow', 'red', 'purple', 'blue'], // 填充色 } )

默认的渐变方向是从上往下，如果你想改成从左往右渐变，可以设置 fillGradientType 属性。

眨个眼就学会了Pixi.js_第34张图片

js const text = new PIXI.Text( "雷猴", { fontSize: 60, fill: ['yellow', 'red', 'purple', 'blue'], // 填充色 fillGradientType: PIXI.TEXT_GRADIENT.LINEAR_HORIZONTAL } )

fillGradientType 的默认值是 PIXI.TEXT_GRADIENT.LINEAR_VERTICAL ，就是让渐变从上往下走。

PIXI.TEXT_GRADIENT.LINEAR_HORIZONTAL 可以让渐变从左往右走。

PIXI.TEXT_GRADIENT.LINEAR_VERTICAL 和 PIXI.TEXT_GRADIENT.LINEAR_HORIZONTAL 都是 Pixi.js 提供的。

文本纹理

我们还可以使用图片作为文本的纹理。

操作步骤：

  1. 创建文字
  2. 加载图片
  3. 将图片设置为文本的遮罩层

眨个眼就学会了Pixi.js_第35张图片

```js const text = new PIXI.Text( "雷猴，带尬猴，我嗨德育处主任", { fontSize: 60, fontWeight: 900, // 字体重量 fill: 0xffffff, // 必须设置非黑色的填充色 } )

// 加载图片 const bunny = PIXI.Sprite.from('./pexels-alexander-grey.jpg') // 设置图片宽高 bunny.width = app.screen.width bunny.height = app.screen.height

// 配置文字遮罩层 bunny.mask = text

// 注意！需要将遮罩层图片添加到画布中，而不是添加文字text app.stage.addChild(bunny) ```

为了方便演示，我还设置了 fontWeight 属性，让文本变得更粗。

这个例子我使用的图片是这个：

37.jpg

图片样式

前面已经讲过图片怎么使用了，本小节讲讲图片常用的属性。

宽高

通过设置 width 和 height 可以修改图片的宽高。

眨个眼就学会了Pixi.js_第36张图片

```js // 省略部分代码

// 加载图片 const texture = PIXI.Texture.from('./dinosaur.png') // 将纹理放在“精灵“的图形对象上 const sprite = new PIXI.Sprite(texture)

// 设置精灵宽高 sprite.width = 100 sprite.height = 100

// 将精灵添加到画布中 app.stage.addChild(sprite) ```

位置

通过设置 x 和 y 可以修改图片的位置。

眨个眼就学会了Pixi.js_第37张图片

```js // 省略部分代码

// 加载图片 const texture = PIXI.Texture.from('./dinosaur.png') // 将纹理放在“精灵“的图形对象上 const sprite = new PIXI.Sprite(texture)

// 设置精灵宽高 sprite.x = 100 sprite.y = 100

// 将精灵添加到画布中 app.stage.addChild(sprite) ```

旋转

通过设置 rotation 属性旋转图片。

眨个眼就学会了Pixi.js_第38张图片

```js // 省略部分代码

// 加载图片 const texture = PIXI.Texture.from('./dinosaur.png') // 将纹理放在“精灵“的图形对象上 const sprite = new PIXI.Sprite(texture)

// 往右移动精灵 sprite.x = 100 // 旋转45度 sprite.rotation = 45 * Math.PI / 180

// 将精灵添加到画布中 app.stage.addChild(sprite) ```

可见性

使用 visible 可以控制图片的可见性。

当图片的 visible 属性设置为 false 时就不可见了。

```js // 加载图片 const texture = PIXI.Texture.from('./dinosaur.png') // 将纹理放在“精灵“的图形对象上 const sprite = new PIXI.Sprite(texture)

// 隐藏图片 sprite.visible = false ```

透明度

通过 alpha 属性可以设置图片的不透明度，取值范围是 0 ~ 1

眨个眼就学会了Pixi.js_第39张图片

```js // 省略部分代码

// 加载图片 const texture = PIXI.Texture.from('./dinosaur.png') // 将纹理放在“精灵“的图形对象上 const sprite = new PIXI.Sprite(texture)

// 设置不透明度 sprite.alpha = 0.6 ```

滤镜

滤镜是个挺有意思的东西，滤镜可以用来增强图形的视觉效果，同时也可以用来实现各种特殊效果，例如模糊、发光等。Pixi.js中的滤镜功能十分简单易用，只需要在对象上添加相应的滤镜即可。

我拿几款滤镜出来讲解一下，其他的滤镜用法可以自行查阅文档，不难的～

模糊滤镜

使用 new PIXI.BlurFilter() 可以创建模糊滤镜。

眨个眼就学会了Pixi.js_第40张图片

```js // 创建画布 let app = new PIXI.Application({ width: 300, height: 300 // resizeTo: window })

// 将画布添加到页面 document.body.appendChild(app.view)

// 加载图片 const texture = PIXI.Texture.from('./dinosaur.png') // 将纹理放在“精灵“的图形对象上 const sprite = new PIXI.Sprite(texture)

// 模糊滤镜 const blurFilter = new PIXI.BlurFilter() // 模糊程度 blurFilter.blur = 10

// 将模糊滤镜添加到图片精灵上 sprite.filters = [blurFilter]

// 将精灵添加到画布中 app.stage.addChild(sprite) ```

细心的工友可能已经发现，添加滤镜是用数组存起来的：sprite.filters = [blurFilter] 。

这意味着一个元素可以同时使用多款滤镜组合。

上面的写法，其实还可以进一步简化

```js const blurFilter = new PIXI.BlurFilter() blurFilter.blur = 10

// 还可以这样写 const blurFilter = new PIXI.BlurFilter(10) ```

Alpha滤镜

Alpha滤镜可以设置元素的Alpha通道，也就是能设置元素的不透明度，正常的取值范围是 0 ~ 1。

眨个眼就学会了Pixi.js_第41张图片

```js // 省略部分代码

// Alpha滤镜 const alphaFilter = new PIXI.AlphaFilter(0.5)

// 将滤镜添加到精灵上 sprite.filters = [alphaFilter] ```

刚刚说了，正常取值 0 ~ 1，那不正常取值呢？

我测试了一下，如果取值超出1，元素就会出现过曝的效果。如果取值小于0，会保持透明。

眨个眼就学会了Pixi.js_第42张图片

js const alphaFilter = new PIXI.AlphaFilter(2)

其他滤镜我就不在本文过多讲解了，有兴趣的可以自行查阅文档。

事件

Pixi.js 提供了许多交互事件，以便用户可以与场景中的元素进行交互。在 Pixi.js 中，交互事件可以是鼠标事件，也可以是触摸事件。

由于用法比较简单，我用鼠标事件举例。

鼠标点击事件

点击事件会在用户单击鼠标或触摸屏时触发，在 Pixi.js 里，点击事件叫 click。

完整用法如下所示

眨个眼就学会了Pixi.js_第43张图片

```js // 创建画布 let app = new PIXI.Application({ width: 300, height: 300 // resizeTo: window })

// 将画布添加到页面 document.body.appendChild(app.view)

// 创建矩形 const rect = new PIXI.Graphics() rect.beginFill(0xff6600) rect.drawRect(0, 0, 64, 64) rect.endFill()

// 开启交互模式 rect.interactive = true // 设置指针样式 rect.cursor = "pointer"

// 矩形的点击事件 rect.on('click', () => { console.log('click') })

// 将精灵添加到画布中 app.stage.addChild(rect) ```

上面的代码有几个关键信息：

  1. 首先需要开启交互模式 rect.interactive = true
  2. 如果你希望鼠标移入元素内指针会发生变化，可以设置 rect.cursor = "pointer"
  3. 使用 xxx.on('事件名', 回调函数) 的方式监听指定事件。

如果是在移动端，你就需要使用 tap 代替 click 事件了。

点击查看 Pixi.js 更多事件

动画

动画是一种通过在一段时间内连续播放一系列图像来创造运动效果的艺术形式。在计算机图形学中，动画通常是通过在相邻的帧之间进行微小的变化来实现的。Pixi.js是一个强大的2D渲染引擎，可以用于创建各种类型的动画。

Pixi.js 提供了一个处理循环的对象 ticker，它是 Pixi.js 的核心组件之一。这个对象可以帮助我们创建各种类型的动画效果，例如移动、旋转、缩放等。ticker 可以自动更新场景，并在每个帧之间执行我们指定的代码。

比如，我想让矩形旋转起来。

眨个眼就学会了Pixi.js_第44张图片

```js // 创建画布 let app = new PIXI.Application({ width: 300, height: 300 // resizeTo: window })

// 将画布添加到页面 document.body.appendChild(app.view)

// 创建矩形 const rectangle = new PIXI.Graphics() rectangle.beginFill(0xff6600) rectangle.drawRect(0, 0, 64, 64) rectangle.endFill()

// 将精灵添加到画布中 app.stage.addChild(rectangle)

app.ticker.add((delta) => { // 让矩形旋转起来 rectangle.rotation += 0.1 * delta }) ```

ticker 是一个用来处理循环的对象，它负责在每一帧更新和重新渲染画布。

delta 是一个与时间相关的因子，通常用于处理动画循环。 delta 是上一帧和当前帧之间经过的时间的比例值。这个值可以用于确保动画在不同性能和速度的设备上尽可能保持一致的表现。

细心的工友可能发现了，矩形是围绕这它的左上角进行旋转的。

如果想让矩形进行中心旋转，可以设置它的 pivot 的值为自身宽高的一半。

47.gif

```js // 省略部分代码

// 创建矩形 const rectangle = new PIXI.Graphics() rectangle.beginFill(0xff6600) rectangle.drawRect(0, 0, 64, 64) rectangle.endFill()

// 修改矩形的轴心点 rectangle.pivot.set(32, 32)

// 将矩形移动到画布中间 rectangle.x = app.screen.width / 2 rectangle.y = app.screen.height / 2

app.ticker.add((delta) => { // 让矩形旋转起来 rectangle.rotation += 0.1 * delta }) ```

其他

Pixi.js 的功能远不止这些，由于篇幅有限，无法一一列举所有的功能。

之后有时间我还会继续创作 Pixi.js 相关的文章。~~之后~~ ，~~有时间~~，~~下次吧～~~

推荐阅读

《p5.js 光速入门》

《Canvas 从入门到劝朋友放弃(图解版)》

《SVG 从入门到后悔，怎么不早点学起来(图解版)》

《Fabric.js 从入门到__》

点赞 + 关注 + 收藏 = 学会了

你可能感兴趣的:(javascript,前端,npm,vue.js,开发语言)

  • element实现动态路由+面包屑 软件技术NINI vue案例vue.js前端
    el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi
  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 【加密社】Solidity 中的事件机制及其应用 加密社 闲侃区块链智能合约区块链
    加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • node.js学习 小猿L node.jsnode.js学习vim
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
  • springboot+vue项目实战一-创建SpringBoot简单项目 苹果酱0567 面试题汇总与解析springboot后端java中间件开发语言
    这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
  • JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy） 跳房子的前端 前端面试javascript开发语言ecmascript
    在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
  • react-intl——react国际化使用方案 苹果酱0567 面试题汇总与解析java开发语言中间件springboot后端
    国际化介绍i18n：internationalization国家化简称，首字母+首尾字母间隔的字母个数+尾字母，类似的还有k8s(Kubernetes)React-intl是React中最受欢迎的库。使用步骤安装#usenpmnpminstallreact-intl-D#useyarn项目入口文件配置//index.tsximportReactfrom"react";importReactDOMf
  • Vue( ElementUI入门、vue-cli安装) m0_l5z elementuivue.js
    一.ElementUI入门目录：1.ElementUI入门1.1ElementUI简介1.2Vue+ElementUI安装1.3开发示例2.搭建nodejs环境2.1nodejs介绍2.2npm是什么2.3nodejs环境搭建2.3.1下载2.3.2解压2.3.3配置环境变量2.3.4配置npm全局模块路径和cache默认安装位置2.3.5修改npm镜像提高下载速度2.3.6验证安装结果3.运行n
  • 博客网站制作教程 2401_85194651 javamaven
    首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
  • vue 创建项目报错：command failed: npm install --loglevel error 那鱼、会飞 vue.jsvue-cli3
    这个问题其实很好解决，只是很多种情况，逐一排除即可。稳下心来~vuecli3创建项目我的node版本是node14.15.0，（永远不要尝试最新版本）node各种版本下载地址：以往的版本|Node.js(nodejs.org)vue/[email protected]@vue/[email protected]（注意vue/cli2和vue/cli3的下载命名有所改变，2是-形式，3是/形式）其实报错
  • 更改npm镜像源为淘宝镜像 骆小骆 基于node.js
    npm常用指令后缀*最近复习了一下node.js整理了一下跟node.js相关的指令后缀*--save、-S参数意思是把模块的版本信息保存到dependencies（生产环境依赖）中，即你的package.json文件的dependencies字段中；–--save-dev、-D参数意思是把模块版本信息保存到devDependencies（开发环境依赖）中，即你的package.json文件的de
  • JavaScript `Map` 和 `WeakMap`详细解释 跳房子的前端 JavaScript原生方法javascript前端开发语言
    在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
  • 最简单将静态网页挂载到服务器上(不用nginx) 全能全知者 服务器nginx运维前端html笔记
    最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
  • 补充元象二面 Redstone Monstrosity 前端面试
    1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
  • 微信小程序开发注意事项 jun778895 微信小程序小程序
    微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
  • 切换淘宝最新npm镜像源是 hai40587 npm前端node.js
    切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
  • NPM私库搭建-verdaccio（Linux） Beam007 npmlinux前端
    1、安装nodelinux服务器安装nodea)、官网下载所需的node版本https://nodejs.org/dist/v14.21.0/b)、解压安装包若下载的是xxx.tar.xz文件，解压命令为tar-xvfxxx.tar.xzc)、修改环境变量修改：/etc/profile文件#SETPATHFORNODEJSexportNODE_HOME=NODEJS解压安装的路径exportPAT
  • 字节二面 Redstone Monstrosity 前端面试
    1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
  • 前端代码上传文件 余生逆风飞翔 前端javascript开发语言
    点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
  • VUE3 + xterm + nestjs实现web远程终端 或 连接开启SSH登录的路由器和交换机。 焚木灵 node.jsvue
    可远程连接系统终端或开启SSH登录的路由器和交换机。相关资料：xtermjs/xterm.js:Aterminalfortheweb(github.com)后端实现(NestJS)：1、安装依赖：npminstallnode-ssh@nestjs/websockets@nestjs/platform-socket.io2、我们将创建一个名为RemoteControlModule的NestJS模块，
  • uniapp实现动态标记效果详细步骤【前端开发】 2401_85123349 uni-app
    第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。
  • 高性能javascript--算法和流程控制 海淀萌狗
    -for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i
  • Vue 项目运行时，报错 Error: Cannot find module ‘node:path‘ 周bro vue.js前端javascriptnode.jsnpm
    node-v是否显示nodenpm-v报错Error:Cannotfindmodule‘node:path'是因为node版本和npm版本不匹配安装相对应的版本node版本10.16.0对应npm版本[email protected]执行该命令即可匹配版本官网https://nodejs.org/en/about/previous-releases
  • vue2实现复制,粘贴功能 周bro vue.jsjavascript前端
    一、需求说明在项目中点击按钮复制某行文本是很常见的应用场景，在Vue项目中实现复制功能需要借助vue-clipboard2插件。二、代码实现1、安装vue-clipboard2依赖（出现错误的话，可以试试切换成淘宝镜像源npmconfigsetregistryhttps://registry.npm.taobao.org）npminstall--savevue-clipboard22、在main.
  • 360前端星计划-动画可以这么玩 马小蜗
    动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
  • Vue + Express实现一个表单提交 九旬大爷的梦
    最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo
  • Vue3 vant组件库自动导入 不叫虎子 Vuevue.js前端javascript前端框架typescript
    实现：完整使用vant组件库文档安装：#Vue3项目，安装最新版Vantnpmivant#通过yarn安装yarnaddvant#通过pnpm安装pnpmaddvant【一】按需引入：https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart#fang-fa-er.-an-xu-yin-ru-zu-jian-yang-shi【二】批量引入在基于vit
  • 统一思想认识 永夜-极光 思想
    1.统一思想认识的基础,才能有的放矢  原因:    总有一种描述事物的方式最贴近本质,最容易让人理解.    如何让教育更轻松,在于找到最适合学生的方式.          难点在于,如何模拟对方的思维基础选择合适的方式.   &
  • Joda Time使用笔记 bylijinnan javajoda time
    Joda Time的介绍可以参考这篇文章： http://www.ibm.com/developerworks/cn/java/j-jodatime.html 工作中也常常用到Joda Time，为了避免每次使用都查API，记录一下常用的用法：     /** * DateTime变化（增减） */ @Tes
  • FileUtils API eksliang FileUtilsFileUtils API
    转载请出自出处：http://eksliang.iteye.com/blog/2217374 一、概述 这是一个Java操作文件的常用库，是Apache对java的IO包的封装，这里面有两个非常核心的类FilenameUtils跟FileUtils，其中FilenameUtils是对文件名操作的封装;FileUtils是文件封装，开发中对文件的操作，几乎都可以在这个框架里面找到。 非常的好用。
  • 各种新兴技术 不懂事的小屁孩 技术
    1:gradle Gradle 是以 Groovy 语言为基础，面向Java应用为主。基于DSL（领域特定语言）语法的自动化构建工具。 现在构建系统常用到maven工具，现在有更容易上手的gradle， 搭建java环境: http://www.ibm.com/developerworks/cn/opensource/os-cn-gradle/ 搭建android环境： http://m
  • tomcat6的https双向认证 酷的飞上天空 tomcat6
    1.生成服务器端证书 keytool -genkey -keyalg RSA -dname "cn=localhost,ou=sango,o=none,l=china,st=beijing,c=cn" -alias server -keypass password -keystore server.jks -storepass password -validity 36
  • 托管虚拟桌面市场势不可挡 蓝儿唯美
    用户还需要冗余的数据中心，dinCloud的高级副总裁兼首席营销官Ali Din指出。该公司转售一个MSP可以让用户登录并管理和提供服务的用于DaaS的云自动化控制台，提供服务或者MSP也可以自己来控制。 在某些情况下，MSP会在dinCloud的云服务上进行服务分层，如监控和补丁管理。 MSP的利润空间将根据其参与的程度而有所不同，Din说。 “我们有一些合作伙伴负责将我们推荐给客户作为个
  • spring学习——xml文件的配置 a-john spring
    在Spring的学习中，对于其xml文件的配置是必不可少的。在Spring的多种装配Bean的方式中，采用XML配置也是最常见的。以下是一个简单的XML配置文件： <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.or
  • HDU 4342 History repeat itself 模拟 aijuans 模拟
    来源：http://acm.hdu.edu.cn/showproblem.php?pid=4342 题意：首先让求第几个非平方数，然后求从1到该数之间的每个sqrt(i)的下取整的和。 思路：一个简单的模拟题目，但是由于数据范围大，需要用__int64。我们可以首先把平方数筛选出来，假如让求第n个非平方数的话，看n前面有多少个平方数，假设有x个，则第n个非平方数就是n+x。注意两种特殊情况，即
  • java中最常用jar包的用途 asia007 java
    java中最常用jar包的用途 jar包用途axis.jarSOAP引擎包commons-discovery-0.2.jar用来发现、查找和实现可插入式接口，提供一些一般类实例化、单件的生命周期管理的常用方法.jaxrpc.jarAxis运行所需要的组件包saaj.jar创建到端点的点到点连接的方法、创建并处理SOAP消息和附件的方法，以及接收和处理SOAP错误的方法.  w
  • ajax获取Struts框架中的json编码异常和Struts中的主控制器异常的解决办法 百合不是茶 jsjson编码返回异常
    一:ajax获取自定义Struts框架中的json编码  出现以下 问题:       1,强制flush输出  json编码打印在首页 2, 不强制flush js会解析json 打印出来的是错误的jsp页面   却没有跳转到错误页面 3,  ajax中的dataType的json 改为text 会
  • JUnit使用的设计模式 bijian1013 java设计模式JUnit
    JUnit源代码涉及使用了大量设计模式 1、模板方法模式（Template Method）         定义一个操作中的算法骨架，而将一些步骤延伸到子类中去，使得子类可以不改变一个算法的结构，即可重新定义该算法的某些特定步骤。这里需要复用的是算法的结构，也就是步骤，而步骤的实现可以在子类中完成。   
  • Linux常用命令（摘录） sunjing crondchkconfig
    chkconfig --list   查看linux所有服务 chkconfig --add servicename 添加linux服务 netstat -apn | grep 8080  查看端口占用 env 查看所有环境变量 echo $JAVA_HOME 查看JAVA_HOME环境变量   安装编译器 yum install -y gcc
  • 【Hadoop一】Hadoop伪集群环境搭建 bit1129 hadoop
     结合网上多份文档，不断反复的修正hadoop启动和运行过程中出现的问题，终于把Hadoop2.5.2伪分布式安装起来，跑通了wordcount例子。Hadoop的安装复杂性的体现之一是，Hadoop的安装文档非常多，但是能一个文档走下来的少之又少，尤其是Hadoop不同版本的配置差异非常的大。Hadoop2.5.2于前两天发布，但是它的配置跟2.5.0，2.5.1没有分别。 &nb
  • Anychart图表系列五之事件监听 白糖_ chart
    创建图表事件监听非常简单：首先是通过addEventListener('监听类型',js监听方法)添加事件监听，然后在js监听方法中定义具体监听逻辑。 以钻取操作为例，当用户点击图表某一个point的时候弹出point的name和value，代码如下： <script> //创建AnyChart var chart = new AnyChart(); //添加钻取操作&quo
  • Web前端相关段子 braveCS web前端
    Web标准：结构、样式和行为分离   使用语义化标签 0）标签的语义：使用有良好语义的标签，能够很好地实现自我解释，方便搜索引擎理解网页结构，抓取重要内容。去样式后也会根据浏览器的默认样式很好的组织网页内容，具有很好的可读性，从而实现对特殊终端的兼容。 1）div和span是没有语义的：只是分别用作块级元素和行内元素的区域分隔符。当页面内标签无法满足设计需求时，才会适当添加div
  • 编程之美-24点游戏 bylijinnan 编程之美
    import java.util.ArrayList; import java.util.Arrays; import java.util.HashSet; import java.util.List; import java.util.Random; import java.util.Set; public class PointGame { /**编程之美
  • 主页面子页面传值总结 chengxuyuancsdn 总结
    1、showModalDialog returnValue是javascript中html的window对象的属性,目的是返回窗口值,当用window.showModalDialog函数打开一个IE的模式窗口时,用于返回窗口的值 主界面 var sonValue=window.showModalDialog("son.jsp"); 子界面 window.retu
  • [网络与经济]互联网+的含义 comsci 互联网+
          互联网+后面是一个人的名字 = 网络控制系统       互联网+你的名字 =  网络个人数据库       每日提示:如果人觉得不舒服,千万不要外出到处走动,就呆在床上,玩玩手游,更不能够去开车,现在交通状况不
  • oracle 创建视图 with check option daizj 视图vieworalce
    我们来看下面的例子： create or replace view testview as select empno,ename from emp where ename like ‘M%’ with check option; 这里我们创建了一个视图，并使用了with check option来限制了视图。 然后我们来看一下视图包含的结果： select * from testv
  • ToastPlugin插件在cordova3.3下使用 dibov Cordova
        自己开发的Todos应用，想实现“ 再按一次返回键退出程序 ”的功能，采用网上的ToastPlugins插件，发现代码或文章基本都是老版本，运行问题比较多。折腾了好久才弄好。下面吧基于cordova3.3下的ToastPlugins相关代码共享。       ToastPlugin.java package&nbs
  • C语言22个系统函数 dcj3sjt126com cfunction
    C语言系统函数一、数学函数下列函数存放在math.h头文件中Double floor(double num) 求出不大于num的最大数。Double fmod(x, y) 求整数x/y的余数。Double frexp(num, exp); double num; int *exp; 将num分为数字部分（尾数）x和 以2位的指数部分n，即num=x*2n，指数n存放在exp指向的变量中，返回x。D
  • 开发一个类的流程 dcj3sjt126com 开发
    本人近日根据自己的开发经验总结了一个类的开发流程。这个流程适用于单独开发的构件，并不适用于对一个项目中的系统对象开发。开发出的类可以存入私人类库，供以后复用。   以下是开发流程： 1. 明确类的功能，抽象出类的大概结构 2. 初步设想类的接口 3. 类名设计（驼峰式命名） 4. 属性设置(权限设置) 判断某些变量是否有必要作为成员属
  • java 并发 shuizhaosi888 java 并发
    能够写出高伸缩性的并发是一门艺术   在JAVA SE5中新增了3个包 java.util.concurrent java.util.concurrent.atomic java.util.concurrent.locks 在java的内存模型中，类的实例字段、静态字段和构成数组的对象元素都会被多个线程所共享，局部变量与方法参数都是线程私有的，不会被共享。
  • Spring Security（11）——匿名认证 234390216 Spring SecurityROLE_ANNOYMOUS匿名
    匿名认证 目录 1.1     配置 1.2     AuthenticationTrustResolver          对于匿名访问的用户，Spring Security支持为其建立一个匿名的AnonymousAuthenticat
  • NODEJS项目实践0.2[ express,ajax通信...] 逐行分析JS源代码 Ajaxnodejsexpress
      一、前言         通过上节学习，我们已经        ubuntu系统搭建了一个可以访问的nodejs系统，并做了nginx转发。本节原要做web端服务 及 mongodb的存取，但写着写着，web端就
  • 在Struts2 的Action中怎样获取表单提交上来的多个checkbox的值 lhbthanks javahtmlstrutscheckbox
    第一种方法：获取结果String类型 在 Action 中获得的是一个 String 型数据，每一个被选中的 checkbox 的 value 被拼接在一起，每个值之间以逗号隔开(,)。 所以在 Action 中定义一个跟 checkbox 的 name 同名的属性来接收这些被选中的 checkbox 的 value 即可。 以下是实现的代码： 前台 HTML 代码：
  • 003.Kafka基本概念 nweiren hadoopkafka
    Kafka基本概念：Topic、Partition、Message、Producer、Broker、Consumer。 Topic：             消息源（Message）的分类。 Partition：             Topic物理上的分组，一
  • Linux环境下安装JDK roadrunners jdklinux
    1、准备工作 创建JDK的安装目录： mkdir -p /usr/java/   下载JDK，找到适合自己系统的JDK版本进行下载： http://www.oracle.com/technetwork/java/javase/downloads/index.html   把JDK安装包下载到/usr/java/目录，然后进行解压： tar -zxvf jre-7
  • Linux忘记root密码的解决思路 tomcat_oracle linux
    1：使用同版本的linux启动系统，chroot到忘记密码的根分区passwd改密码 　　2：grub启动菜单中加入init=/bin/bash进入系统，不过这时挂载的是只读分区。根据系统的分区情况进一步判断. 　　3: grub启动菜单中加入 single以单用户进入系统. 　　4:用以上方法mount到根分区把/etc/passwd中的root密码去除 　　例如: 　　ro
  • 跨浏览器 HTML5 postMessage 方法以及 message 事件模拟实现 xueyou jsonpjquery框架UIhtml5
    postMessage 是 HTML5 新方法，它可以实现跨域窗口之间通讯。到目前为止，只有 IE8+, Firefox 3, Opera 9, Chrome 3和 Safari 4 支持，而本篇文章主要讲述 postMessage 方法与 message 事件跨浏览器实现。postMessage 方法 JSONP 技术不一样，前者是前端擅长跨域文档数据即时通讯，后者擅长针对跨域服务端数据通讯，p
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他