Question

我在使用画布代码时遇到了很大问题，我在页面中只使用了一次（在徽标中）工作正常，并且我正在尝试将其用作菜单按钮，这就是问题，我真的不知道我做错了什么，希望你帮助我一些。

这是我用于徽标的代码并且工作正常：

HTML CODE：

<html>
    <head>
        <title>canvas</title>
    </head>
    <body>
        <div id="container">
            <div id="logo">
                <canvas style="" width="800" id="broken-glass"></canvas>
                <h1 style="color: rgba(250, 250, 250, 0.95);" id="logo-title">Canvas</h1>
            </div>
            <script type="text/javascript">
                (function() {

                    var isCanvasSupported = function () {
                        var elem = document.createElement('canvas');
                        return !!(elem.getContext && elem.getContext('2d'));
                    };

                    if( isCanvasSupported() ) {
                        var canvas = document.getElementById('broken-glass'),
                        context = canvas.getContext('2d'),
                        width = canvas.width = Math.min(800, window.innerWidth),
                        height = canvas.height,  
                        numTriangles = 100,
                        rand = function(min, max){
                            return Math.floor( (Math.random() * (max - min + 1) ) + min);
                        };
                        window.drawTriangles = function(){
                            context.clearRect(0, 0, width, height);
                            var hue = rand(0,360);
                            var increment = 80 / numTriangles;
                            for(var i = 0; i < numTriangles; i++) { 
                                context.beginPath();      
                                context.moveTo(rand(0,width), rand(0,height) );  
                                context.lineTo(rand(0,width), rand(0,height) );
                                context.lineTo(rand(0,width), rand(0,height) );
                                context.globalAlpha = 0.5;
                                context.fillStyle = 'hsl('+Math.round(hue)+', '+rand(15,60)+'%, '+ rand(10, 60) +'%)';      
                                context.closePath();    
                                context.fill();
                                hue+=increment;
                                if(hue > 360) hue = 0;
                            }
                            canvas.style.cssText = '-webkit-filter: contrast(115%);';
                        };
                        document.getElementById('logo-title').style.color = 'rgba(250, 250, 250, 0.95)';
                        drawTriangles();
                        var el = document.getElementById('logo');
                        el.onclick = function() {
                            drawTriangles();
                        };
                    }
                })();
            </script>
        </div>
    </body>
</html>

它是CSS代码：

#broken-glass
{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
}

#logo h1
{
    text-align: center;
    font-weight: 700;
    width: 100%;
    color: #000;
    position: absolute;
    left: 0px;
    -moz-user-select: none;
    cursor: pointer;

    margin-top: 27px;
    font-size: 63px;
    line-height: 1.4;
    top: 0px;

    margin-bottom: 5px;

    text-rendering: optimizelegibility;

    font-family: Calibri,"PT Sans","Trebuchet MS","Helvetica Neue",Arial;
}

当我在html中将id（＃）更改为类（。）并将“id”标记更改为“class”标记时，问题就出现了，画布重叠了...... h1标签的文字不在画布中......只是问题的地狱，有人可以告诉我我做错了什么？，如何解决它，我在几个小时内尝试...

提前太在意了！。

Answer 1

您可以尝试在您的CSS中的每个代码中添加！important。例如：

 text-align: center !important;
 font-weight: 700 !important;

之前解决了我的问题，希望它也能解决你的问题。

多个画布作为按钮与onclick事件

1 个答案: