Question

我是javascript中的中间人。我正在为孩子们制作应用程序..我正在开发HTML5 / javascript。我的应用动机是选择字母并通过勾勒字母轮廓来练习它们。这是我的应用程序设计，如下图 enter image description here

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

Answer 1

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

以下是如何让孩子在字母

周围的边界框内绘制

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

可绘制区域外的任何拖动操作都不可见。

    // 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>

[原始回答]

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

enter image description here

以下是一些代码供您使用。

重点是：

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

Html canvas使用它的上下文绘制一条线：

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

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

    context.strokeStyle="blue";

要擦除画布上的所有绘图，请使用context的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>

如何通过选择html5中的颜色为特定div添加颜色

1 个答案: