今天带来三种多图共用图例的方法 第一种：单容器——使用dataset 配置如下 第二种：单容器——使用gridIndex、xAxisIndex和yAxisIndex 1、 设置多个grid以便图形可以

为什么要写这个系列呢? 这个问题在本系列的第一篇文章中回答了, 大家可以向上翻看. 这系列文章以代码Demo为线索, 从这个demo的搭建过程中去深度理解三维渲染的要素和环节. 具有以下特点: 一. 不使用webgl技术来完成三维渲染, webgl规范帮我们封装了很多底层实现,…

当我们开发一个canvas应用的时候，出于效率的考量，免不了要选择一个渲染引擎（比如PixiJS)或者更强大一点的游戏引擎（比如Cocos Creator、Layabox)。 渲染引擎通常会有Sprite的概念，一个完整的界面会由很多的Sprite组成，如果编写复杂一点的界面，…

本次分享一个自己采用Canvas绘制一个可配置的刻度(尺)组件。 组件应用：主要常用于移动端数值、金额等的滑动选择，增强用户交互体验。 文章涉及开发思路、代码拆解、问题解决、刻度组件库封装等多方面的知识。有需要的童鞋可以适当参考，开发出更绚丽、更完善的组件。 从效果图上分析，有…

我们知道，canvas动画实现依赖于画布的重绘,通过不停的清空画布，绘制画布就能实现基本的动画效果。一般使用clearRect方法清除指定矩形区域，来实现重绘。长尾效果是使用透明的填充色代替clearRect方法来实现的。 ，遮住了之前所画的内容所以和清除效果是一样的。 透明度…

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

不知道你看到后有没有觉得很复杂，为了完成它，我大约用了一个小时左右。 本文会详细介绍一下实现的具体原理，研究明白后，动画的运动学基础应该也算是过关了吧。 1. 运动学一般原理 首先从运动动画的基本原理说起。 我们知道，根据 requestAnimationFrame 实时更新小…

1. SVG与Canvas 因为公司的项目需求，需要做一个K线图，可以让交易者清楚的看到某一交易品种在各个时间段内的报价，以及当前的实时报价。 我所考虑的有两个方向，一是类似于Highcharts等插件的实现方式 -- svg，一是HTML5的canvas。 经过上面的比较不难…

在具体项目开发时，我们经常会使用canvas绘制图表、丰富的图形、动画交互等应用场景。 本篇文章总结归纳一下自己在canvas开发的认知和可能遇到的常见问题。 至于基础知识和常见API使用，大家自行学习，这里不予复述。 HTML5 <canvas> 元素用于图形的绘制…