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

Question

我在画布代码方面遇到了很大的问题，我在页面（徽标中）仅使用了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代码：

#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的（＃）更改为类（。 ），将html中的“ id”标记更改为“ class”标记时，最大的问题来了，画布重叠了……h1标记的文本超出了画布。 ..以及问题之极，有人能告诉我我在做什么错吗？，如何解决它，我在几个小时内都在尝试...

太感谢了！

Answer 1

您可以尝试将！important放入CSS的每个代码中。 例：

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

这以前解决了我的问题，希望它也可以解决您的问题。

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

问题描述

1 个解决方案

解决方案1
0 2014-08-18 01:54:07

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

问题描述

1 个解决方案

解决方案1 0 2014-08-18 01:54:07

解决方案1
0 2014-08-18 01:54:07