javascript - 如何通过在 html5 中选择颜色来为特定的 div 赋予颜色

Question

我是 javascript 的中间人。我正在为儿童制作一个应用程序.. 我正在开发 HTML5/javascript。我的应用程序动机是选择字母并通过勾画字母轮廓来练习它们。这是我在下图中的应用程序设计在此处输入图像描述

在应用程序中，我想从铅笔给出的颜色中选择所需颜色的颜色并在 A 的轮廓上绘画。我必须用给定的橡皮擦擦掉。我几乎完成了应用程序，除了着色部分。请任何人帮助并指导我如何做到这一点..我只想知道如何通过选择颜色来使其为轮廓着色..如果有任何可用的代码或可用的演示，请告诉我。专家阐明了这个问题

score 1 · Accepted Answer

[根据更改请求修改答案]

这是让孩子在字母周围的边界框内任意位置绘制的方法

首先，定义绘图将被限制的区域。

可绘制区域之外的任何拖动绘制都将不可见。

    // define the drawable area
    var minX=60;
    var maxX=250;
    var minY=140;
    var maxY=380;

然后在 mousemove 中，仅当鼠标位于该可绘制区域内时才绘制：

        if(mouseX>minX && mouseX<maxX && mouseY>minY && mouseY<maxY){
            ctx.beginPath();
            ctx.moveTo(startX,startY);
            ctx.lineTo(mouseX,mouseY);
            ctx.stroke();
        }

这是代码和小提琴：http: //jsfiddle.net/m1erickson/tAkAy/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    #wrapper{
        position:relative;
        width:637px;
        height:477px;
    }
    #canvas,#bkImg{
        position:absolute; top:0px; left:0px;
        border:1px solid green;
        width:100%;
        height:100%;
    }
    #canvas{
        border:1px solid red;
    }
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    ctx.strokeStyle="red";
    ctx.lineWidth=25;
    ctx.lineCap="round";

    // define the drawable area
    // any drag-draws outside the drawable area won't be visible
    var minX=60;
    var maxX=250;
    var minY=140;
    var maxY=380;

    var canvasOffset=$("#canvas").offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;

    var startX;
    var startY;
    var isDown=false;

    function handleMouseDown(e){
      startX=parseInt(e.clientX-offsetX);
      startY=parseInt(e.clientY-offsetY);
      isDown=true;
    }

    function handleMouseUp(e){
      if(!isDown){return;}
      isDown=false;
    }

    function handleMouseMove(e){
        if(!isDown){return;}
        mouseX=parseInt(e.clientX-offsetX);
        mouseY=parseInt(e.clientY-offsetY);
        if(mouseX>minX && mouseX<maxX && mouseY>minY && mouseY<maxY){
            ctx.beginPath();
            ctx.moveTo(startX,startY);
            ctx.lineTo(mouseX,mouseY);
            ctx.stroke();
        }
        startX=mouseX;
        startY=mouseY;
    }

    $("#canvas").mousedown(function(e){handleMouseDown(e);});
    $("#canvas").mousemove(function(e){handleMouseMove(e);});
    $("#canvas").mouseup(function(e){handleMouseUp(e);});
    $("#canvas").mouseout(function(e){handleMouseOut(e);});

}); // end $(function(){});
</script>

</head>

<body>
    <div id="wrapper">
        <img id="bkImg" src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/game1.png" width=637 height=477>
        <canvas id="canvas" width=637 height=477></canvas>
    </div>
</body>
</html>

[原答案]

如何在画布上以选定的颜色绘制线条

在此处输入图像描述

这是一些代码供您开始使用。

重点是：

Mousedown 开始一行并设置它的起点
Mouseup 结束一行并设置它的端点。这是一条永久线路。
Mousemove 绘制一条临时线，直到用户释放鼠标。
绘制临时线时，必须重新绘制所有永久线，因为必须擦除画布以创建“移动”临时线。

Html 画布使用它的上下文绘制一条线，如下所示：

    function drawLine(line){
        ctx.beginPath();
        ctx.moveTo(line.x1,line.y1);
        ctx.lineTo(line.x2,line.y2);
        ctx.stroke();
    }

要设置/更改线条颜色，请设置上下文的 strokeStyle：

    context.strokeStyle="blue";

要擦除画布上的所有绘图，请使用上下文的 clearRect：

    context.clearRect(0,0,canvas.width,canvas.height);

如果您不习惯指定命中区域，这很简单。

指定您可能撞击的区域的边界框（左上角和右下角）（例如蓝色蜡笔）
然后，如果鼠标在该边界框内单击，您就会成功。

画布在游戏图像上分层，所有线条都绘制在画布上，而不是图像上。

其余的只是简单的 javascript 内容。

这是代码和小提琴：http: //jsfiddle.net/m1erickson/G6eWn/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; }
    #wrapper{
        position:relative;
        width:637px;
        height:477px;
    }
    #canvas,#bkImg{
        position:absolute; top:0px; left:0px;
        border:1px solid green;
        width:100%;
        height:100%;
    }
    #canvas{
        border:1px solid red;
    }
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    ctx.strokeStyle="red";
    ctx.lineWidth=25;
    ctx.lineCap="round";

    var canvasOffset=$("#canvas").offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;

    var startX;
    var startY;
    var isDown=false;

    var lines=[];

    var eraser={x:446,y:413,right:516,bottom:475};

    var pens=[
        {x:240,y:413,right:275,bottom:475,color:"red"},
        {x:276,y:413,right:308,bottom:475,color:"green"},
        {x:309,y:413,right:341,bottom:475,color:"orange"},
        {x:342,y:413,right:375,bottom:475,color:"blue"},
        {x:376,y:413,right:412,bottom:475,color:"yellow"},
        {x:412,y:413,right:447,bottom:475,color:"pink"},
    ];


    function selectPenColor(x,y){
        for(var i=0;i<pens.length;i++){
            var pen=pens[i];
            if(x>=pen.x && x<=pen.right && y>=pen.y && y<=pen.bottom){
                ctx.strokeStyle=pen.color;
                drawLines();
                return(true);
            }
        }
        return(false);
    }

    function drawLines(){
        ctx.clearRect(0,0,canvas.width,canvas.height);
        for(var i=0;i<lines.length;i++){
            drawLine(lines[i]);
        }
    }

    function drawLine(line){
        ctx.beginPath();
        ctx.moveTo(line.x1,line.y1);
        ctx.lineTo(line.x2,line.y2);
        ctx.stroke();
    }

    function selectEraser(x,y){
        if(x>=eraser.x && x<=eraser.right && y>=eraser.y && y<=eraser.bottom){
            lines=[];
            ctx.clearRect(0,0,canvas.width,canvas.height);
            return(true);
        }
        return(false);
    }


    function handleMouseDown(e){
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      // select a pen color or erase
      // if so, don't start a line
      if(selectPenColor(mouseX,mouseY)){return;}
      if(selectEraser(mouseX,mouseY)){return;}

      startX=mouseX;
      startY=mouseY;
      isDown=true;
    }

    function handleMouseUp(e){
      if(!isDown){return;}
      isDown=false;
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);

      lines.push({x1:startX,y1:startY,x2:mouseX,y2:mouseY});
      drawLines();

    }

    function handleMouseOut(e){
        handleMouseUp(e);
    }

    function handleMouseMove(e){

        if(!isDown){return;}
        mouseX=parseInt(e.clientX-offsetX);
        mouseY=parseInt(e.clientY-offsetY);

        drawLines();

        drawLine({x1:startX,y1:startY,x2:mouseX,y2:mouseY});

    }

    $("#canvas").mousedown(function(e){handleMouseDown(e);});
    $("#canvas").mousemove(function(e){handleMouseMove(e);});
    $("#canvas").mouseup(function(e){handleMouseUp(e);});
    $("#canvas").mouseout(function(e){handleMouseOut(e);});

}); // end $(function(){});
</script>

</head>

<body>
    <div id="wrapper">
        <img id="bkImg" src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/game1.png" width=637 height=477>
        <canvas id="canvas" width=637 height=477></canvas>
    </div>
</body>
</html>

javascript - 如何通过在 html5 中选择颜色来为特定的 div 赋予颜色

1 回答 1

Related

Reference