canvas图形监听鼠标事件

随机生成不规则图形，可以拖拽图形

canvas, mouse, event

《three.js使用多个渐变torus模拟光环光晕》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

// 随机几何图形
let storage = [];
for (let i = 0; i < 5; i++) {
    let color = new CanvasMaker.Color(Math.random(), Math.random(), Math.random());
    let r = (color.r * 255 + 20) / 255;
    let g = (color.g * 255 + 20) / 255;
    let b = (color.b * 255 + 20) / 255;
    if (r > 1) r = 1;
    if (g > 1) g = 1;
    if (b > 1) b = 1;
    let hoverColor = new CanvasMaker.Color(r, g, b);
    let path = new Path({
        path: randomPoints(),
        color: color,
        hoverColor: hoverColor
    });
    storage.push(path);
}
// 绘制图形
for (let i = 0; i < storage.length; i++) {
    ctx.beginPath();
    storage[i].path.forEach(function(item, index) {
        if (index == 0) {
            ctx.moveTo(item.x, item.y);
        } else {
            ctx.lineTo(item.x, item.y);
        }
    });
    ctx.closePath();
    ctx.fillStyle = storage[i].color.getHexString();
    ctx.fill();
}

// 随机几何图形的点集
function randomPoints() {
    let points = [];
    // 随机中心点
    let center = {
        x: CanvasMaker.Math.randFloat(100, cs.width - 100),
        y: CanvasMaker.Math.randFloat(100, cs.height - 100),
    };
    const len = CanvasMaker.Math.randInt(3, 5);
    // 根据长度生成距离中心点最大长度内的随机点
    for (let i = 0; i < len; i++) {
        points.push({
            x: center.x + 500 * Math.random(),
            y: center.y + 500 * Math.random()
        })
    }
    return points;
}

function onMouseUp(e) {
    selectFlag = false;
}
cs.bindEvent('mousemove', onMouseMove);
cs.bindEvent('mousedown', onMouseDown);
cs.bindEvent('mouseup', onMouseUp);

编译

CSS

HTML

随机生成不规则图形，可以拖拽图形

canvas, mouse, event

编辑器支持Emmet

快捷键

随机生成不规则图形，可以拖拽图形

canvas, mouse, event

h5 canvas鼠标移动或移动触摸生成多彩粒子动画

canvas估t的曼德勃罗几何图形

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：