在彩色方塊上創建半透明的內部中風？

我在畫布上繪製了不同的彩色正方形，大小爲50px x 50px。在彩色方塊上創建半透明的內部中風？

我已經成功地爲這些彩色正方形添加了5px的透明內部筆劃，但它似乎像我正在做的那樣大規模矯枉過正。

ctx.fillStyle = this.color; 
ctx.fillRect(this.x, this.y, engine.cellSize, engine.cellSize); 
ctx.fillStyle = 'rgba(0, 0, 0, 0.2)'; 
ctx.fillRect(this.x, this.y, engine.cellSize, engine.cellSize); 
ctx.fillStyle = this.color; 
ctx.fillRect(this.x + 5, this.y + 5, engine.cellSize - 10, engine.cellSize - 10);

有沒有比繪製3個單獨的矩形來實現我所追求的更好的方法？

來源

2013-02-25 ShaShads

是的！

您可以在矩形內使用填充顏色，在矩形周圍使用筆觸顏色。

這裏是碼的一個小提琴：http://jsfiddle.net/m1erickson/myGky/

<!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; } 
    canvas{border:1px solid red;} 
</style> 

<script> 
    $(function(){ 

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

     ctx.beginPath(); 
     ctx.fillStyle = "red"; 
     ctx.fillRect(100,100,50,50); 
     ctx.fillStyle = 'rgba(0, 0, 0, 0.2)'; 
     ctx.fillRect(100,100,50,50); 
     ctx.fillStyle = this.color; 
     ctx.fillRect(105, 105, 40, 40); 
     ctx.fill(); 

     ctx.beginPath(); 
     ctx.rect(160,102.5,45,45); 
     ctx.fillStyle = 'rgb(163,0,0)'; 
     ctx.fill(); 
     ctx.lineWidth = 5; 
     ctx.strokeStyle = 'rgb(204,0,0)'; 
     ctx.stroke(); 

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

</head> 

<body> 
    <canvas id="canvas" width=600 height=400></canvas> 
</body> 
</html>

來源

2013-02-25 03:04:15 markE

在彩色方塊上創建半透明的內部中風？

回答

相關問題