Алгоритм холста, чтобы отображать подписи случайно, как подписанный ежегодник?

Я ищу наилучший подход к построению нескольких подписей случайным образом на странице, например, в ежегоднике средней школы с использованием Canvas или SVG. Кто-нибудь знает о существующих алгоритмах или с открытым исходным кодом, подобным этому?Алгоритм холста, чтобы отображать подписи случайно, как подписанный ежегодник?

источник

2013-05-15 Jason S. Burton

Вы изучали следующие библиотеки javascript? Я использовал их обоих, и они работают достаточно хорошо: SignaturePad или jSignature

Оба предложения запасной вариант прошить, если браузер не поддерживает его. Мы выбрали jSignature, так как общая производительность на разных планшетах при рисовании новой подписи была лучше, но мне лично нравится стиль & API signaturePad лучше.

Вы можете записывать подписи в качестве примера на защищенной странице администратора, а затем просто строить их везде, где хотите.

Update Поскольку вы просто хотите случайных строк и не очень подписи я рекомендую вам взглянуть на 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-15 04:55:34

Немного, но я ищу, чтобы просто повернуть и установить подписи на странице не захватывать их. –

Итак, как вы их захватили? Какой источник вы используете? –

Просто простые текстовые строки, а не фактические подписи. Пытается имитировать страницу ежегодника высокого школьного возраста с именами и сообщениями, случайно разбросанными по странице. –

Алгоритм холста, чтобы отображать подписи случайно, как подписанный ежегодник?

ответ

Смежные вопросы