«canvas» 태그된 질문

캔버스는 많은 자유 형식 그래픽 출력 API와 함께 사용되는 드로잉 표면의 일반적인 용어입니다. 프로그래밍 언어 및 대상 환경과 함께 사용중인 특정 그래픽 API를 나타내는 다른 태그와 함께이 태그를 사용하십시오. [android], [uwp], [wpf], [tkinter], [java], [html5], [chart.js] 등. 적절한 경우 [android-canvas], [html5-canvas], [tkinter-canvas]와 같은 특정 캔버스 태그도 포함하십시오.

5
타일링 알고리즘지도
지도 Perlin 노이즈 하이트 맵을 사용하여 Javascript로 타일 기반 RPG를 만든 다음 노이즈 높이를 기준으로 타일 유형을 지정합니다. 지도는 미니 맵보기에서 이와 같이 보입니다. 이미지의 각 픽셀에서 색상 값을 추출하고 타일 사전의 타일에 해당하는 (0-255) 사이의 위치에 따라 정수 (0-5)로 변환하는 상당히 간단한 알고리즘이 있습니다. 그런 다음이 200x200 배열이 클라이언트로 …
7
HTML5 Canvas 뷰포트의 너비 100 % 높이?
뷰포트의 너비와 높이를 100 % 차지하는 캔버스 요소를 만들려고합니다. 내 예제 에서 발생하는 것을 볼 수 있지만 Chrome과 FireFox에 스크롤 막대를 추가하고 있습니다. 여분의 스크롤 막대를 방지하고 창의 너비와 높이를 캔버스 크기로 정확하게 제공하려면 어떻게해야합니까?
151 jquery  html  canvas  viewport 
14
HTML5 캔버스 크기 조정 (다운 스케일) 이미지 고품질?
브라우저에서 이미지 크기를 조정하기 위해 html5 canvas 요소를 사용합니다. 품질이 매우 낮습니다. 나는 이것을 발견했다 : <canvas>를 스케일링 할 때 보간을 비활성화 하지만 품질을 높이는 데 도움이되지 않습니다. 아래는 내 CSS 및 js 코드뿐만 아니라 Photoshop에서 호출되고 캔버스 API에서 크기가 조정 된 이미지입니다. 브라우저에서 이미지를 스케일링 할 때 최적의 품질을 …
10
canvas.toDataURL ()을 사용하여 캔버스를 이미지로 저장하는 방법?
현재 HTML5 웹 앱 / Phonegap 기본 앱을 만들고 있는데로 캔버스를 이미지로 저장하는 방법을 알 수 없습니다 canvas.toDataURL(). 누군가 나를 도울 수 있습니까? 여기 코드가 있는데, 무엇이 잘못 되었나요? // 내 캔버스 이름은 "canvasSignature" 자바 스크립트 : function putImage() { var canvas1 = document.getElementById("canvasSignature"); if (canvas1.getContext) { var ctx = …
9
requestAnimationFrame으로 fps를 제어합니까?
requestAnimationFrame지금 사물에 애니메이션을 적용하는 실질적인 방법 인 것 같습니다 . 그것은 대부분 나를 위해 잘 작동했지만 지금은 캔버스 애니메이션을 시도하고 있는데 궁금합니다. 특정 fps에서 실행할 수있는 방법이 있습니까? rAF의 목적은 일관되게 부드러운 애니메이션을위한 것이며, 애니메이션을 고르지 않게 만들 위험이 있지만, 지금은 상당히 다른 속도로 매우 임의로 달리는 것처럼 보이며, 싸울 …
8
HTML5 <canvas>가 지원되지 않음을 감지하는 가장 좋은 방법
브라우저가 HTML5 &lt;canvas&gt;태그를 지원하지 않는 상황을 처리하는 표준 방법 은 다음과 같은 대체 컨텐츠를 포함시키는 것입니다. &lt;canvas&gt;Your browser doesn't support "canvas".&lt;/canvas&gt; 그러나 나머지 페이지는 동일하게 유지되므로 부적절하거나 오해의 소지가 있습니다. 지원되지 않는 캔버스를 감지하여 나머지 페이지를 적절하게 표시 할 수있는 방법을 원합니다. 어떤 것을 권 하시죠?
10
자바 스크립트 HTML5 캔버스를 사용하여 N 점을 통해 부드러운 곡선을 그리는 방법은 무엇입니까?
그리기 응용 프로그램의 경우 마우스 움직임 좌표를 배열에 저장 한 다음 lineTo를 사용하여 그립니다. 결과 라인이 부드럽 지 않습니다. 수집 된 모든 점 사이에 단일 곡선을 생성하려면 어떻게해야합니까? 나는 봤지만 선 그리기를위한 3 개의 함수 만 찾았습니다 .2 개의 샘플 포인트에는 간단히을 사용하십시오 lineTo. 3 샘플 포인트를 들어 quadraticCurveTo, 4 …
5
HTML5 캔버스에 SVG 파일 그리기
HTML5 캔버스에 SVG 파일을 그리는 기본 방법이 있습니까? Chrome은 SVG를 이미지로로드 (및 단순히 사용 drawImage) 하는 것을 지원 하지만 개발자 콘솔은 경고합니다 resource interpreted as image but transferred with MIME type image/svg+xml. SVG를 캔버스 명령으로 변환 할 가능성이 있음을 알고 있지만 ( 이 질문 과 같이 ) 필요하지 않기를 바랍니다. …
131 html  canvas  svg 
2
한 캔버스의 내용을 다른 캔버스에 로컬로 복사하는 방법
한 캔버스의 모든 내용을 복사하여 클라이언트 측에서 다른 캔버스로 모두 전송하고 싶습니다. 나는 이것을 구현 하기 위해 canvas.toDataURL()and context.drawImage()메소드를 사용할 것이라고 생각 하지만 몇 가지 문제가 있습니다. 내 해결책은 Canvas.toDataURL()이것을 Javascript의 Image 객체에 가져 와서 저장 한 다음 context.drawImage()메서드를 사용하여 다시 배치하는 것입니다. 그러나 toDataURL메서드가 "data:image/png;base64,"앞에 붙은 64 비트 인코딩 …
129 html  canvas 
7
캔버스 요소에 간단한 onClick 이벤트 핸들러를 어떻게 추가합니까?
저는 숙련 된 Java 프로그래머이지만 약 10 년 만에 처음으로 JavaScript / HTML5를 살펴보고 있습니다. 나는 가장 간단한 것이 무엇인지에 완전히 빠져 있습니다. 예를 들어 무언가를 그리고 이벤트 핸들러를 추가하고 싶었습니다. 나는 바보 같은 짓을하고 있다고 확신하지만 모든 것을 검색했지만 제안 된 것은 없습니다 (예 :이 질문에 대한 답변 : …
5
<canvas> 크기 조정시 보간 비활성화
참고 :이 방법과 관련이있다 최대 크기를 조절할 때 기존의 캔버스 요소를 렌더링 , 하지 선이나 그래픽 렌더링 방법을 함께 할 캔버스 표면에 . 즉, 이것은 크기 가 조정 된 요소의 보간 과 관련이있으며 캔버스에 그려지는 그래픽의 앤티 앨리어싱 과는 아무 관련이 없습니다. 나는 브라우저가 어떻게 선을 그리는지 신경 쓰지 않는다. …
126 javascript  html  canvas 
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.