저 또는 jsfiddle 버그?

간단한 캔버스 그리기, jsFiddle 좌표에 보인다 올바르게 인식되지 않는 :
JS :저 또는 jsfiddle 버그?

var w = $(".trace").width(); 
var h = $(".trace").height(); 

var bgCanvas = $("<canvas></canvas>").addClass("canvas"); 
bgCanvas.width(w).height(h); 
var bgContext = bgCanvas[0].getContext("2d"); 

$(".trace").append(bgCanvas); 

bgContext.strokeStyle = "#000"; 
bgContext.moveTo(0,0); 
//this line should go to the middle of the canvas 
//instead it goes much further both horizontally and vertically 
bgContext.lineTo(200,100); 
bgContext.stroke();

HTML :

<div class="trace"></div>

CSS :

.trace{ 
    width: 400px; 
    height: 200px; 
    background: yellow; 
} 
.canvas{ 
    border: 1px #000 dotted; 
}

jsFiddle

을

최신 IE 및 Chrome에서 확인되었습니다.
그들 (jsFiddle 개발자)은 github에서 문제를 제출하기 전에 다른 사람들과 공유하고 점검 할 것을 제안합니다. 그래서 ... 내 실수입니까, 아니면 jsFiddle입니까?

출처

2013-12-17 Daniel Gruszczyk

([캔버스는 "폭"/ "높이"속성 CSS를 사용하는 경우 연신 그러나 정상인] http://stackoverflow.com/questions/2588181/canvas-is-stretched-when- using-css-but-normal-with-width-height-properties), [canvas width attribute] (http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element)를 참조하십시오. .html # attr-canvas-width) – Andreas

끝내 주셔서 감사합니다! –

변경이 라인 :

bgCanvas.width(w).height(h);

이에

하고 작동합니다 .width를 사용 .height 단순히 캔버스의 CSS 크기를 요소되지는 비트 맵을 수정하여

bgCanvas.attr({width: w, height:h});

. 기본 크기가 300 x 150이므로 CSS로 설정 한 값으로 늘어납니다.

Modified fiddle

출처

2013-12-17 13:39:40 K3N

이제 이것이 이상합니다 ... 그래서 jQuery입니까? 캔버스의 경우 단순히 $ .width()를 사용할 수는 없지만 대신 속성을 사용합니까? 감사. –

@DanielGruszczyk은 jQuery의 잘못은 아니지만 예상대로 CSS 크기를 설정하고 있지만 캔버스의 경우 폭과 높이 * 속성 *을 명시 적으로 설정해야합니다. 이는 CSS와 동일하지 않습니다. – K3N

예, Andreas가 방금 원래 게시글에 덧글에 링크를 게시하여 문제를 설명했습니다. –

저 또는 jsfiddle 버그?

답변

관련 문제