Fatal编程技术网
  • javascript/
  • Javascript 另一画布元素上基于画布的颜色选择器

Javascript 另一画布元素上基于画布的颜色选择器

javascript

Javascript 另一画布元素上基于画布的颜色选择器,javascript,Javascript,我已经制作了一个具有窗口宽度和高度的画布。我还制作了一个基于画布的颜色选择器，它有一个onmousemove事件来获取像素信息，以便我可以使用该颜色在主画布上绘制。onmousemove for picker单独工作，但只要我将其放在角落一侧，并根据我的需要给它一个固定的位置主绘图画布，它的鼠标事件不起作用。即使我可以在颜色选择器下绘图。我尝试为颜色选择器设置z索引属性，但它不起作用。如何解决此问题并使我的选择器正常工作 希望我把问题说清楚：( 如果你运行我的代码，我希望你能理解这个问题 <

我已经制作了一个具有窗口宽度和高度的画布。我还制作了一个基于画布的颜色选择器，它有一个onmousemove事件来获取像素信息，以便我可以使用该颜色在主画布上绘制。onmousemove for picker单独工作，但只要我将其放在角落一侧，并根据我的需要给它一个固定的位置主绘图画布，它的鼠标事件不起作用。即使我可以在颜色选择器下绘图。我尝试为颜色选择器设置z索引属性，但它不起作用。如何解决此问题并使我的选择器正常工作

希望我把问题说清楚：(

如果你运行我的代码，我希望你能理解这个问题

<html>
<head>
<title>a drawing board</title>

</head>
<body style="margin:0;">

<script>
var radius=10;
var colorit="";
var lines;
var x,y;
var cna=false;
var i=0;

function canvloder(){

var canvas=document.getElementById("mycanvas");
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
canvas.style.backgroundColor="yellow";

}
function nowdraw(e){

cna=true;

}
function drawit(e){

if(cna){

var ctx=document.getElementById("mycanvas").getContext("2d");
x=e.clientX;
y=e.clientY;
if(i==0){
ctx.lineWidth=2*radius;
ctx.lineTo(x,y);
ctx.stroke();

}
if(i>0){

ctx.fillStyle=colorit;
ctx.beginPath();
ctx.arc(x,y,radius,0,2*Math.PI);
ctx.fill();
i=0;

}
ctx.fillStyle=colorit;
ctx.beginPath();
ctx.arc(x,y,radius,0,2*Math.PI);
ctx.fill();
ctx.lineWidth=2*radius;
ctx.strokeStyle=colorit;
ctx.beginPath();
ctx.moveTo(x,y);
}

}
function cannotdraw(){
cna=false;
i++;

}


window.onmousedown=nowdraw;
window.onmousemove=drawit;
window.onmouseup=cannotdraw;

function pencolor( colname){
colorit=colname;

}

function therad(capture){
if(capture=="increase"){
radius++;
}
if(capture=="decrease"){
radius--;
}
}
function gotClicked(val){
radius=val;
}

function itsmycanvas(){


  var newCanvas = document.createElement('canvas');



        var k=0,j=0,a=255,r=0;g=0;
        newCanvas.width = 256;
        newCanvas.height = 256;
        newCanvas.style.position="fixed";
        newCanvas.style.top="30px";
        newCanvas.style.right="0px";
            newCanvas.style.border ='2px solid black';
            newCanvas.style.zIndex="2000";

        for(r=0;r<256;r++){

        for(g=0;g<256;g++){




               var context = newCanvas.getContext('2d');

                context.beginPath();
                context.moveTo(k,j);
                  context.strokeStyle = 'rgb(' + r + ', ' + g + ','+a+')';
                  context.lineTo(k+90,j);

                context.stroke();
                context.closePath();

                  j++;
                   if(j==256){
                   if(k<=256-90){
                        k=k+90;
                        }
                        j=0;
                        }

                a--;
                if(a==0){a=150;}



            }
        }


        var d=document.body.appendChild(newCanvas);
        d.addEventListener("mouseover",myfunc,false);   
        }
        function myfunc(e) {


    var imageData = context.getImageData(e.clientX, e.clientY, 1, 1);
    var red = imageData.data[0];
    var green = imageData.data[1];
    var blue = imageData.data[2];
    var alpha = imageData.data[3];
   alert(red+"  "+green+"  "+blue);
}





window.onload=canvloder;
</script>

<canvas id="mycanvas"></canvas>
<div style="position:fixed;top:0px;background-color:grey;display:block;width:100%;">
<div style="float:right;left:50px;">Radius <span title="increase width"style="background-color:white;padding:5px;margin-right:5px;" onCLick="therad('increase');"> + </span><span title="decrease width" style="padding:5px;background-color:white;margin-right:5px;" onClick="therad('decrease');"> - </span></div>
<div  title="red" style="background-color:red;width:30px;height:30px;border-radius:30px;float:left;" onClick="pencolor('red');"></div>
<div  title="black"style="background-color:black;width:30px;height:30px;border-radius:40px;float:left;" onClick="pencolor('black');"></div>
<div  title="pink"style="background-color:pink;width:30px;height:30px;border-radius:40px;float:left;" onClick="pencolor('pink');"></div>
<div  title="green"style="background-color:green;width:30px;height:30px;border-radius:40px;float:left;" onClick="pencolor('green');"></div>
<div  title="eraser"style="background-color:white;width:30px;height:30px;border-radius:40px;float:left;text-align:centre;" onClick="pencolor('yellow');">clr</div>
<div  title="blue"style="background-color:blue;width:30px;height:30px;border-radius:40px;float:left;" onClick="pencolor('blue');"></div>
</div>
<select style="position:fixed;top:0px;left:300px;">radius
<option onClick="gotClicked(15);">15px</option>
<option onClick="gotClicked(10);" selected>10px</option>
<option onClick="gotClicked(6);">8px</option>
<option onClick="gotClicked(5);">5px</option>
<option onClick="gotClicked(3);">3px</option>
</select>
<input type="button" onClick="itsmycanvas();" value="SHOW CANVAS" style="position:fixed;top:400px;right:0px;">
</body>
</html>


画板
var半径=10；
var colorit=“”；
var线；
变量x，y；
var cna=假；
var i=0；
函数canvloder（）{
var canvas=document.getElementById（“mycanvas”）；
canvas.width=window.innerWidth；
canvas.height=window.innerHeight；
canvas.style.backgroundColor=“黄色”；
}
函数nowdraw（e）{
cna=真；
}
函数drawit（e）{
国际单项体育联合会（cna）{
var ctx=document.getElementById（“mycanvas”）.getContext（“2d”）；
x=e.clientX；
y=e.clientY；
如果（i==0）{
ctx.线宽=2*半径；
ctx.lineTo（x，y）；
ctx.stroke（）；
}
如果（i>0）{
ctx.fillStyle=colorit；
ctx.beginPath（）；
ctx.弧（x，y，半径，0,2*Math.PI）；
ctx.fill（）；
i=0；
}
ctx.fillStyle=colorit；
ctx.beginPath（）；
ctx.弧（x，y，半径，0,2*Math.PI）；
ctx.fill（）；
ctx.线宽=2*半径；
ctx.strokeStyle=colorit；
ctx.beginPath（）；
ctx.moveTo（x，y）；
}
}
函数cannotdraw（）{
cna=假；
i++；
}
window.onmousedown=nowdraw；
window.onmousemove=drawit；
window.onmouseup=cannotdraw；
函数pencolor（colname）{
colorit=colname；
}
功能治疗仪（捕获）{
如果（捕获=“增加”）{
radius++；
}
如果（捕获=“减少”）{
半径--；
}
}
函数（val）{
半径=val；
}
函数itsmycanvas（）{
var newCanvas=document.createElement（'canvas'）；
变量k=0，j=0，a=255，r=0；g=0；
newCanvas.width=256；
newCanvas.height=256；
newCanvas.style.position=“固定”；
newCanvas.style.top=“30px”；
newCanvas.style.right=“0px”；
newCanvas.style.border='2px纯黑'；
newCanvas.style.zIndex=“2000”；

对于（r=0；r我从html中删除了body标记，并在body
中添加了no warp选项（fiddle选项）

它似乎起作用了


它工作了..把小提琴里的弹体从超负荷改为无包裹。你是说窗户。现在RAP？？你能对我上面提到的问题提出什么建议吗？