1

我正在寻找使用 Canvas 或 SVG 在高中年鉴等页面上随机绘制多个签名的最佳方法。有人知道类似的现有算法或开源代码吗？

4

1 回答 1

1

您是否查看过以下 javascript 库？我已经使用了它们并且它们工作得很好： SignaturePad或jSignature

如果浏览器不支持它，两者都提供了对 flash 的后备。我们选择 jSignature 是因为在不同平板电脑上绘制新签名时的整体性能更好，但我个人更喜欢 signaturePad 的风格和 API。

您可以将签名作为示例记录在安全的管理页面上，然后将它们绘制在您想要的任何位置。

更新 因为你只想要随机字符串而不是真正的签名，我建议你看看HTML5 Canvas – Arrays and Random text：

<!DOCTYPE html>
<html>
<head>
<title>Random Text</title>
<script type="text/javascript">

var canvas, ctx;
var quotes = new Array();

var img = new Image();   // Create new img element  

//or you can also use:
//var quotes = [];

function setup(){

    //canvas and context setup
    canvas=document.getElementById("myCanvas");
    ctx=canvas.getContext("2d");

    //create values for the array
    quotes[0]="I";
    quotes[1]="think";
    quotes[2]="you";
    quotes[3]="always";
    quotes[4]="have";
    quotes[5]="regrets";
    //function calls
    setInterval(draw,300);
    window.addEventListener("keydown",checkKeyboard);
}
function draw(){

    var randomIndex = Math.floor(Math.random()*quotes.length);
    var randomColor = Math.round(Math.random()*80);

    var randomX = Math.random()*canvas.width;
    var randomY = Math.random()*canvas.height*2-canvas.width/2;
    var randomSize = Math.random()*30+10;

    ctx.fillStyle="rgba(255,255,255,0.8)";
    ctx.font=randomSize+"px Arial Black, Gadget, sans-serif";
    ctx.fillText(quotes[randomIndex],randomX,randomY);
    ctx.lineWidth=1;
    //ctx.strokeText(quotes[randomIndex],randomX,randomY);

}
function checkKeyboard(myEvt){
    if(myEvt.keyCode==13){
    ctx.clearRect(0,0,canvas.width,canvas.height);
    }
}
</script>
</head>
<body onload="setup()">
<canvas id="myCanvas" width="800" height="600" style="border:1px solid; background:url(bg-hand.jpg)"></canvas>
<p>Press "ENTER" to clear the canvas</p>
</body>
</html>
于 2013-05-15T04:55:34.970 回答