Javascript 带有onclick事件的多个画布作为按钮_Javascript_Html_Css_Canvas_Graphics2d

Javascript 带有onclick事件的多个画布作为按钮

javascript html css canvas

Javascript 带有onclick事件的多个画布作为按钮,javascript,html,css,canvas,graphics2d,Javascript,Html,Css,Canvas,Graphics2d,我在画布代码方面遇到了很大的问题，我在logo页面中只使用了1次，效果很好，我尝试将其用作菜单按钮，问题是，我不知道我到底做错了什么，希望你们中的一些人能帮助我这是我用于徽标的代码，工作正常： HTML代码： <html> <head> <title>canvas</title> </head> <body> <div id="container">

我在画布代码方面遇到了很大的问题，我在logo页面中只使用了1次，效果很好，我尝试将其用作菜单按钮，问题是，我不知道我到底做错了什么，希望你们中的一些人能帮助我

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

HTML代码：

<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>

当我将id更改为类时，最大的问题就出现了。在html中，id标记与class标记重叠。。。h1标记的文本不在画布上。。。问题就这么多，有人能告诉我我做错了什么吗？如何修复它，我在几个小时内尝试

提前谢谢你太多了

你可以试着放一把！在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;
}

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