색이있는 사각형에 반투명의 내부 획을 생성 하시겠습니까?

캔버스에 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

색이있는 사각형에 반투명의 내부 획을 생성 하시겠습니까?

답변

관련 문제