最近经常会有同学跟我说前端不景气，想转WebGL，希望我给他一些指导。 其实我并不觉得自己有多厉害，所以说不上指导，只能给大家分享一些自己的经验和学习路线 。 先简单说一下我对当下2024年的市场背景

前言 一直以来，我对于浏览器的渲染进程都是囫囵吞枣般的认知，在自己阅读了几篇优秀的博客后，用更加通俗的语言写下这篇文章，希望大家以及自己对渲染进程有一个彻底的理解。 流程 浏览器的进程 浏览器的进程目

这个方案，额。。。可能这就是程序员头发少的原因吧。费尽千辛万苦画好，万一视觉调整一下。。这个方案开发费时费力，不好维护。虽然web端有react-canvas，小程序也有一些工具，但目前都只是封装了绘制矩形、文字等方法，对于布局来说还是需要手动计算宽高以及位置，没有完全解决痛点…

用canvas画了一个甘特图的demo。项目基于zrender，功能比较完整可用，也算是记录最近一些时间的研究和学习，现在写文分享给大家，这是我的第一篇文章，希望大家喜欢：）

注：下面实现项目效果主要是关于JavaScript方面的，下面仅仅是提供实现思路的代码，并非全部代码。 css代码可以根据个人习惯进行美化界面，所以这里就不写css的代码了，大家可以直接看项目代码或者从开发者工具中审查元素观看。如果有问题可以私聊我，我觉得问题不大。 首先，准备…

起初在boss上看到一个面试官发题，利用canvas实现图片裁切，在学习过程中实现三个小功能，并在此基础上深入学习明白相关工具使用。

快速入门canvas并实现简单的白板，需要画笔、檫除、图形、文本工具、撤销等功能。本文只做简单实现，不做太复杂的功能。比如图形只实现矩形和椭圆形，不做五角星、三角形、五边形等多边形的实现

canvas并不会主动维护一个层级关系，我们能做的事情，只有画圆、画矩形、画线等，至于像DOM那样，在一个节点上调用appendChild来给这个节点添加子节点这种事情，在canvas里是不存在的..

实现一个图片编辑组件，包含画笔、记号笔、折线、矩形、马赛克、裁剪、编辑历史记录(撤销和重做)、更改颜色和线宽功能，以及取消编辑和保存。未经作者授权禁止转载！