生成可移动显示屏才能看的密文

大概是几年前在贴吧看到过这种图片

琢磨一下，就可以发现这是拉长的文字，纵向和横向都有文字。

可以在手机上将屏幕倾斜到几乎和视线平行，然后就能够看清楚了。

上面这幅图的文字是 'Hello World'和'I am Zander Alastor'。

这个可以通过很多方法做到，下面分享下由css+js生成的方法：

代码环节

html

<h1>Tilt-to-read</h1>


<div class="col-wrapper">
    <div class="col2">
        <canvas id="tilt"></canvas>
    </div>
    <div class="col2">
        <p>Wait... what? At first sight, this is total mumbo jumbo. But if you tilt your device, you may be able to read a secret message. Enter your message in the text boxes and save your picture!</p>
        
        <h3>Horizontal text</h3>
        <input type="text" placeholder="Type horizontal text here..." id="hText" />
        
        <h3>Vertical text</h3>
        <input type="text" placeholder="Type vertical text here..." id="vText" />
        
        <button id="save" class="block">Save Picture</button>
    </div>
</div>

css

canvas#tilt {
    width: 100%;
    min-width: 200px;
    max-width: 500px;
    // border: 5px solid #ccc;
}

.col-wrapper {
    .col2 {
        width: 50%;
        overflow: auto;
        
        float: left;
        
        &:nth-child(even) {
            padding-left: 1em;
        }
    }
}

@media only screen and (max-width: 720px) {
    .col-wrapper {
        .col2 {
            width: 100%;
            display: block;
            box-sizing: border-box;
            
            clear: both;
            
            &:nth-child(even) {
                padding-left: 0;
            }
        }
    }
}

js

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

canvas.width = 500;
canvas.height = 500;
ctx.font = '25px Arial';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';

var scale = {
  h: canvas.height/20,
  v: canvas.width/20
};
var text = {
  h: 'Hello World',
  v: 'I am Zander Alastor'
};

function update() {
    ctx.fillStyle = "#fff";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  
    ctx.fillStyle = "#000";
    
  ctx.save();
  ctx.scale(1, scale.h);
  ctx.fillText(text.h, canvas.width/2, canvas.height/scale.h/2);
  ctx.restore();
  
  ctx.save();
  ctx.translate(canvas.width/2, canvas.height/2);
  ctx.rotate(Math.PI/2);
  ctx.translate(-canvas.width/2, -canvas.width/2);
  ctx.scale(1, scale.v);
  ctx.fillText(text.v, canvas.width/2, canvas.height/scale.v/2);
  ctx.restore();
}

document.getElementById('hText').oninput = function() {
  text.h = this.value;
  update();
};

document.getElementById('vText').oninput = function() {
  text.v = this.value;
  update();
};

update();

document.getElementById('save').onclick = function () {
    var link = document.createElement('a');
    link.href = canvas.toDataURL('image/png');
    link.download = "tilt.png";
    link.href = canvas.toDataURL("image/png");
    // Need to add the link to the body for Firefox
    document.body.appendChild(link);
    link.setAttribute("type", "hidden");
    link.click();
    document.body.removeChild(link);
};

搬运自Codepen