使用Paper.js绘制各种几何图形和运动控制

Shape's Party, 可用于点缀Pizza饼表面。

paper.js, canvas

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 4288
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

paper.install(window);
window.onload = function() {
    paper.setup('shapesCanvas');

let circle = new Path.Circle(new Point(100, 70), 5);
    circle.fillColor = '#F9C6C5';

let triangle = new Path.RegularPolygon(new Point(80, 70), 3, 7);
    triangle.fillColor = '#e9e9ff';

let line = new Path.Rectangle({
        point: [20, 20],
        size: [3, 25],
        fillColor: '#8CB083'
    });

let circleSymbol = new Symbol(circle);
    let triangleSymbol = new Symbol(triangle);
    let lineSymbol = new Symbol(line);

for (var i = 0; i < 50; i++) {
        let randoCirclePoint = view.size.multiply(Point.random());
        let randoTrianglePoint = view.size.multiply(Point.random());
        let randoLinePoint = view.size.multiply(Point.random());
        circleSymbol.place(randoCirclePoint);
        triangleSymbol.place(randoTrianglePoint).rotate(Math.random() * 360);
        lineSymbol.place(randoLinePoint).rotate(Math.random() * 360);
    }

let shapes = project.activeLayer.children;
    let destinations = [];

shapes.forEach(shape => {
        destinations.push(view.size.multiply(Point.random()));
    });

view.onFrame = function(event) {
        shapes.forEach((shape, i) => {
            let vector = destinations[i].subtract(shape.position);
            shape.rotate(0.2);
            shape.position.x += vector.width / 200;
            shape.position.y += vector.height / 200;
            //console.log(vector.length)
            if (vector.length < 5) {
                console.log('do over')
                destinations[i] = view.size.multiply(Point.random());
            }
        });
    }
}

编译

CSS

HTML

Shape's Party, 可用于点缀Pizza饼表面。

paper.js, canvas

编辑器支持Emmet

快捷键

Shape's Party, 可用于点缀Pizza饼表面。

paper.js, canvas

在canvas使用圆形（circles）绘制各种模式图案

P5.js + Grafica.js绘制XY坐标轴（平面坐标系）和数据曲线（折线图表）

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：