선을 그릴 때 HTML5를 사용하고 있습니다. 그러나 캔버스의 너비와 높이가 큰 경우 크롬에서 제대로 작동하지 않습니다.html5 캔버스에 선을 그릴 수 없습니다.
내가 크롬 19.0.1084.52을 사용하고내 운영 체제 윈도우
사람이 테스트를 위해 http://www.w3schools.com/html5/tryit.asp?filename=tryhtml5_canvas_line 사용한 7.입니까?
캔버스의 너비와 높이를 늘리면 선이 사라집니다.
크롬에 캔버스의 최대 높이와 너비가 있으며 해결책을 갖고있는 사람이 있습니까?
사용 된 브라우저에 따라 다를 수있는 행의 최대 너비와 높이가 있습니다.
매우 넓은 선을 그리려면 직사각형을 그려서 올바른 위치로 변형하고 선의 각도로 회전시킵니다.
거기 폭과 높이 제한 될,하지만 난이 http://jsfiddle.net/AkashSaikia/4c75a/
그것은 대형
함께 연주 한 그리고 같은 는 여기 W3C 당 여기에
, 그것은 충분히 느낄 수와 같은 그 부호없는 긴이 약 0 4,294,967,295
interface HTMLCanvasElement : HTMLElement {
attribute unsigned long width;
attribute unsigned long height;
DOMString toDataURL(optional DOMString type, any... args);
void toBlob(FileCallback? _callback, optional DOMString type, any... args);
object? getContext(DOMString contextId, any... args);
};
하는 것입니다하지만 일단 테스트로는 약 0 소요 당신이 Canavas의 높이와 너비를 변경하는 경우 또는 얼마나 2147483647
는 http://jsfiddle.net/AkashSaikia/9EWad/1/
여기를 참조하십시오?
캔버스의 높이 및 너비 속성을 변경하면 그 위에 그려지는 것들이 지워집니다.
흥미로운 문제입니다. 캔버스 폭>32766 경우 캔버스 폭>32767
내 크롬과 파이어 폭스로 테스트 한 후, 나는 것을 발견
캔버스 너비가 해당 숫자보다 큰 경우 r, 아무것도 그려지지 않을 것이다.
왜 이러한 제한이 있는지 알 수 없습니다. 어쩌면 우리는 브라우저의 소스 코드로 근원을 찾을 수 있습니다!
다음 코드는 예제입니다. 당신은 click here to run it 일 수 있습니다.
<!DOCTYPE html>
<html>
<body>
If canvas width is greater than 32767, Chrome can't draw anything.<br>
<canvas id="myCanvas" width="32768" height="100"></canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.lineWidth = 5;
ctx.moveTo(10,50);
ctx.lineTo(300,50);
ctx.stroke();
</script>
</body>
</html>
내 경험에 의하면, 적어도 iOS 기기의 경우 캔버스 렌더링에 크기 제한이 있습니다. 이는 캔버스가 일반적으로 하드웨어 가속화로 인해 제한된 GPU 메모리 때문입니다.
iOS 기기의 경우 최대 메모리 크기는 256MB 이상의 메모리를 갖춘 기기의 경우 5 메가 픽셀, 메모리가 적은 기기의 경우 3 메가 픽셀입니다.
이 코드를 테스트 해 볼 수 있습니까? 브라우저가 작동하지 않습니다. <캔버스 id = "myCanvas"width = "600"height = "1000"style = "border : 1px solid # c3c3c3;"> 브라우저가 캔버스 요소를 지원하지 않습니다. – Ranjith위의 코드 내 크롬을 작동하지 않습니다. 나는 캔버스 너비의 크기를 600과 높이 1000으로 제한했다. ande 선은 10,10에서 320,50으로 10,50으로 다시 그려진다. 여기에서 – Ranjith
을 볼 수 있습니다. http://jsfiddle.net/AkashSaikia/6wHj2/ 문제가 뭐니 뭐니해도 ... –