テキストをアニメーション化し、キャンバスのJavaScriptを使用して最大幅と高さを設定する方法

Question

アニメーション表示するテキストが必要です。おそらく、フェードインして場所を移動することがあります。また、シェイプの最大幅と高さを設定する必要があります。その一部は大きすぎるためです。また、形状がランダムな色ではなく、方法がある場合は、選択できる色の配列を設定できます。

function makeTitle() { 
 
    //generate the title for your masterpiece 
 
    var lines = [ 
 
     'Meditative', 'Objective', 'Reflective', ['Ellipses', 'Tranformation', 'State', 'Emotion', 'Composition'], ['I', 'II', 'III', 'IV', 'V']]; 
 
     var title = ''; 
 
     for (var i = 0; i < lines.length; i++) { 
 
      var random = Math.floor(Math.random() * lines[i].length); 
 
      title += lines[i][random] + ' '; 
 
     }; 
 
     return (title); 
 
    } 
 

 
    function artHandler() { 
 
     var title = makeTitle(); 
 
     
 
     var canvas = document.getElementById('artCanvas'); 
 
     var context = canvas.getContext('2d'); 
 
     
 
     fillBackgroundColor(canvas, context); 
 
     
 
     drawText(canvas, context, title); 
 
     
 
     var num = 10; 
 
     while(num --> 0) { 
 
     \t drawCircle(canvas, context); 
 
     \t drawRect(canvas, context); 
 
      drawTriangle(canvas, context); 
 
\t \t \t drawShape(canvas, context); 
 
\t \t \t drawCir(canvas, context); 
 
     } 
 
     
 
    } 
 

 
\t function getBackgroundColor() { 
 
    \t return "rgb("+[ 
 
     \t Math.round(Math.random()*0xFF), 
 
     \t Math.round(Math.random()*0xFF), 
 
     \t Math.round(Math.random()*0xFF) 
 
     ].join(",")+")"; 
 
    } 
 

 
    function fillBackgroundColor(canvas, context) { 
 
     
 
     var bgColor = getBackgroundColor(); 
 
     context.fillStyle = bgColor; 
 
     context.fillRect(0, 0, canvas.width, canvas.height); 
 
     
 
    } 
 

 
    function degreesToRadians(degrees) { 
 
     return (degrees * Math.PI)/180; 
 
    } 
 
    // Draws a circle at a random location 
 
    function drawCircle(canvas, context) { 
 
     var radius = Math.floor(Math.random() * 40); 
 
     var x = Math.floor(Math.random() * canvas.width); 
 
     var y = Math.floor(Math.random() * canvas.height); 
 
     context.beginPath(); 
 
     context.arc(x, y, radius, 0, degreesToRadians(360), true); 
 
     context.fillStyle = getBackgroundColor(); 
 
     context.fill(); 
 
    } 
 

 
    function drawText(canvas, context, title) { 
 
     context.fillStyle = getBackgroundColor(); 
 
     context.font = 'bold 1em sans-serif'; 
 
     context.textAlign = 'right'; 
 
     context.fillText(title, canvas.width - 20, canvas.height - 40); 
 
    } 
 

 
    function drawRect(canvas, context) { 
 
     context.fillStyle = getBackgroundColor(); 
 
     context.fillRect(Math.random()*canvas.width, Math.random()*canvas.height,Math.random()*100,Math.random()*100); 
 
    } 
 
    
 
    function drawTriangle(canvas, context) { 
 
     context.fillStyle = getBackgroundColor(); 
 

 
     context.beginPath(); 
 
     context.moveTo(Math.random()*canvas.width, Math.random()*canvas.height); 
 
     context.lineTo(Math.random()*canvas.width, Math.random()*canvas.height); 
 
     context.lineTo(Math.random()*canvas.width, Math.random()*canvas.height); 
 
     context.fill(); 
 

 
    } 
 
\t function drawShape(canvas, context) { 
 
     context.fillStyle = getBackgroundColor(); 
 

 
     context.beginPath(); 
 
     context.moveTo(Math.random()*canvas.width, Math.random()*canvas.height); 
 
     context.lineTo(Math.random()*canvas.width, Math.random()*canvas.height); 
 
     context.lineTo(Math.random()*canvas.width, Math.random()*canvas.height); 
 
\t \t context.lineTo(Math.random()*canvas.width, Math.random()*canvas.height); 
 
\t \t context.lineTo(Math.random()*canvas.width, Math.random()*canvas.height); 
 
     context.fill(); 
 

 
    } 
 
\t 
 
    function drawCir(canvas, context) { 
 
     var radius = Math.floor(Math.random() * 40); 
 
     var x = Math.floor(Math.random() * canvas.width); 
 
     var y = Math.floor(Math.random() * canvas.height); 
 
     context.beginPath(); 
 
     context.arc(x, y, radius, 0, degreesToRadians(180), true); 
 
     context.fillStyle = getBackgroundColor(); 
 
     context.fill(); 
 
    } 
 
    
 
    
 
    // window.onload = function() { 
 
     var button = document.getElementById('artButton'); 
 
     button.onclick = artHandler; 
 
    //}

<form> 
 
<input type='button' id='artButton' value='New Masterpiece'> 
 
</form> 
 
<canvas width='1200' height='600' id='artCanvas'></canvas> 
 
​

Answer 1

アニメーション/フェードインテキスト：テキストをspan要素を作成し、位置に設定します。絶対との両方にCSS animationを使用するスパンを移動し、スパンの不透明度（フェージング）を変更します。

シェイプサイズ：あなたは既に各図形の最大サイズを設定している - あなたの最大サイズは、内部の形状を維持あなたはMath.random()で乗算されている番号（例えばcanvas.width、canvas.height。）

ですキャンバス：形状が含まれている場合は、乗数を減らすだけです。非サークルの場合は、すべての頂点がキャンバス領域内にあることを確認してください（0<vertexX<canvas.widthおよび0<vertexY<canvas.height）。サークル：centerX-radius>0 && centerX+radius<canvas.width && centerY-radius>0 && centerY+radius<canvas.height

固定カラーパレット：ご希望の色の配列を作成し、fillStyle=parseInt(Math.random()*(colorArray.length))