![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Web可视化
文章平均质量分 78
canvans 、webgl
sinat_37138973
这个作者很懒,什么都没留下…
展开
-
Canvas (九)优化
<canvas>元素是众多广泛使用的网络2D图像渲染标准之一。它被广泛用于游戏及复杂的图像可视化中。在离屏canvas上预渲染相似的图形或重复的对象如果发现自己在每个动画帧上重复了一些相同的绘制操作,请考虑将其分流到屏幕外的画布上。 然后,您可以根据需要频繁地将屏幕外图像渲染到主画布上,而不必首先重复生成该图像的步骤。myEntity.offscreenCanvas = document.createElement("canvas");myEntity.offscreenCanv转载 2022-02-21 18:03:24 · 405 阅读 · 0 评论 -
Canvas(八)像素操作
参考像素操作 - Web API 接口参考 | MDNImageData对象ImageData对象中存储着canvas对象真实的像素数据,它包含以下几个只读属性:width图片宽度,单位是像素height图片高度,单位是像素dataUint8ClampedArray类型的一维数组,包含着RGBA格式的整型数据,范围在0至255之间(包括255)。data属性返回一个Uint8ClampedArray,它可以被使用作为查看初始像素数据。每个像素用4个1bytes.转载 2022-02-21 17:55:39 · 989 阅读 · 0 评论 -
Canvas(七)高级动画
参考高级动画 - Web API 接口参考 | MDN绘制小球<canvas id="canvas" width="600" height="300"></canvas>跟平常一样,我们需要先画一个 context(画布场景)。为了画出这个球,我们又会创建一个包含一些相关属性以及draw()函数的ball对象,来完成绘制。var canvas = document.getElementById('canvas');var ctx = canvas...转载 2022-02-21 17:30:28 · 159 阅读 · 0 评论 -
Canvas(六)基本的动画
参考基本的动画 - Web API 接口参考 | MDN最大的限制就是图像一旦绘制出来,它就是一直保持那样了。如果需要移动它,我们不得不对所有东西(包括之前的)进行重绘。重绘是相当费时的,而且性能很依赖于电脑的速度。动画的基本步骤清空 canvas 除非接下来要画的内容会完全充满 canvas (例如背景图),否则你需要清空所有。最简单的做法就是用clearRect方法。 保存 canvas 状态 如果你要改变一些会改变 canvas 状态的设置(样式,变形之类的),又要在每画..转载 2022-02-21 17:19:30 · 541 阅读 · 0 评论 -
Canvas(五)组合Compositing
globalCompositeOperation转载 2022-02-21 16:01:06 · 310 阅读 · 0 评论 -
常用免费动画库
参考网址:求推荐免费的UI素材网站? - 知乎1、Animate.cssAnimate.css是目前最流行和使用最广泛的动画库之一。这个动画库包括超过 77 个现成的 CSS 动画。它的动画非常适合强调、注意引导提示、滑块和主页的使用。animate.css – 齐全的CSS3动画库_dowebok2、LottieFilesLottieFiles跨平台、极小的文件大小以及可编写脚本和交互式的特性。可以帮助UI设计人员和开发人员发现、创建、测试、调整和实施适用于网页和移动应用程.原创 2022-02-21 12:57:58 · 2073 阅读 · 0 评论 -
Vue中初始化可视化模板页面步骤
以下内容仅是个人项目总结。1、create(1)resizepage;(2)修改echarts的默认字体;(3)clearTimer;(4)initData;2、mountedthat.$nextTick(() => { //1、重构页面宽高 //2、wow初始化 //3、初始化chart(initChart) //4、添加定时等内容 this.timerObject.timer1 = xxx;})4.methods: { initD...原创 2022-02-16 18:49:31 · 845 阅读 · 0 评论 -
Canvas(四)变形
参考变形 Transformations - Web API 接口参考 | MDN变形 Transformations转载 2022-02-16 19:01:16 · 365 阅读 · 0 评论 -
Canvas(三)绘制文本、使用图像
参考绘制文本 - Web API 接口参考 | MDN绘制文本绘制文本canvas 提供了两种方法来渲染文本:fillText(text, x, y [, maxWidth])在指定的(x,y)位置填充指定的文本,绘制的最大宽度是可选的.strokeText(text, x, y [, maxWidth])在指定的(x,y)位置绘制文本边框,绘制的最大宽度是可选的.文本属性function draw() { var ctx = document.getEle转载 2022-02-07 19:10:12 · 539 阅读 · 0 评论 -
Canvas(二)使用样式和颜色
参考:使用样式和颜色 - Web API 接口参考 | MDN使用样式和颜色1、颜色填充想要给图形上色,有两个重要的属性可以做到:fillStyle 和 strokeStyle。color 可以是表示 CSS 颜色值的字符串,渐变对象或者图案对象。我们迟些再回头探讨渐变和图案对象。默认情况下,线条和填充颜色都是黑色(CSS 颜色值 #000000)。2、透明度Transparency通过设置 globalAlpha 属性或者使用一个半透明颜色作为轮廓或填充的样式。globalAl转载 2022-01-20 18:38:54 · 721 阅读 · 0 评论 -
Canvans (一)初识
介绍<canvas>元素用来绘制2D图形(可以通过改变位置实现伪3D效果,WebGL 使用了基于OpenGL ES的3D上下文)。Canvas 的默认大小为300像素×150像素(宽×高,像素的单位是px,可以修改)。<canvas id="tutorial" width="150" height="150"></canvas>canvas起初是空白的。为了展示,首先脚本需要找到渲染上下文,然后在它的上面绘制。var canvas = docume转载 2022-01-20 18:08:52 · 2581 阅读 · 0 评论