canvas调色板绘制出来后添加功能使其可以让用户选择

本帖最后由 u011751266 于 2014-04-27 17:08:08 编辑

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title><script type="text/javascript">
    window.onload=function(){
    var drawing =  document.getElementById("drawing");//div层#content中的canvas
    if(drawing.getContext){
        var context = drawing.getContext("2d");
    var btn_select_color = document.createElement("input");
        btn_select_color.type = "button";
        btn_select_color.value = "打开调色板看看？";
     
        var btn_close_board = document.createElement("input");
        btn_close_board.type = "button";
        btn_close_board.value = "关闭调色板";
     
        var content = document.getElementById("content");//div层#content
        content.appendChild(btn_select_color);
        content.appendChild(btn_close_board);
    var arr=[];
        function drawBoard(){
            for(var i = 0;i < 6;i++){
                for(var j = 0;j < 6;j++){
                    context.fillStyle = "rgb(0,"+Math.floor(255-i*42.5)+
                        ","+Math.floor(255-j*24.5)+")";
                    context.fillRect(i*20,j*20,20,20);
    arr[i+'-'+j]="rgb(0,"+Math.floor(255-i*42.5)+","+Math.floor(255-j*24.5)+")";
                }
            }
        }
        function closeBoard(){
            context.clearRect(0,0,120,120);
        }
    btn_select_color.onclick=drawBoard;
    btn_close_board.onclick=closeBoard;
    var div=document.getElementById("show");
    drawing.onclick=function(e){
    var a=e||window.event;
    div.style.backgroundColor=arr[parseInt(a.clientX/20)+'-'+parseInt(a.clientY/20)];
    }

        //EventUtil.addHandler(btn_select_color,"click",drawBoard);
        //EventUtil.addHandler(btn_close_board,"click",closeBoard);
    }
    }
    </script>
    </head><body>
    <div id="content">
    <canvas id='drawing'></canvas>
    <div id="show">show</div>
    </div>
    </body>
    </html>这样试试