首页
沸点
课程
数据标注
HOT
AI Coding
更多
直播
活动
APP
插件
直播
活动
APP
插件
搜索历史
清空
创作者中心
写文章
发沸点
写笔记
写代码
草稿箱
创作灵感
查看更多
登录
注册
如何实现一个canvas渲染引擎
HYCS
创建于2026-05-10
订阅专栏
本系列文章将会从0开始,实现一个Canvas渲染引擎,并介绍每一步的实现细节;这个渲染引擎支持canvas2D、webGL、webGPU三种渲染方式并且可以无缝切换。
暂无订阅
共9篇文章
创建于2026-05-10
订阅专栏
默认顺序
默认顺序
最早发布
最新发布
如何实现一个canvas渲染引擎(前言)
本系列文章将会从0开始,实现一个canvas渲染引擎,并介绍每一步的实现细节,在这个渲染引擎里......
如何实现一个Canvas渲染引擎(四):事件系统
原生的canvas并没有提供事件系统,而事件系统又是一个canvas渲染引擎必不可少的一个模块,它实在是太重要了,想象一下,我们在画布上创建了一堆节点,然后我们点击了画布,这个时候,我们怎么知道...
如何实现一个Canvas渲染引擎(六):webGL渲染(Part 2)
webGL支持的最复杂的图形就是三角形了,对于任何我们想要绘制的图形,我们都需要将其转化成三角形(三角剖分)......本文的内容则是讲述如何将这些数据送入GPU,让GPU帮我们将其绘制出来
如何实现一个Canvas渲染引擎(八):图片处理
如果你在使用一个Canvas渲染引擎,那么你一定会使用图片作为画布上的元素,因为很多复杂的图形,是很难通过Graphics类来手动构建的,所以图片处理是一个Canvas渲染引擎必不可少的功能,甚...
如何实现一个Canvas渲染引擎(一):节点和层级关系
canvas并不会主动维护一个层级关系,我们能做的事情,只有画圆、画矩形、画线等,至于像DOM那样,在一个节点上调用appendChild来给这个节点添加子节点这种事情,在canvas里是不存在的..
如何实现一个Canvas渲染引擎(二):Graphics类
本文将会介绍Graphics类支持的所有图形,一些简单的图形,将会使用比较短的篇幅来介绍,重点将会放在曲线等复杂图形的绘制上,如贝塞尔曲线、圆弧等...
如何实现一个Canvas渲染引擎(三):碰撞检测(射线法和像素标记法)
假设我们现在在canvas上画了很多个节点(DisplayObject),这些节点形成了一套层级关系,我们将鼠标移动到canvas元素上并点击了一下左键,这个时候,如何判断鼠标点到了哪个节点呢....
如何实现一个Canvas渲染引擎(五):webGL渲染(Part 1)
在2011年左右,webGL登陆了浏览器,在这之前,我们已经可以用canvas来构建高性能(相较于DOM)的web端应用了,虽然canvas相对于DOM比较底层一些,但是canvas始终是封装...
如何实现一个Canvas渲染引擎(七):webGPU渲染
谷歌于2023年4月份在chrome113上发布了webGPU,它的前景是非常优秀的,甚至可以说是web端渲染的未来,很多基于webGL的引擎已经开始支持webGPU了,如pixi,three...