console 命令行工具 X clear

console

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

// 加载贴图
var img = new Image();
img.src = "http://whxaxes.github.io/canvas-test/src/Funny-demo/transform/img/test.jpg";
img.onload = function () {
    // 创建渲染上下文
    var texture = ctx.createPattern(img, "repeat");
    var renderer = new Renderer(ctx, texture);

    // 创建曲面
    var surface = new Surface([
        [0, 0, 100],
        [100, 33, 12],
        [100, 100, 0],
        [0, 100, 0]
    ]);

    // 渲染曲面
    renderer.render(surface);
};

// 曲面类
function Surface(points) {
    this.points = points;
}

Surface.prototype.getPoint = function (u, v) {
    var p1 = this.points[0];
    var p2 = this.points[1];
    var p3 = this.points[2];
    var p4 = this.points[3];

    var x =
        (1 - u) * (1 - v) * p1[0] +
        u * (1 - v) * p2[0] +
        u * v * p3[0] +
        (1 - u) * v * p4[0];
    var y =
        (1 - u) * (1 - v) * p1[1] +
        u * (1 - v) * p2[1] +
        u * v * p3[1] +
        (1 - u) * v * p4[1];
    var z =
        (1 - u) * (1 - v) * p1[2] +
        u * (1 - v) * p2[2] +
        u * v * p3[2] +
        (1 - u) * v * p4[2];

    return [x, y, z];
};

// 渲染器类
function Renderer(ctx, texture) {
    this.ctx = ctx;
    this.texture = texture;
}

Renderer.prototype.render = function (surface) {
    var step = 0.1;
    var u, v;
    var p, q, r, s;

    for (u = 0; u <= 1; u += step) {
        for (v = 0; v <= 1; v += step) {
            p = surface.getPoint(u, v);
            q = surface.getPoint(u + step, v);
            r = surface.getPoint(u + step, v + step);
            s = surface.getPoint(u, v + step);

            this.ctx.beginPath();
            this.ctx.moveTo(p[0], p[1]);
            this.ctx.lineTo(q[0], q[1]);
            this.ctx.lineTo(r[0], r[1]);
            this.ctx.lineTo(s[0], s[1]);
            this.ctx.closePath();

            // 应用贴图
            this.ctx.fillStyle = this.texture;
            this.ctx.fill();
        }
    }
};

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>图像3d变形</title>
    <style>
        body{-moz-user-select: none;}
        #cas{
            position: absolute;
            top: 80px;
            left: 0;
            right: 0;
            margin: auto;
            border: 1px solid;
        }
        .tips{text-align: center;margin: 15px 0;}
        .control{ text-align: center; }
    </style>
</head>
<body onselectstart="return false">

<canvas id="canvas" width="1000" height="600">
</canvas>

</body>
</html>