![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
canvas
很甜的西瓜
技术交流,技术研究。做自己想做的,做好自己想做的.
展开
-
glsl shader中实现canvas中的createRadialGradient效果
在网站找了好久,也没有发现有现成用shader去实现canvas radialGradient效果的.大部分都是简单的只有一个中心圆或者通过canvas绘制渐变再作为纹理图像进行贴图,没有类似像canvas有内圆与外圆,两圆心位置不一样,可以用实现类似焦点视锥效果.然后想到canvas底层用的是skia,就去看了一下skia源码,在skia官网搜索了一篇关于。原创 2024-07-29 17:52:45 · 321 阅读 · 0 评论 -
光栅化之扫描填充三角形
重心坐标比较简单,取最大包围合再计算点是否在三角形内就行,再根据重心坐标返回的alpha,beta,gamma三个权重值计算 uv映射和depth深度缓冲值,因为是求的重心坐标,感觉效果比插值的要好一点。插值计算的话,首先需要逐行扫描填充,按y排序从左到右去填充三角形,再根据a,b,c三个顶点坐标信息来求uv插值和z插值,过程稍微麻烦一点,但性能明显好一点,纹理不是采用的就近原则,是用的双线线插值计算,所以也耗了一点性能,加载的模型文件效果还是显示出来了,原创 2023-08-19 20:56:20 · 301 阅读 · 0 评论 -
实现简单纯Canvas文本输入框
最重要的是保证canvas的字体样式要与元素的字体样式一样,这样才能利用textarea的兴标和选中区体系。一、最简单可能是用dom渲染一个input,覆盖在图形上面进行文本编辑,编辑完再把内容更新到图形.这样简单,但是缺点也明显,就是它不是真正绘制在canvas上面,没有层级。下面看一下效果,因为也是花了二三个小时,弄了一个比较简单的,输入选中,光标指定位置生入,性能也是可以,输入响应很快。技术细节有一个地方,我是这样做的。选中区的文本颜色和背景要高亮,如果做文本计算的话,那有点麻烦,而且性能也不好/。原创 2023-08-16 21:18:05 · 2045 阅读 · 0 评论 -
canvas图形等距、间距测量
首先定义画线(实线、虚线)、画面(矩形块)、值(距离)等渲染数据结构(渲染数据只提供坐标信息和一些基本样式属性,不需要依赖渲染是dom,还是canvas或webgl) 侦测数据,取每个图形的包盒信息,再根据包盒信息抽象成方向(left top right bottom middle center)。这样在计算时,可以不需要通过if来判断了,直接对比相同的方向数值是否在区间内(吸附距离) 吸附(吸附完,选中目标的位置有可能发生变动,需要更新选中目标) 侦测行为:拖动时,按alt时,resize时等原创 2023-06-28 21:20:47 · 487 阅读 · 1 评论 -
HiloJs俄罗斯方块和消方块
无论任何编程语言都有设计模式一说,其实在我们很多人在项目的开发过程中就用到了很多模式。但是不知道这是什么模式或者很多知道或了解一些模式。但是又不知道如何去应用。在什么地方去用。目录设计模式适配器模式场景想象:...原创 2023-05-22 20:43:59 · 261 阅读 · 0 评论 -
使用regl测试glsl shader 一些尝试代码
【代码】使用regl测试glsl shader 一些尝试代码。原创 2023-05-22 20:23:35 · 90 阅读 · 0 评论 -
一些简单的物理效果
【代码】一些简单的物理效果。原创 2023-05-22 20:16:05 · 113 阅读 · 0 评论 -
绘制图形的几种方式,性能优化测试
主要测试 canvas和webgl绘制2d平面圆的效率.随机生成20万个均匀分布的圆,圆的颜色和位置随机每个测试100次,取平均值时长下面每种测试数据都是通过不同手段,最终绘制圆:性能测试-每个图创建一个路径,耗时:376豪秒(每个圆创建一条路径,填充颜色)性能测试-颜色分组绘制,并且只创建一个路径,耗时:160豪秒(一条路径只能填充一种颜色,所以要分组)性能测试-createPattern,耗时:450.27豪秒 (比如复杂的图形绘制太麻烦,可以只绘制一遍,通过个来设置)性.原创 2021-09-21 16:02:07 · 976 阅读 · 0 评论 -
写一个小的粒子渲染器
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title></title> <script src="https://cdn.jsdelivr.net/npm/signals@1.0.0/dist/signa...原创 2019-08-19 18:24:20 · 276 阅读 · 0 评论 -
让你快速了解threejs的一些操作的demo代码
里面部分代码来自webgl教程<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script sr...原创 2019-08-06 10:55:17 · 3280 阅读 · 0 评论 -
让你快速了解Phaserhtml5游戏开发流程的一些操作的demo代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv...原创 2019-08-06 10:38:22 · 793 阅读 · 0 评论 -
让你快速了解cavans针对图像处理一些操作的demo代码
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="https://cdn.jsd...原创 2019-08-06 10:33:12 · 289 阅读 · 0 评论 -
让你快速了解cavans翻转、矩阵、矢量一些操作的demo代码
<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script s...原创 2019-08-06 10:31:09 · 175 阅读 · 0 评论 -
各种多边形算法
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <script src="/scripts/mathematicsAndPhysics/linearAlgebra/matrix/gl-matrix/2.7.1/dist/gl-matrix.js"></s...原创 2019-07-11 19:41:50 · 1341 阅读 · 0 评论 -
canvas 基本应用开发
前段时间想深入了解一下canvas,就写了一个canvas库.这段时间在忙其他的怕之前写的东西忘记了,特意想在这上面记一下。我不会一下写完,会慢慢更新。先看一段代码: // 创建一个画布渲染器 var _DxCanvas = new DxRender('#test', { width: 1500, height:1500,...原创 2018-08-22 17:55:38 · 1073 阅读 · 0 评论