다각형 지역 HTML5 인 캔버스

Question

채우기이 HTML 코드

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>  
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.4.min.js"></script> 
<input type="button" value="draw" onclick="setdraw()" /> 
<input type="button" value="fill" onclick="setfill()" /> 
<div id="drawarea"> 
</div> 

인이,이 결과 자바 스크립트 코드

var flag = false; 
var pen_arr = []; 
var drawble = true; 
$(document).ready(function(){ 
    init(); 
}); 

function setfill(){ 
    drawble = false; 
} 

function setdraw(){ 
    drawble = true; 
} 

function init(){ 
    stage = new Kinetic.Stage({ 
     container: 'drawarea', 
     width: 500, 
     height: 800 
    }); 

    background = new Kinetic.Rect({ 
     x: 0, 
     y: 0, 
     width: stage.getWidth(), 
     height: stage.getHeight() 
    }); 

    layer = new Kinetic.Layer(); 
    layer.add(background); 

    stage.add(layer); 

    stage.on("mousedown", mouseDown); 
    stage.on("mousemove", mouseMove); 
    stage.on("mouseup", mouseUp); 
} 

function mouseDown(){ 

    if (drawble === true){ 
    flag = true; 
    var mousePos = stage.getMousePosition(); 
    var tmp_pen = new Kinetic.Line({ 
     points:[mousePos.x, mousePos.y, mousePos.x + 1, mousePos.y + 1 ], 
     stroke: "blue", 
     strokeWidth: 3 
    }); 
    layer.add(tmp_pen);  
    pen_arr.push(tmp_pen); 
    layer.drawScene(); 
    }else{ 
    flag = false; 

    // in here i have to carry fill function 
    // when i click in stage, i have to set the fill color in closed area after drawing pen 
    } 

} 

function mouseMove(){ 
    if(flag === true) { 
     var mousePos = stage.getMousePosition(); 
     var tmp_pen = pen_arr[pen_arr.length - 1]; 
     var points = tmp_pen.getPoints(); 
     points.push({x:mousePos.x,y:mousePos.y}); 
     tmp_pen.setPoints(points); 
     layer.drawScene(); 
    } 
} 

function mouseUp(){ 
    flag = false;  
} 

확인하시기 바랍니다있다.
여기에서

당신이
이
당신은 클릭하여 펜을 그릴 수있다 "그리기", "입력"두 개의 버튼이 일부 도면 샘플을 확인할 수 있습니다 "우리는 클릭하여 채우기 색을 설정해야합니다 버튼
을"그리는 " 채우기 "버튼
"채우기 "버튼을 클릭하면 스테이지의 아무 지점이나 클릭 할 수 있습니다. 그 당시
, 우리는 지역

폐쇄 채우기 색상을 설정해야하는 것은 그래서 내 질문은 당신의 코드를 제공하지 않을거야

Answer 1

"나는이 지역의 채우기 색상을 설정해야 폐쇄".
에 체크 아웃 :

http://www.html5canvastutorials.com/tutorials/html5-canvas-shape-fill/