javascript - 如何使用canvas 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 ) {
        	drawCircle(canvas, context);
        	drawRect(canvas, context);
            drawTriangle(canvas, context);
			drawShape(canvas, context);
			drawCir(canvas, context);
        }
        
    }

	function getBackgroundColor() {
    	return "rgb("+[
        	Math.round(Math.random()*0xFF),
        	Math.round(Math.random()*0xFF),
        	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();

    }
	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);
		context.lineTo(Math.random()*canvas.width, Math.random()*canvas.height);
		context.lineTo(Math.random()*canvas.width, Math.random()*canvas.height);
        context.fill();

    }
	
   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 元素并将其设置为position:absolute并使用 CSS animation移动跨度并更改跨度不透明度(淡入淡出)。

形状大小:您已经设置了每个形状的最大尺寸 - 您的最大尺寸是与 Math.random() 相乘的数字。 (例如canvas.width，canvas.height)

将形状保留在 Canvas 内:如果您想要包含形状，只需减少乘数即可。对于非圆形，请确保所有顶点都在 Canvas 区域内: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)) 从数组中选择一种颜色。