canvas

用户251916242711

Canvas之图形变换图形变换可以分为移动，旋转，放缩，以及矩阵斜切。这里模拟了一个坐标系，可以看到，当使用 ctx.translate 时，整个坐标系都会进行移动，第一个参数是x偏移，第二个参数是y偏移。这种移动是进行位置变化，是瞬间完成的，不是动画。当整个坐标系都跟着移动时，可以发现，设置在 translate 之前的图形不受影响，并没有发生移动。

用Three.js打造炫酷3D地球：从入门到实现交互式体验大家好，我是FogLetter，今天给大家带来一篇关于使用Three.js创建3D地球的完整教程。最近看了一下小米SU7官网用WebGL实现的酷炫3D交互效果，让我也想带大家探索一下3D网页开发的魅力！

我开源了一款 Canvas “瑞士军刀”，十几种“特效与工具”开箱即用一直以来，我都对 Canvas 的强大能力非常着迷，它就像一块充满无限可能的数字画布。但是要实现的酷炫效果，必须写很多代码，比如烟花、数字雨，都要翻阅大量资料，从零开始“造轮子”。

德育处主任

p5.js 用 beginGeometry () 和 endGeometry () 打造自定义 3D 模型点赞 + 关注 + 收藏 = 学会了在 p5.js 的 3D 绘图中，这两个函数是一对 "黄金搭档"：

德育处主任

p5.js 3D模型（model）入门指南点赞 + 关注 + 收藏 = 学会了在 p5.js 中，model()是专门用来绘制 3D 模型的 "画笔"。它的作用很简单：把一个提前准备好的 3D 几何对象（p5.Geometry）画到画布上。

Three.js 利用 shader 实现 3D 热力图当上图缩放变小的时候，相邻的热力点会进行颜色混合，效果如下可能会有这样的需求，希望在原来 three.js 3D 地图的基础上，加上热力图。

德育处主任

p5.js 加载 3D 模型（loadModel）点赞 + 关注 + 收藏 = 学会了loadModel() 是 p5.js 中用于加载 3D 模型的核心函数，它能将 OBJ 或 STL 格式的 3D 模型文件转换为 p5.js 可处理的 p5.Geometry 对象，之后可以通过 model() 函数在画布上显示。

用户251916242711

Canvas之颜色渐变我们使用 ctx.createLinearGradient 来创建一个渐变对象，可以传入两个点的坐标，来表示渐变的方向。渐变方向可以是横向，纵向或者斜向，但这个坐标是基于画布坐标系的。如果渐变区域和图形区域相同，则正好可以显示出来，如果渐变区域大，则只能显示一部分，渐变区域小，则会将渐变区域两边拉长到图形区域。使用 gradient.addColorStop 来对创建的对象添加渐变的颜色。第一个是比例，第二个是颜色。这和 css 设置类似。并且和图案填充类似，可以设置填充样式或描边样式为已创建的渐变对象

德育处主任

p5.js 从零开始创建 3D 模型，createModel入门指南点赞 + 关注 + 收藏 = 学会了如果你已经开始探索 p5.js 的 3D 世界，那么createModel()这个 API 绝对是你需要掌握的强大工具。它允许你创建自定义的 3D 几何模型，为你的创意提供无限可能。

德育处主任

p5.js 三角形triangle的用法点赞 + 关注 + 收藏 = 学会了如果你刚接触 p5.js，想画一个三角形，那 triangle() 这个 API 就是你的好帮手！

德育处主任

p5.js 正方形square的基础用法点赞 + 关注 + 收藏 = 学会了在 p5.js 中，square() 是一个用于绘制正方形的便捷函数。与使用 rect() 绘制正方形相比，square() 更加简洁，因为它只需要指定边长而不需要分别指定宽和高。

德育处主任

p5.js 矩形rect绘制教程点赞 + 关注 + 收藏 = 学会了用 p5.js 绘制矩形有个很方便的方法：react()。这个简单的函数能帮我们画出普通矩形、圆角矩形，甚至在 3D 模式下调整细节。不过我们先从最基础的开始，一步步学会用它。

用户251916242711

Canvas之图像合成我们可以将前后两个图像进行合成。通过设置 ctx.globalCompositeOperation 可以选择图片合成的方式，这里指的是路径合成。设置时需要放在前后两个图形中间。路径合成也是形状合成。有 source-over,in,out,atop ，分别为重叠部分展示后面，重叠后面部分，不重叠后面部分，前面重叠后面，destination 也有类似的四个，只是将后面换为前面为中心。copy 展示后面，xor 异或，展示前后两个不重叠的部分。

敲敲敲敲暴你脑袋

Cesium绘制3D热力山丘图之前用three.js和Canvas添加热力平面和热力山丘图，等高线(等值线)，热力阶梯，是时候给cesium也添加个热力！

德育处主任

p5.js 四边形（quad）的基础用法点赞 + 关注 + 收藏 = 学会了如果你刚接触 p5.js，想画各种四边形（比如正方形、矩形、菱形），可以用 quad() 方法直接绘制。

德育处主任

p5.js 入门：用 point () 绘制点的超简单教程点赞 + 关注 + 收藏 = 学会了刚接触 p5.js 时，要是想从最基础的图形入手，point () 会是个不错的选择。它就像一支小巧的画笔，能在画布上精准画出一个个 “点”—— 操作起来很简单，却能组合出不少有趣的效果。接下来会结合具体例子，带你慢慢熟悉它的用法，即使是新手也能跟着试起来。

德育处主任

p5.js 线段的用法点赞 + 关注 + 收藏 = 学会了线段是最基础的图形元素，就像画画时的 “线条”—— 用它可以勾勒轮廓、连接形状，甚至组合出复杂的图案。p5.js 的 line() 函数能轻松画出线段，语法比原生 Canvas 要好理解多了。

拾光拾趣录

电影院选座功能：Canvas 的实战艺术与性能哲学千个座位如何丝滑渲染？你在接手重构某影院 Web 选座系统时，遭遇了性能噩梦：核心矛盾：DOM 的盒模型计算成本 vs 座位图的密集渲染需求。

在写作软件中画地图，Canvas 绘图在地图设计中应用💡 本文详细介绍如何在小说写作软件中集成 Canvas 绘图功能，实现自定义地图设计工具，包括多种绘图工具、资源管理、缩放控制等核心功能。

用户251916242711

Canvas之使用图像Canvas 可以引入图像，可以是image，video，canvas 格式。image 可以是图片路径或者是base64格式。当我们创建了一个图片之后，需要在图片加载之后进行绘制，因为图片的绘制速度远大于图片的加载速度。可以只放图像坐标，就显示原大小。可以放入图像宽高，就表示显示在画布上的大小。还可以加入两组数据，前一组表示原图片截图坐标，大小，后一组表示放在画布上的坐标，大小。当然可能经过了两次缩放。