CANVAS 水墨群峰动画

Mountains, Chinese style ink painting

CANVAS, ink

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var canvas = document.getElementById("canvas"),
    context = canvas.getContext("2d"),
    width = canvas.width = window.innerWidth,
    height = canvas.height = window.innerHeight;

var Arm = Arm || {
    x: 0,
    y: 0,
    length: 100,
    angle: 0,

create: function(x, y, length, angle) {
        var obj = Object.create(this);
        obj.init(x, y, length, angle);
        return obj;
    },

init: function(x, y, length, angle) {
        this.x = x;
        this.y = y;
        this.length = length;
        this.angle = angle;
    },

getEndX: function() {
        var angle = this.angle;
        return this.x - Math.sin(angle) * this.length;
    },

getEndY: function() {
        var angle = this.angle;
        return this.y - Math.cos(angle) * this.length;
    },

render: function(context) {
        context.strokeStyle = "#000";
        context.beginPath();
        context.moveTo(this.x, this.y);
        context.lineTo(this.getEndX(), this.getEndY());
        context.stroke();
    }
};

var arms = []
var angle = 0;
context.lineWidth = 0.05;
context.globalCompositeOperation = "difference";

function getRandomPosition() {
    const position = {
        'x': canvas.width * Math.random(),
        'y': canvas.height * Math.random()
    }

return position
}

for (var i = 0; i < ((width + height) / 8); i++) {
    arms.push(Arm.create(getRandomPosition().x, getRandomPosition().y, Math.random() * 100, 0))
}

update();

function update() {

for (var i = 0; i < arms.length; i++) {
        arms[i].angle = Math.cos(angle) - Math.PI;
        angle += 0.5;
        arms[i].render(context);

}
    requestAnimationFrame(update);
}

编译

CSS

HTML

Mountains, Chinese style ink painting

CANVAS, ink

编辑器支持Emmet

快捷键

Mountains, Chinese style ink painting

CANVAS, ink

CANVAS 水波纹动画

CANVAS 海边瀑布的水珠动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：