02-前端数据可视化方案-Canvas.pdf

数据可视化Canvas

刘军liujun

目录

content

1邂逅Canvas

2Canvas绘制图形

3Canvas样式和颜色

4Canvas状态和形变

5Canvas动画和案例

coderwhy邂逅Canvas

◼什么是Canvas

Canvas最初由Apple于2004年引入，用于MacOSXWebKit组件，同时给Safari浏览器等应用程序提供支持。后来，它被

Gecko内核的浏览器（尤其是MozillaFirefox），Opera和Chrome实现，并被W3C提议为下一代的标准元素（HTML5新增

元素）。

Canvas提供了非常多的JavaScript绘图API（比如：绘制路径、矩形、圆、文本和图像等方法），集合canvas元素可以绘

制各种2D图形。

CanvasAPI主要用于绘制2D图形。当然也可以使用Canvas提供给的WebGLAPI来绘制3D图形。

◼Canvas的应用场景

可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。

◼Canvas浏览器兼容性

coderwhyCanvas优缺点

◼Canvas优点：

Canvas提供的功能更加原始，适合像素级处理，动态渲染和量大数据的绘制，如：图片编辑、热力图、炫光尾迹特效等。

Canvas非常适合图像密集型的游戏开发，适合频繁重绘大量的图形对象。

Canvas能够以.png或.jpg格式保存图像，适合对图片进行像素级的处理。

◼Canvas缺点：

在移动端如果Canvas使用数量过多，会使内存占用超出了手机承受范围，可能会导致浏览器崩溃。

Canvas绘图只能通过JavaScript脚本操作。

Canvas是由一个个像素点构成的图形，放大会使图形变得颗粒状和像素化（导致图形模糊）。

coderwhy初体验Canvas

◼使用Canvas的注意事项：

canvas和img元素很相像，不同就是它没有src和alt属性。

canvas标签只有两个属性——width和height(单位默认为px)。没宽高时，canvas会初始化宽为300px和高为150px。

canvas元素必须需要结束标签(/canvas)。如结束标签不存在，则文档其余部分会被认为是替代内容，将不显示出来。

可以通过判断canvas.getContext()方法是否存在来检查浏览器是否支持Canvas（现代浏览器基本都支持）。

◼初体验Canvas

1.Canvas通用模板

2.Canvas绘制正方形

coderwhyCanvasGrid和坐标空间

◼在开始画图之前，我们需要了解一下Canvas网格（CanvasGrid）和坐标空间。

◼CanvasGrid（或坐标空间）

假如，HTML模板中有个宽150px,高150px的canvas元素。canvas元素默认被网格所覆盖。

通常来说网格中的一个单元相当于canvas元素中的一像素。

网格的原点位于坐标(0,0)的左上角。所有图形都相对于该原点绘制。

网格也可理解为是坐标空间（坐标系），坐标原点位于canvas元素左上角（被称为初始坐标系）

✓如右图中蓝色正方形，左上角的坐标为（x,y）

网格或坐标空间是可以变换的，后面会讲如何将原点转换到不同的位置，旋转网格甚至缩放它。

注意：移动、旋转、缩放坐标系后，默认所有后续变换都将基于新坐标系的变换。

coderwhy绘制矩形(Rectangle)

◼