前端可视化相关
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
一.创建画布
- 以浏览器窗口创建画布
- 在元素中创建画布(推荐)
二.绘制图形
// 创建画图环境
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
