画布算法像签名年鉴一样随机绘制签名？答案

【问题标题】：Canvas algorithm to plot signatures randomly like a signed yearbook?画布算法像签名年鉴一样随机绘制签名？
【发布时间】：2013-05-15 04:50:39
【问题描述】：

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

【问题讨论】：

标签： html text canvas vector svg

【解决方案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>

【讨论】：

一点点，但我希望只是旋转并适合页面上的签名而不是捕获它们。
那么你如何捕捉它们呢？您使用的是什么来源？
只是简单的文本字符串，而不是实际的签名。试图模拟一个高中年鉴页面，其中姓名和消息随机分布在页面上。
啊，不是真正的签名，只是名字，抱歉:-)
非常酷。这肯定会让我朝着正确的方向开始。谢谢！