前言 学习目标 创建Scene对象 理解Scene对象的功能和运行逻辑 知识点 渲染封装 坐标转换 前情回顾 之前我们创建了Group对象，接下来我们建立Scene对象。 1-Scene对象的功能分析 Scene 对象是场...

前言 今天网上瞎逛，看到了一个拾色器实现的原理，瞅了两眼发现代码这么少，这么简单。 于是，勾起了我一泡浓厚的兴趣。 赶紧赶工，润色了一下，这里，言简意赅的把里面包含的小知识点 和 测试...

我正在参加「掘金·启航计划」 前言 最近也是在学习canvas，跟着绘制了一个最基本柱状图，canvas是一个基于HTML5的绘图标准，提供了一系列的API可以用来绘制图形，包括直线、矩形、圆形、文本等...

前言 学习目标 根据任意图形的变换原理，修改之前变换图案的代码，使其可以变换任意图形 知识点 矩阵变换 1-Object2D 整体代码如下： import { Vector2 } from '../math/Vector2' import { Grou...

2023-0801 原文链接 #Canvas 介绍 canvas：使用脚本 (通常为 JavaScript) 来绘制图形的 HTML 元素。 本人遍历了以下两份文档，学习完就相当于有了笔和纸，至于最后能画出什么，则需要在 canvas ...

前言 学习目标 快速创建vue+vite+ts+vitest 项目 搭建测试环境 知识点 vue vite ts vitest 1-创建vite+vue3.0+ts 项目 在敲代码之前，我们先初始化一个专门写图形组件的项目。 1.建立vue 项目。...

本次教程我们将介绍如何基于 p5.js 来实现经典的 starfield 星空隧道的的效果，教程将会涉及到粒子系统和物体的运动模拟等。 从上面的运行效果中可以看到很多星星从屏幕中心出现，然后以直线向...

本文简介 在刚接触 p5.js 时我以为这只是一个艺术方向的 canvas 库，没想到它还支持视频文件和视频流的播放。 本文简单讲讲如何使用 P5.js 播放视频。 播放视频文件 p5.js 除了可以使用 video ...

前言 学习目标 创建Group对象 知识点 集合 前情回顾 之前我们创建了Img对象，接下来我们建立Group对象。 1-Group对象的功能 Group 是二维图形的集合，它可以对这些图形进行管理，比如增删改查。...

使用canvas实现TOPO关系图 使用canvas从基本得一根线、一个形状到一个完整得topo关系图，需要面对那些问题呢？ 再社区中有很对基于canvas封装得图库，大大减少了使用canvas得计算等相关成本。比...

前言 在如今数字化时代，Web应用程序已成为了人们日常生活的一部分。绘图应用是其中一种常见的应用类型，他可以让用户在Web浏览器中进行绘图和创作。本文将介绍如何使用React构建一个简单的绘图...

前言 学习目标 创建T恤图案编辑器 知识点 TransformControler 的应用 canvas 全局合成 canvas 图层控制 DOM和图形组件的数据传递 1-搭建前端静态 1-1-页面结构 T恤图案编辑器的页面结构如下图所...

哈喽大家好啊，我是广州小井。从上两个小节我们已经掌握了立方体的绘制方式，并且我们可以通过一定的手段（旋转）来观察出我们绘制的是一个立方体而不是普通的矩形。那么在这其中，涉及到了一些...

前言 课前准备 具备前端基础，如HTML、css、js。 多多少少敲过一点vue。 具备canvas基础，若没有，可以看一下我的《canvas从入门到放飞自我-基础篇》 学习目标 以面向对象的思路架构canvas。 使...

本文简介 p5.js 作为一款艺术类的 canvas 库，对颜色方面的支持是挺下功夫的，比如本文要介绍的渐变方法。 lerpColor() 要实现渐变效果，可以使用 lerpColor() 方法。 lerpColor 的作用是混合两...

本文简介 点赞 + 关注 + 收藏 = 学会了 这几天在整理书柜时看到这套书，看到梵高，想起他的点彩画。 想到点彩画派，不得不提的一个画家叫乔治·皮埃尔·秀拉。据说梵高也模仿过他的画作。 我引...

在 Dygraph 中，如果我们想展示竖线的时候，我们应该怎么做呢？ 一开始，想着直接手动 canvas 绘图？但是跟 Dygraph 上的默认行为，比如 hover 要做适配，很是麻烦。那么 Dygraph 中就没有实现...

前言 在业务中需要一种体现物体在平面图上的位置关系视图，比如IBMS中设备在楼层平面中的位置，同时可能有文字描述信息，实现这个最开始是dom加拖拽实现，但频繁操作dom太影响性能，所以使用Can...