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

I'm having really big problems with canvas code that I'm using only 1 time in the page (in logo) working fine, and that I'm trying to use it as buttons for menu and here is the problem, I don't know really what's im doing wrong, hope some of u help me.

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

it's the code that I'm using for the logo and is working fine:

这是我用于徽标的代码,工作正常:

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>

and it's CSS CODE:

这是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;
}

the big problem comes when i change the id's (#) to classes (.) and the "id" tag to "class" tag in the html, the canvas is overlapped... the text of h1 tag is out of the canvas... and just the hell of problems, can someone tell me what I'm doing wrong?, how to fix it, I'm trying it during hours...

当我在html中将id(#)更改为类(。)和将“id”标签更改为“class”标签时,问题就出现了,画布重叠...... h1标签的文本不在画布中。 ..而且只是问题的地狱,有人能告诉我我做错了什么?,如何解决它,我在几个小时内尝试...

too much thanks in advance!.

非常感谢提前!

1 个解决方案

#1

you may try putting an !important in every code in your css. example:

您可以尝试在您的CSS中的每个代码中添加!important。例:

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

this fixed my problem before, hopefully it will fix yours also.

这解决了我以前的问题,希望它也能解决你的问题。

#1