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

Animate / FadeIn文字：使用您的文字创建一个span元素并将其设置为absolute：absolute并使用CSS animation来移动范围并更改范围不透明度（渐变）。

形状大小：您已经设置了每个形状的最大尺寸 - 您的最大尺寸是您与Math.random()相乘的数字（例如，canvas.width，canvas.height）< / p>

在画布中保持形状：如果想要包含的形状，只需减少乘数。对于非圆形，请确保所有顶点都位于画布区域内：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))

从数组中选择颜色

如何使用canvas javascript为文本设置动画并设置最大宽度和高度

1 个答案: