从 2017 年到 2020 年，我花了大约 4 年的时间，从零到一，实现了一个可切换 WebGL 和 Canvas2D 渲染的，跨平台支持浏览器、SSR、小程序，基于 DOM 结构和支持响应式的，高性能支持批量渲染、针对可视化场景优化、支持 WebWorker 的图形系统——SpriteJS。在这个“造轮子”过程中，我一步步将一个很简陋的渲染库，变成一个能 …
最新内容
本文简介点赞 + 关注 + 收藏 = 学会了在前端领域，如果只是懂 Vue 或者 React ，未来在职场的竞争力可能会比较弱。根据我多年在家待业经验来看，前端未来在 数据可视化 和 AI 这两个领域会比较香，而 Canvas 是数据可视化在前端方面的基础技术。本文就用光的速度将 canvas 给入门了。01.gif要入门一个技术，前期最重要是快！所以本文只 …
绘制组合效果的图形将一个图形绘制在另一个图形之上，图形效果会受制于图形的绘制顺序，可利用globalCompositeOperation属性组合图形，前面绘制贝塞尔曲线时，我就已经用过这个属性了，绘制了多条凡尔赛曲线，组合成了一个图形。利用globalCompositeOperation属性在已有图形后面再画新图形，还可遮盖、清除（比clear方法强劲的多） …
前言用 QML 来实现一个呼吸动画效果的字体，非常酷炫，主要使用 Glow 组件来实现，然后通过控制透明度的改变来实现想要的效果，代码非常简单。正文先来看看效果源码：Item {Rectangle {anchors.fill: parentcolor: "black"}Text {id: textanchors.fill: parenttex …
二维码我们每天都在用，尤其是在微信上，但是，你确定你了解二维码吗？什么是二维码按照维基百科的解释：二维码（又叫二维条码）是指在一维条码的基础上扩展出另一维具有可读性的条码，使用黑白矩形图案表示二进制数据，被设备扫描后可获取其中所包含的信息。一维条码的宽度记载着数据，而其长度没有记载数据。二维条码的长度、宽度均记载着数据。二维码最早发明于日本，现在已经广泛应用 …
●今天，我们来通过 canvas 提供的方法开绘制一些简单的形状绘制矩形绘制基础矩形。下面一起看看好程序员老师的讲解吧~●语法 : 工具箱.rect( 矩形起点 x 轴坐标, 矩形起点 y 轴坐标, 矩形宽度, 矩形高度 ) 0. 获取到页面上的 canvas 标签元素节点const canvasEle = document.querySelector(&# …
目录1.绘图入门（绘制一个圆）1.第一步1.先定义一个Mypanel，继承JPanel，画图行就在面板上画。Mypanel可以理解为一个画板Graphics可以理解为一个画笔，提供了很多绘图的方法class MyPanel extends JPanel{ @Overridepublic void paint(Graphics g) { 绘图方法super.p …
摘要 在WPF用户界面中，绘制2D图形内容的最简单方法是使用形状（shape）——专门用于表示简单的直线、椭圆、矩形以及多变形的一些类。从技术角度看，形状就是所谓的绘图图元(primitive)。可组合这些基本元素来创建更复杂的图形。 关于WPF中形状的重要细节是，它们都继承自FrameworkElement类。因此，形状是元素。这样会带来许多重要的结 …
在前端开发中，HTML5 的 <canvas> 元素为我们提供了一个强大的绘图平台。通过 JavaScript 控制 Canvas，你可以创建图表、游戏、动画甚至是图像处理工具。本文将带你一步步实现一个简单的动画 Demo，帮助你快速入门 Canvas。一、什么是 Canvas？<canvas> 是 HTML5 中新增的一个标签，它 …
灰模原型，是我接触产品的时候老大传递给我的一个概念。在所谓的线框图、低保真高保真的理论里面，显得略显突兀。身边的很多产品同学都没有听说过这个明显好用得多的文件类型。最开始的时候完全不懂，老大也没有多余的时间给我们解释，只能靠看着之前的原型，一步步摸索其概念和做法。灰模原型* 灰模原型是基于IA和功能列表的* 灰模原型一般使用尺寸：320*480（App）* …