Javascript가 자동으로 내 색상을 블렌딩하는 이유는 무엇입니까?

저는 Javascript와 HTML5로 시작했습니다. 그래서 저는 정말 바보 같은 실수를 저지르고있을 가능성이 큽니다. 사실 나는 그게 전부이며, 이것이 쉬운 문제가되기를 바랍니다. 여기 Javascript가 자동으로 내 색상을 블렌딩하는 이유는 무엇입니까?

는 내가 갖는 출력입니다 : (! Try it yourself)

Weird, wrong image

는 내가 일이 원하는 것은 단지 두 색상이 자신의 일이있는 회색 사각형 위에 파란색 사각형을 그릴 것입니다 . 솔직히이 혼합이 왜 내 컴퓨터에서 Chrome을 사용하는 이유인지 혼란스러워합니다. 여기

는 (내 컴퓨터에 대해 다시) 최소한의 작업 예입니다

(HTML)

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <title>Simple Canvas Game</title> 
    </head> 
    <body> 
     <script src="js/game.js"></script> 
    </body> 
</html>

(자바 스크립트, 이것은 game.js가)

//set up the canvas 
var canvas = document.createElement("canvas"); 
var ctx = canvas.getContext("2d"); 
canvas.width = 512; 
canvas.height = 480; 
document.body.appendChild(canvas); 

// Draw everything 
var render = function() { 
    ctx.clearRect(50, 50, 100, 100); 

    ctx.fillStyle = "rgb(240, 240, 240)"; 
    ctx.fillRect(0, 0, 100, 100); 

    ctx.strokeStyle="rgb(0, 0, 255)"; 
    ctx.strokeRect(20,20,150,100); 
} 

setInterval(render, 10);

출처

2013-02-09 Richard Rast

이것은 블렌드가 아닙니다. 스트로크가 1 픽셀 넓이이고 캔버스의 좌표는 사각형의 좌표이고 선은 사각형 사이입니다. 선은 픽셀 사이를 이동하고 앤티 앨리어싱됩니다. 선을 픽셀과 정렬하려면, (100,100)이 아닌 (99.5,99.5)와 같은 좌표를 사용해야합니다. 설명하기는 어렵지만 많은 설명서가 있습니다.

간략하게 말하면 전체 드로잉 코드를 0.5,0.5로 변환해야합니다. 다음과 같이 시도하십시오.

ctx.save(); 
ctx.translate(0.5,0.5); 

ctx.clearRect(50, 50, 100, 100); 

ctx.fillStyle = "rgb(240, 240, 240)"; 
ctx.fillRect(0, 0, 100, 100); 

ctx.strokeStyle="rgb(0, 0, 255)"; 
ctx.strokeRect(20,20,150,100); 
ctx.restore();

출처

2013-02-09 15:06:11 fdreger

그건 의미가 있습니다. (전에는 JS가 아닌 안티 앨리어싱을 보았습니다) 문제를 해결했지만, 정수 좌표에 대해 그런 종류의 동작을하는 것은 이상합니다. 아, 서로 다른 디자인 결정. –

확인 globalCompositeOperation option. "lighter"으로 설정 한 것처럼 보입니다. 기본값은 "source-over"입니다.

출처

2013-02-09 15:02:34 Bergi

설명이 있지만 예상대로 작동하지 않습니다. 나는 'ctx.globalCompositeOperation = "source-over"라인을 추가했다. '렌더링 코드에서뿐만 아니라 내가 ctx 변수를 만들었지 만 문제 이미지는 동일하게 유지됩니다. –

@ 리차드 : fdregers 대답을 참조하십시오. 스트로크는 2 픽셀로 분산되어 알파를 제공합니다. – Bergi

Javascript가 자동으로 내 색상을 블렌딩하는 이유는 무엇입니까?

답변

관련 문제