javascript - 用矩形包裹的随机字母

Question

如何使用 Canvas 生成用矩形包裹的随机字母？？？我为此使用了 j-query，但不知道如何使用 canvas 来实现。这是使用 j-query 生成随机字母的代码。

<script>
var letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
function randomNumber(max) {

    var randomNum       = Math.random();
    var numExpanded     = randomNum * max;
    var numFloored      = Math.floor(numExpanded);

    return numFloored;
}

//create a function returning a random letter
function randomLetter() {

    var random0to25     = randomNumber(letters.length);
    var randomLetter    = letters.charAt(random0to25);

    return randomLetter;
}

//create a function creating a span containing a random letter and attaching it to body
function createLetter() {

    var span            = $("<span/>");
    span.css("position", "absolute");
    span.css("top", 0);
    randomCol=randomNumber(760);
    randomCol=randomCol+20;

       //concatenation
    span.css("left", randomCol+"px"); 
    span.text(randomLetter());

    span.appendTo("body");

    return span;
}

//explain how to animate an element
function makeLetterFall() {

    var letterElement = createLetter();
    letterElement.animate({"top":"95%"}, 5000);     //any ideas how not to use {} here?
}

//handle keyup, find a letter and remove it
/*function removeTypedLetter(pressedKey) {

    var typedLetter     = String.fromCharCode(pressedKey.keyCode);
    var letterElement  = $("span:contains("+typedLetter+")").first();

    letterElement.remove();
}*/

//$(document).on("keyup", removeTypedLetter);

//make a new letter every second
setInterval(makeLetterFall, 1000);

  </script

>

Answer 1

这是一个显示下降矩形字母的学习示例。

兴趣点:

• 字母宽度可以用context.measureText测量
• 字母高度可以近似为fontsize加2-3
• 文本可以垂直和水平对齐 .textAlign & .textBaseline
• 可以使用 context.fillText('A',x,y)在 Canvas 上绘制文本
• 可以使用 context.strokeRect(x,y,width,height)
在 Canvas 上绘制未填充的矩形

示例代码和演示:

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;

var x=150;
var y=10;
var fontsize=20;
var fontface='verdana';

ctx.font=fontsize+' '+fontface;
ctx.textAlign='center';
ctx.textBaseline='middle';

animate();

function drawLetter(letter,x,y){
  var width=ctx.measureText(letter).width;
  ctx.strokeRect(x,y,width,fontsize);
  ctx.fillText(letter,x+width/2,y+fontsize/2,width,fontsize);
}

function animate(){
  ctx.clearRect(0,0,cw,ch);
  drawLetter('A',x,y);
  x+=Math.random()*4-2;
  y+=1;
  if(y<ch){
    requestAnimationFrame(animate);
  }
}

body{ background-color: ivory; padding:10px; }
#canvas{border:1px solid red;}

<h4>Letter in Rect falling with random horizontal drifting</h4>
<canvas id="canvas" width=300 height=300></canvas>