前端可视化相关

css3

clip-path：用css绘制不规则形状(可以使用数值，也可以用百分比)

width: 1500px;
height: 50px;
background-color: #014c7e;
clip-path: polygon(0 14px, 12px 0, 1138px 0, 1158px 14px, 1488px 14px, 1500px 28px, 1500px 55px, 0 55px);

clip-path神器：各种不规则图形的clip-path百分比值，需要FQ哦~

canvas

300份 * 150份

默认宽高为300px与150px；其他宽高，宽度被分为300份，高度被分为150份

var canvas = document.getElementById("drawing")
if (canvas.getContext) {
    // 获取2d绘图环境
    var ctx = canvas.getContext("2d")

    // 配置颜色等画图参数
    ctx.fillStyle = "#ff0000";

    // 绘制图形
    ctx.fillRect(10, 10, 50, 50);
}

重要api：

save ：是 Canvas 2D API 通过将当前状态放入栈中，保存 canvas 全部状态的方法。

restore：是 Canvas 2D API 通过在绘图状态栈中弹出顶端的状态，将 canvas 恢复到最近的保存状态的方法。 如果没有保存状态，此方法不做任何改变。

save是入栈，restore是出栈；可以save保存多个操作环境， 并使用restore恢复至某个环境

示例

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.save(); // 保存默认的状态

ctx.fillStyle = "green";
ctx.fillRect(10, 10, 100, 100); // green

ctx.restore(); // 还原到上次保存的默认状态
ctx.fillRect(150, 75, 100, 100); // 默认填充颜色 黑色

svg的工具库 RaphaelJS

一.创建画布

1. 以浏览器窗口创建画布
2. 在元素中创建画布(推荐)

二.绘制图形

// 创建画图环境
var paper = Raphael(ele, w, h) // ele => id or dom
// 开始绘制图形 ex 画一个圆
var circle = paper.circle(cx, cy, r).attr({
    "fill": fillColor,
    "stroke": strokeColor,
    "stroke-width": strokeWidth
});

常用api：

path：绘制路径；用来创建更为自由的形状

M = moveto
L = lineto
Z = closepath
Q = quadratic Belzier curve

// ex
var path = paper.path("M100 100 L200 100 L200 300 Z") // L 可省略
path.attr({
    "fill":"blank", // 可选
    "stroke-width":1,
    "opacity":1
});

rect：绘制矩形

circle：绘制圆形

translate : 对图形进行平移操作

echarts

// 创建echart环境
var myChart = echarts.init(el)

// 配置图表选项
var options = {
    ...
}

// 启用
myChart.setOption(options)

three.js

function createScene () {
    scene = new THREE.Scene()
}

function createCamera () {
    camera = new THREE.PerspectiveCamera(...)
    camera.postion.set(...) // 镜头所在位置
    camera.lookAt(...) // 镜头看向的位置
}

function createLight () {
    // AmbientLight 环境光
    var light = THREE.AmbientLight(...)
    scene.add(light)

    // hemilight 环境光
    var hemilight = new THREE.HemisphereLight(... )
    scene.add(hemilight);

    // pointLight 点光
    var pointLight = new THREE.PointLight(...)
    pointLight.position.set(...)
    scene.add(pointlight)

    // DirectionLight 平行光
    var directionalLight = new THREE.DirectionalLight(...);
    directionalLight.position.set(...);
    scene.add(directionalLight)
}

function createRender() {
    renderer = new THREE.WebGLRenderer(...)
    renderer.setSize()

    el.appendChild(renderer.domElement);
}

function render() {
    TWEEN.update()

    // other update function
    // ...

    renderer.render(scene, camera)
    requestAnimationFrame(render)
}

function handleWindowResize () {
    HEIGHT = window.innerHeight;
    WIDTH = window.innerWidth;
       renderer.setSize(WIDTH, HEIGHT);
    camera.aspect = WIDTH/HEIGHT;
    camera.updateProjectionMatrix();
}

funciton init() {
    // 创建场景 
    createScene ()
    // 创建相机
    createCamera ()
    // 创建光源
    createLight ()
    // 创建渲染器
    createRender()

    // 事件
    window.addEventListener('resize', handleWindowResize, false);

    // 开始渲染
    render()
}

init()

three.js框架初始化demo：[项目地址]()

tween.js