数据可视化（canvas、svg)

数据可视化（canvas、svg)

分享一句话：

梦想不是梦，也不是想，而是怎么做。

正文开始！！！

canvas

canvas简介

canvas是HTML5新特性之一，用于绘制图像，不过canvas元素本身没有绘制能力，需要使用脚本（通常是js）来完成实际的绘图任务。
getContext()方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。

canvas实例

先来写基础的配置
一、html部分

<canvas width="600" height="400" id="canvas" style="border:1px solid #000"></canvas>
<img src="https://www.runoob.com/images/img_the_scream.jpg" alt="图片" id="img" style="display: none;">

二、 js部分

// 找到canvas对象
let canvas = document.getElementById('canvas');
// 创建context对象
let ctx = canvas.getContext('2d');

三、 开始绘制（将代码添加至js代码中）

1. 绘制矩形

ctx.fillStyle = "#ff0"; //填充颜色
ctx.fillRect(0, 0, 150, 75); //x,y,width,height

2. 绘制线段

ctx.moveTo(150, 150); //开始端点x,y
ctx.lineTo(200, 200)