畫布單線與筆畫形狀

Question

我正在開發一個應用程序與HTML5畫布顯示形狀的集合。在每一個形狀上，我都希望其中一個形狀邊有一個筆劃，但是如果不給所有邊劃一個筆劃，或者使用單獨的線和打破形狀，就不能進行填充。

我如何繪製一個形狀的筆畫和填充？

在此先感謝。

Answer 1

一種方法是當您沒有完全處理路徑時調用中風，因此只能撫摸已經繪製出的內容。很顯然，如果你不先畫出一面你想撫摸這個不會工作，所以下面有另一個選項。

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

canvas.width = canvas.height = 256; 

​ctx.fillStyle = "red"; 
ctx.strokeStyle = "black"; 
ctx.lineWidth = 2; 

ctx.beginPath(); 
ctx.moveTo(50,50); 
ctx.lineTo(100,100); 
ctx.stroke(); 
ctx.lineTo(100,200); 
ctx.lineTo(50,100); 
ctx.lineTo(50,50); 
ctx.fill(); 

Live Demo

這僅僅是概念功能的快速骯髒的證據的另一種方式來實現你在找什麼。

Live Demo 2

var shape = [{x:50,y:50}, {x:100, y:100}, {x:100, y:200}, {x:50,y:100}, {x:50, y:50}]; 

function drawShape(shape, strokeIndex){ 
    ctx.beginPath(); 
    ctx.moveTo(shape[0].x, shape[0].y); 

    for(var i = 1; i < shape.length; i++){ 
     ctx.lineTo(shape[i].x, shape[i].y); 
    } 
    ctx.closePath(); 
    ctx.fill(); 

    // stroke 
    ctx.beginPath(); 
    ctx.moveTo(shape[strokeIndex-1].x, shape[strokeIndex-1].y); 
    ctx.lineTo(shape[strokeIndex].x, shape[strokeIndex].y); 
    ctx.stroke(); 
} 

drawShape(shape, 3);