目录 一. 方案1:ThreeBSP.js或ThreeCSG.js扩展库 二. 方案2:平面镂空模型拉伸 三. 方案3:Cinema 4D建模后输出模型文件 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端>原创博文目录 华为云社区地址:[你要的前端打怪升级指南] 浮雕模型,简单地说就是在木板上刻字时所形成的效果,如果把字的部分都剔除掉,就得到一个凹浮雕模型,如果把字以外的部分都剔除掉,就得到一个凸浮雕模型.本文分别对…

目录 一. 任务说明 二. 重点提示 三. 示例代码 3.1 一般折线图 3.2 用贝塞尔曲线绘制平滑折线图 四. 大数据量场景 示例代码托管在:https://github.com/dashnowords/blogs/tree/master/Demo/canvas-echarts/line-chart 博客园地址:<大史住在大前端>原创博文目录 华为云社区地址:[你要的前端打怪升级指南] 一. 任务说明 使用原生canvasAPI绘制折线图.(柱状图截图来自于百度Echarts官方示例库[查…

[摘要] 用canvasAPI实现echarts简易图表 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvasAPI绘制折线图.(柱状图截图来自于百度Echarts官方示例库[查看示例链接]. 二. 重点提示 一般折线图是比较好实现的,只需要调用最基本的moveTo()和lineTo( )方法来绘制即可.平滑折线图是一个难点,需要借助贝塞尔曲线来进行绘制,此时每段曲线的控制点算法就成了核心难点,对原理感兴趣的读者可以…

目录 一. 资料推荐及建议 二. Three.js中的基本概念 三.重点笔记 四.补充示例 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端>原创博文目录 华为云社区地址:[你要的前端打怪升级指南] 一. 资料推荐及建议 1.官方文档 很详细,但是API部分单独理解也很难,属于工具书.官方github仓库里提供了海量的插件和demo页面. 2.在CSDN上找到的一个[Three.js系列博文] 内容相当全,包括了thr…

目录 一. 模型的制作 1.1 生成字体模型 1.2 多表面贴图 二. 镜头及动画 三. 大作业总结 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端>原创博文目录 华为云社区地址:[你要的前端打怪升级指南] 有了上一篇基础知识的储备,本节就来制作一下简易版的MARVEL的片头动画.[点击观看动画效果] 一. 模型的制作 1.1 生成字体模型 字体模型的生成使用到了THREE.TextGeometry,它需要先加载字体…

目录 一. 大作业说明 二.基本思路 三.视频纹理表面修复--UV映射 3.1 问题描述 3.2 纹理贴图的基本原理-UV映射 3.3 关键示例代码 四.小结 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端>原创博文目录 华为云社区地址:[你要的前端打怪升级指南] 一. 大作业说明 通读完上一篇博文中提及的教程,觉得应该搞个大作业巩固一下所学的知识,想起刚上映的漫威宇宙第三阶段收官之作<蜘蛛侠·英雄远征>…

示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端>原创博文目录 华为云社区地址:[你要的前端打怪升级指南] 目录 原文地址: https://threejsfundamentals.org/threejs/lessons/threejs-scenegraph.html 笔者按:别关键词保持原英文单词,理解起来会更方便.原文中有许多内嵌的支持在线编辑的示例代码,可点击上面链接直接体验. 本文是three.js系列博文的一…

目录 一. 任务说明 二. 重点提示 三. 示例代码 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端>原创博文目录 华为云社区地址:[你要的前端打怪升级指南] 一. 任务说明 使用原生canvasAPI绘制K线图.(截图以及数据来自于百度Echarts官方示例库[查看示例链接]). 二. 重点提示 K线图最常见的是在金融市场,尤其是股市中,它的绘制算法和表达的意思是直接相关的: 一般一个数据点包含开盘价,收盘价,当日…

版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/devcloud/article/details/100074236 [摘要] canvas实现粒子动画 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 粒子特效 粒子特效一般指密集点阵效果,它并不是canvas独有的,这个名词更多出现在AE,cocos2d,Unity相关的教程中,并且提…

[摘要] 用canvas原生API实现百度Echarts 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvasAPI绘制K线图.(截图以及数据来自于百度Echarts官方示例库[查看示例链接]). 二. 重点提示 K线图最常见的是在金融市场,尤其是股市中,它的绘制算法和表达的意思是直接相关的: 一般一个数据点包含开盘价,收盘价,当日最高价,当日最低价4个数据点. 当开盘价低于收盘价时,当天为涨价,则图形为红色,反之则…

[摘要] canvas实现粒子动画 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 粒子特效 粒子特效一般指密集点阵效果,它并不是canvas独有的,这个名词更多出现在AE,cocos2d,Unity相关的教程中,并且提供了方便的编辑插件让使用者可以轻松地做出例如烟火,流星,光晕等等动态变化的效果,看起来非常酷炫.如果你接触过Three.js,会发现三维空间的点阵效果看起来更生动.粒子特效的本质还是一个逐帧动画,所以我们仍然可以使用上一节中提…

目录 一. 粒子特效 二. 开发中遇到的问题 2.1 卡顿 2.2 轨迹 2.3 复位 2.4 防护层 2.5 二维向量类 三. 实现讲解 3.1 粒子类的update方法 3.2 粒子群的绘制 3.3 爆破层的仿真 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端>原创博文目录 华为云社区地址:[你要的前端打怪升级指南] 一. 粒子特效 粒子特效一般指密集点阵效果,它并不是canvas独有的,这个名词更多出现在AE,…

目录 一. 文字烟花 二. 动画原理 2.1 像素操作 2.2 烟花生成算法 2.3 计时器 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端>原创博文目录 华为云社区地址:[你要的前端打怪升级指南] 一. 文字烟花 文字烟花的小控件是下面这样的效果,你或许在很多个人博客中见过: 这一节我们就来讲述一下这个小动画的实现方法. 二. 动画原理 首先动画的主框架仍然是我们反复使用的逐帧动画框架,烟花生成以后的部分也不难理解…

目录 一. canvas的能力 二. 动画框架 三. 在canvas中模拟碰撞 3.1定义小球的属性 3.2 生成新的小球 3.3 帧动画绘制函数step 3.4 定义小球的update方法 3.5 碰撞检测 3.6 碰撞仿真 四. 下一步 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端>原创博文目录 华为云社区地址:[你要的前端打怪升级指南] 经过前面章节相对枯燥的练习,相信你已经能够上手canvas的原生API了…

目录 一. 任务说明 二. 重点提示 三. 示例代码 四. 文字淹水效果的实现 五. 关于canvas抗锯齿 六. 小结 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端>原创博文目录 华为云社区地址:[你要的前端打怪升级指南] 一. 任务说明 使用原生canvasAPI绘制水球图,这将是一个非常有意思的挑战任务.水球图是一种常见的加载动画,属于扩展图形,在echarts中使用时需要下载扩展库(同为扩展库的还包括文字云…

目录 一. 任务说明 二. 重点提示 三. 示例代码 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端>原创博文目录 华为云社区地址:[你要的前端打怪升级指南] 一. 任务说明 使用原生canvasAPI绘制雷达图.(截图以及数据来自于百度Echarts官方示例库[查看示例链接]). 二. 重点提示 雷达图绘制的看起来并不复杂,无非就是一些路径点的连线,其中的难点都在于一些细节. 坐标转换 为了避免在绘制过程中不断根据…

目录 一. 任务说明 二. 重点提示 三. 示例代码 四.散点hover交互效果的实现 4.1 基本算法 4.2 参考代码 4.3 Demo中的小问题 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端>原创博文目录 华为云社区地址:[你要的前端打怪升级指南] 一. 任务说明 使用原生canvasAPI绘制散点图.(截图以及数据来自于百度Echarts官方示例库[查看示例链接]). 二. 重点提示 学习过折线图的绘制后,…

目录 一. 任务说明 二. 重点提示 三. 示例代码 四. hover高亮的实现思路 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端>原创博文目录 华为云社区地址:[你要的前端打怪升级指南] 一. 任务说明 使用原生canvasAPI绘制饼图(南丁格尔玫瑰).(截图以及数据来自于百度Echarts官方示例库[查看示例链接]). 二. 重点提示 南丁格尔玫瑰图的画法有很多种,Echarts中提供的以半径或面积两种不同模…

目录 一. 任务说明 二. 重点提示 三. 示例代码 四. 思考题 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端>原创博文目录 华为云社区地址:[你要的前端打怪升级指南] 一. 任务说明 使用原生canvasAPI绘制柱状图.(柱状图截图来自于百度Echarts官方示例库[查看示例链接]) 二. 重点提示 柱状图或许是最容易实现的图表类型了,矩形的部分直接使用fillRect()来绘制即可,为了将坐标轴标签文字绘制…

[摘要] 用canvas原生API绘制Echarts图表 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvasAPI绘制饼图(南丁格尔玫瑰).(截图以及数据来自于百度Echarts官方示例库[查看示例链接]). 二. 重点提示 南丁格尔玫瑰图的画法有很多种,Echarts中提供的以半径或面积两种不同模式,本文中以面积比例画法为例,绘制算法如下: 确定每个扇区的角度.由于所有扇区的角度加在一起为2π ,我们先按照数据比…

[摘要] 学习使用canvasAPI来实现数据可视化. 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvasAPI绘制柱状图.(柱状图截图来自于百度Echarts官方示例库[查看示例链接]) 二. 重点提示 柱状图或许是最容易实现的图表类型了,矩形的部分直接使用fillRect()来绘制即可,为了将坐标轴标签文字绘制在小分割线中间,需要用measureText()来测量文本的宽度,然后进行相应的偏移,否则直接绘制的话…

[摘要] 用原生canvasAPI实现百度Echarts图表 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvasAPI绘制散点图.(截图以及数据来自于百度Echarts官方示例库[查看示例链接]). 二. 重点提示 学习过折线图的绘制后,如果数据点只有坐标数据,则通过基本的坐标转换在对应的点上绘制出散点并不难实现.而在气泡图中,当我们直接将百度Echarts示例中的数据拿来经过一定的线性缩小后作为半径直接绘制散点时…

[摘要] canvas动画-碰撞仿真 示例代码托管在:http://www.github.com/dashnowords/blogs 经过前面章节相对枯燥的练习,相信你已经能够上手canvas的原生API了,那么从这一节开始,我们就开始接触点好玩的东西--动画. 经过前面章节相对枯燥的练习,相信你已经能够上手canvas的原生API了,那么从这一节开始,我们就开始接触点好玩的东西--动画. 一. canvas的能力 如果你以为canvas只能绘制图表那真的就图样图森破了,且不谈webgl的绘图上…

[摘要] 用原生canvasAPI实现百度echarts 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvasAPI绘制水球图,这将是一个非常有意思的挑战任务.水球图是一种常见的加载动画,属于扩展图形,在echarts中使用时需要下载扩展库(同为扩展库的还包括文字云插件和地图插件,项目地址为https://github.com/ecomfe/echarts-liquidfill). 二. 重点提示 水球图的绘制有以下…

[摘要] 用canvas原生API实现百度Echarts基本图表. 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvasAPI绘制雷达图.(截图以及数据来自于百度Echarts官方示例库[查看示例链接]). 二. 重点提示 雷达图绘制的看起来并不复杂,无非就是一些路径点的连线,其中的难点都在于一些细节. 坐标转换 为了避免在绘制过程中不断根据夹角来计算某个数据点的坐标,我们可以让坐标系先移动到绘图中心,然后在绘制过程…

[摘要] canvas动画-碰撞仿真 示例代码托管在:http://www.github.com/dashnowords/blogs 经过前面章节相对枯燥的练习,相信你已经能够上手canvas的原生API了,那么从这一节开始,我们就开始接触点好玩的东西——动画. 经过前面章节相对枯燥的练习,相信你已经能够上手canvas的原生API了,那么从这一节开始,我们就开始接触点好玩的东西——动画. 一. canvas的能力 如果你以为canvas只能绘制图表那真的就图样图森破了,且不谈webgl的绘图上…

说到盒子模型,你第一时间会想到css盒子模型,css中的盒子模型包括(内容区+内边距+边框).那在js中怎么去获取这些属性值呢?下面一起来学习js中的盒子模型. css样式 body { margin:; padding:; } .box { position: absolute; margin: 10px; padding: 10px; width: 100px; height: 100px; border: 10px solid #000; line-height: 25px; } html…

目录 1. 概述 2. 基本变换 2.1. 矩阵运算 2.2. 模型变换矩阵 2.2.1. 平移矩阵 2.2.2. 旋转矩阵 2.2.2.1. 绕X轴旋转矩阵 2.2.2.2. 绕Y轴旋转矩阵 2.2.2.3. 绕Z轴旋转矩阵 2.3. 投影变换矩阵 2.4. 视图变换矩阵 3. 着色器变换 3.1. 代码 3.2. 解析 4. 其他 1. 概述 我在<WebGL简易教程(五):图形变换(模型.视图.投影变换)>这篇博文里详细讲解了OpenGL\WebGL关于绘制场景的图形变换过程,并推导了相…

本期博主给大家带来JS的函数.Bom.DOM操作,以及JS各种常用的数据类型的相关知识,同时,这也是JavaScript极其重要的部分,博主将详细介绍各种属性的用法和方法. 一.JS中的函数 [函数的声明及调用] 1.函数声明的格式: function 函数名(参数1,参数2,参数3,--){//函数体 return 结果; } >>>函数的调用格式: 直接调用:函数调用的格式:函数名(参数一的值,参数二的值,--): 事件调用:事件名=函数名( ); 2.函数声明的几点强调: ①函数名…

上回书说道,JS中变量.运算符.分支结构.循环和嵌套循环等内容.本回就由本K给大伙唠唠JS中的BOM.DOM和事件. 一."花心大萝卜"--BOM 1.震惊,FFF团为何对BOM举起了火把--BOM简介 BOM(Browser Object Model) 是指浏览器对象模型,在JS中BOM是个不折不扣的花心大萝卜,因为它有很多个对象,其中代表浏览器窗口的Window对象是BOM的"正室".也就是最重要的,其他对象都是正室的下手.或者叫侧室也不足为过. 2.细数BOM…