HTML5 Canvas二维山地景观生成器

2D Mountain Landscape Generator

h5, canvas, mountain

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
w = ctx.canvas.width = window.innerWidth;
h = ctx.canvas.height = window.innerHeight;

window.onresize = function() {
    w = ctx.canvas.width = window.innerWidth;
    h = ctx.canvas.height = window.innerHeight;
};

maxStep = 1.5;
newStep = 2;
numMount = 6;
shadow = 0; // Turn to 0 if render takes too long | P.S im the only Comment here... This guy obviously never heard of nicely documented code before

ranH = 230;
ranS = Math.random() * 100;
ranL = Math.random() * 100;
colStep = 8;
height = Math.random() * h;
slope = Math.random() * maxStep * 2 - maxStep;

function clear() {
    height = Math.random() * h;
    ctx.clearRect(0, 0, w, h);
}

function newCol() {
    ranH = Math.random() * 360;
    ranS = Math.random() * 100;
    ranL = Math.random() * 100;
}

numMount += 1;

function draw(ix, ic) {
    for (i = 0; i < w; i++) {
        slope += Math.random() * newStep * 2 - newStep;
        height += slope;

if (slope > maxStep) {
            slope = maxStep;
        }
        if (slope < -maxStep) {
            slope = -maxStep;
        }
        if (height > h) {
            height = h;
            slope *= -1;
        }
        if (height < ix) {
            height = ix;
            slope *= -1;
        }

ctx.beginPath();
        var gr = ctx.createLinearGradient(0, 0, w, h);
        gr.addColorStop(0, "hsla(" + (ranH + ic * colStep) + "," + 100 + "%," + 50 + "%," + ic / numMount + ")");
        gr.addColorStop(1, "hsla(" + (ranH + ic * colStep + 100) + "," + 100 + "%," + 50 + "%," + ic / numMount + ")");
        ctx.strokeStyle = gr;
        ctx.lineWidth = 0;
        ctx.moveTo(i, h);
        ctx.lineTo(i, height);
        ctx.shadowColor = "rgba(0,0,0,1)";
        ctx.shadowBlur = shadow;
        ctx.stroke();
        ctx.closePath();
    }
}

window.onclick = function() {
    clear();
    newCol();
    for (k = 0; k < numMount; k++) {
        draw(k * h / numMount, k);
    }
};

clear();
for (k = 0; k < numMount; k++) {
    draw(k * h / numMount, k);
}

编译

CSS

HTML

2D Mountain Landscape Generator

h5, canvas, mountain

编辑器支持Emmet

快捷键

2D Mountain Landscape Generator

h5, canvas, mountain

HTML5 Canvas炫彩粒子特效生成器

HTML5 Canvas交互式三维地图编辑器

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：