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

multiple canvas as buttons with onclick event

本文关键字：onclick 事件按钮布作更新时间：2023-09-26

我在画布代码中遇到了很大的问题，我在页面中只使用了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>

和它的CSS CODE:

#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;
}

当我将id (#)更改为classes (.)并将html中的"id"标签更改为"class"标签时，大问题出现了，画布重叠了…h1标签的文本超出了画布…还有问题，谁能告诉我我哪里做错了?，如何解决它，我试了几个小时…

你可以试着在你的css中的每一个代码中都放一个!important。例子:

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

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