HTML5 Canvas上绘制层峦叠嶂（山脉起伏）场景动画

Slice Mountain，纯JS绘制波浪图。

html5, mountain

《使用js把svg图形转成png图像》申请公开！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

class App {
    constructor() {
        this.canvas = document.createElement('canvas');
        document.body.appendChild(this.canvas);
        this.canvas.width = this.canvas.height = 512;
        Object.assign(this.canvas.style, {
            position: "absolute",
            left: "50%",
            marginLeft: "-256px",
            borderRadius: "10px",
            boxShadow: "10px 10px 30px rgba(0,0,0,0.1)"
        });
        requestAnimationFrame(() => this.update());
    }
    update() {
        let g = this.canvas.getContext('2d');
        for (let y = 0; y < this.canvas.height; y += 30) {
            const grad = g.createLinearGradient(0, y + 50, 0, y - 70);
            grad.addColorStop(0, "gray");
            grad.addColorStop(1, "white");
            g.fillStyle = grad;
            g.beginPath();
            for (let x = 0; x <= this.canvas.width; x += 16) {
                let middleOffset = (x / this.canvas.width);
                middleOffset *= 1 - middleOffset;
                middleOffset = Math.pow(4 * middleOffset, 2);
                let yOffset = (y / this.canvas.height);
                yOffset *= 1 - yOffset;
                yOffset = Math.pow(4 * yOffset, 2);
                g.lineTo(x, y - 70 * middleOffset * yOffset * (1.3 + 0.2 * Math.sin(Date.now() / 100 + x / 30 + y / 13)));
            }
            g.lineTo(this.canvas.width + 100, y + 60);
            g.lineTo(-100, y + 60);
            g.fill();
        }
        requestAnimationFrame(() => this.update());
    }
}
const a = new App();

编译

CSS

HTML

Slice Mountain，纯JS绘制波浪图。

html5, mountain

编辑器支持Emmet

快捷键

Slice Mountain，纯JS绘制波浪图。

html5, mountain

使用HTML5 Canvas制作超炫动态电子艺术画作（风景画）

HTML5 Canvas背景虚化（散景）动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：