캔버스 테두리 선에 실제 색상을 설정 하시겠습니까?

이 간단한 사각형 설정 코드가 있습니다.캔버스 테두리 선에 실제 색상을 설정 하시겠습니까?

검은 색 테두리가 있습니다.

그러나 검은 색은 보이지 않지만 회색은 보지 않습니다.

<!doctype html> 
 
<html lang="en"> 
 

 
<canvas id="canvas" width=300 height=300></canvas> 
 

 
<script> 
 
function draw() 
 
{ 
 
    ctx.beginPath(); 
 
    ctx.strokeStyle = "#000000"; 
 
    ctx.strokeRect(rect.x, rect.y, rect.w, rect.h); 
 
} 
 
var canvas = document.getElementById("canvas"); 
 
var ctx = canvas.getContext("2d"); 
 
ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
var rect = { 
 
    x: 10, 
 
    y: 10, 
 
    w: 40, 
 
    h: 100 
 
}; 
 
draw(); 
 
</script> 
 

 
</html>

질문 : 내가 잘못 뭐하는 거지

나는 색상을 설정할 수 있습니다 어떻게 정의로 될?

출처

2014-09-22 Royi Namir

가능한 복제본 [html5 캔버스에서 단일 픽셀 선 그리기] (http://stackoverflow.com/questions/9311428/draw-single-pixel-line-in-html5- 캔버스) –

중복 중 - http://stackoverflow.com/questions/9311428/draw-single-pixel-line-in-html5-canvas –

캔버스 선을 만들면 선언 된 점을 통과하고 너비가 lineWidth 인 선이 만들어집니다. 선이 2 픽셀 사이에있는 경우 (예 : 경계를 지나는 선을 만들 때 x 및 y에 정수 값을 선택하는 경우) 선이 교차하는 2 픽셀,이 경우 50 %에서 왼쪽에있는 픽셀, 오른쪽에있는 픽셀에 50 %가 표시되어 회색으로 표시됩니다. 당신의 X에 .5 추가 및 y는 라인이 항상 1 개 픽셀에 머물 수

<!doctype html> 
 
<html lang="en"> 
 

 
<canvas id="canvas" width=300 height=300></canvas> 
 

 
<script> 
 
function draw() 
 
{ 
 
    ctx.beginPath(); 
 
    ctx.strokeStyle = "#000000"; 
 
    ctx.strokeRect(rect.x, rect.y, rect.w, rect.h); 
 
} 
 
var canvas = document.getElementById("canvas"); 
 
var ctx = canvas.getContext("2d"); 
 
ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
var rect = { 
 
    x: 10.5, 
 
    y: 10.5, 
 
    w: 40, 
 
    h: 100 
 
}; 
 
draw(); 
 
</script> 
 

 
</html>

당신은 당신이 선이 직선 검은 색, 만 1 개 픽셀을 차지하는 것을 볼 수 있습니다 스 니펫을 실행하는 경우 너비. 방금 x5에 x5를 추가했습니다.

출처

2014-09-22 12:42:51 towc

캔버스 테두리 선에 실제 색상을 설정 하시겠습니까?

답변

관련 문제