«html5-canvas» 태그된 질문

합성 작업을 실험하고 캔버스에 이미지를 그린 후 이미지를 제거하고 합성하려고합니다. 어떻게해야합니까? 다른 이미지를 다시 그리려면 캔버스를 지워야합니다. 이것은 한동안 계속 될 수 있으므로 매번 새로운 사각형을 그리는 것이 가장 효율적인 옵션이라고 생각하지 않습니다.

1012 javascript  html  canvas  html5-canvas  composite 

요소를 즉석에서 생성하고 이동할 수있는 가장 좋은 방법은 무엇입니까? 예를 들어 직사각형, 원 및 다각형을 만든 다음 해당 객체를 선택하고 이동한다고 가정 해 봅시다. HTML5는이를 가능하게하는 세 가지 요소 svg , canvas 및 div를 제공한다는 것을 알고 있습니다 . 내가하고 싶은 일에 대해 어떤 요소가 최고의 성능을 제공합니까? 이러한 접근 …

476 javascript  html  svg  html5-canvas 

<canvas>페이지에 맞게 HTML5 요소의 크기를 자동으로 조정하려면 어떻게 해야합니까? 예를 들어 and 및 속성을 100 % <div>로 설정하여 스케일을 조정할 수 있지만 스케일되지 않습니다.heightwidth<canvas>

400 javascript  html  html5-canvas 

사용자가 알고리즘에서 결과 이미지를 저장할 수 있도록하는 생성 아트 프로젝트를 진행 중입니다. 일반적인 아이디어는 다음과 같습니다. 생성 알고리즘을 사용하여 HTML5 Canvas에서 이미지 만들기 이미지가 완료되면 사용자가 캔버스를 이미지 파일로 서버에 저장하도록 허용 사용자가 이미지를 다운로드하거나 알고리즘을 사용하여 제작 된 갤러리에 이미지를 추가 할 수 있습니다. 그러나 나는 두 번째 단계에 …

260 javascript  php  ajax  html5-canvas 

하나의 중심 단어가있는 웹 페이지를 갖고 싶습니다. 이 단어를 애니메이션으로 그려서 페이지가 우리가하는 것과 같은 방식으로 단어를 "쓰기"합니다. 즉, 한 지점에서 시작하여 시간이 지남에 따라 선과 곡선을 그려서 최종 결과가 글리프가되도록합니다. 이것이 끝나면 상관 없어 <canvas> DOM인지 DOM인지 상관하지 않으며 JavaScript 또는 CSS 중 어느 것이 든 상관하지 않습니다. jQuery가 …

229 javascript  css  canvas  html5-canvas  css-shapes 

캔버스 그림을 PNG 이미지로 변환하기 위해 Nihilogic의 "Canvas2Image"JavaScript 도구를 사용하고 있습니다. 내가 지금 필요한 것은 PHP를 사용하여이 도구가 생성하는 base64 문자열을 서버의 실제 PNG 파일로 바꾸는 것입니다. 요컨대, 현재하고있는 일은 Canvas2Image를 사용하여 클라이언트 측에서 파일을 생성 한 다음 base64로 인코딩 된 데이터를 검색하여 AJAX를 사용하여 서버로 보내는 것입니다. // Generate …

212 php  javascript  base64  html5-canvas 

캔버스를 img에 저장하고 싶습니다. 나는이 기능을 가지고있다 : function save() { document.getElementById("canvasimg").style.border = "2px solid"; var dataURL = canvas.toDataURL(); document.getElementById("canvasimg").src = dataURL; document.getElementById("canvasimg").style.display = "inline"; } 그것은 나에게 오류를 준다 : Uncaught SecurityError : 'HTMLCanvasElement'에서 'toDataURL'을 (를) 실행하지 못했습니다. 오염 된 캔버스를 내보낼 수 없습니다. 어떻게해야합니까?

187 javascript  html5-canvas 

디지털 카메라 사진은 종종 EXIF ​​"방향"태그를 사용하여 JPEG로 저장됩니다. 올바르게 표시하려면 설정된 방향에 따라 이미지를 회전 / 미러링해야하지만 브라우저는 이미지를 렌더링하는이 정보를 무시합니다. 대규모 상용 웹 응용 프로그램에서도 EXIF ​​방향 지원은 드문 일 이 될 수 있습니다 1 . 동일한 소스는 JPEG가 가질 수있는 8 가지 방향에 대한 요약을 제공합니다 …

154 javascript  rotation  html5-canvas  exif 

브라우저에서 이미지 크기를 조정하기 위해 html5 canvas 요소를 사용합니다. 품질이 매우 낮습니다. 나는 이것을 발견했다 : <canvas>를 스케일링 할 때 보간을 비활성화 하지만 품질을 높이는 데 도움이되지 않습니다. 아래는 내 CSS 및 js 코드뿐만 아니라 Photoshop에서 호출되고 캔버스 API에서 크기가 조정 된 이미지입니다. 브라우저에서 이미지를 스케일링 할 때 최적의 품질을 …

149 javascript  css  html  canvas  html5-canvas 

그리기 응용 프로그램의 경우 마우스 움직임 좌표를 배열에 저장 한 다음 lineTo를 사용하여 그립니다. 결과 라인이 부드럽 지 않습니다. 수집 된 모든 점 사이에 단일 곡선을 생성하려면 어떻게해야합니까? 나는 봤지만 선 그리기를위한 3 개의 함수 만 찾았습니다 .2 개의 샘플 포인트에는 간단히을 사용하십시오 lineTo. 3 샘플 포인트를 들어 quadraticCurveTo, 4 …

133 javascript  canvas  html5-canvas  bezier  spline 

내 코드는 로컬 호스트에서 잘 작동하지만 사이트에서는 작동하지 않습니다. 이 줄에 대해 콘솔 에서이 오류가 발생했습니다 .getImageData(x,y,1,1).data. Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data. 내 코드의 일부 : jQuery.Event.prototype.rgb=function(){ var x = this.offsetX || (this.pageX - $(this.target).offset().left),y = this.offsetY || (this.pageY …

131 javascript  html  html5-canvas 

JPEG EXIF ​​이미지 데이터에서 카메라가 설정 한 원래 회전을 기준으로 사진을 회전하고 싶습니다. 트릭은이 모든 것이 브라우저에서 자바 스크립트와<canvas> . JavaScript는 로컬 파일 API 객체 인 JPEG에 어떻게 액세스 할 수 있습니까? <img> 또는 원격 <img>EXIF 데이터에 액세스하여 회전 정보를 읽을 수 있습니까? 서버 측 답변은 좋지 않습니다. 클라이언트 측 …

125 javascript  jpeg  exif  html5-canvas 

내 캔버스의 기본 배경색 인 것처럼 보이는 것을 검정색에서 투명 / 다른 색상으로 변경하려고 시도했지만 운이 없습니다. 내 HTML : <canvas id="canvasColor"> 내 CSS : <style type="text/css"> #canvasColor { z-index: 998; opacity:1; background: red; } </style> 다음 온라인 예제에서 볼 수 있듯이 캔버스에 애니메이션이 추가되어 있으므로 불투명도를 수행 할 수 …

122 css  html  canvas  html5-canvas  three.js 

2D 게임 / 앱 에 2D-Canvas 대신 WebGL을 사용하는 데 성능 외에 다른 이유가 있습니까? 즉, 2D-Canvas로는 쉽게 달성 할 수없는 WebGL이 제공하는 2D 기능은 무엇입니까?

112 html  html5-canvas  webgl 

두 개의 캔버스를 함께 쌓아 이중 레이어 캔버스로 만들려고합니다. 여기에 예제가 있습니다. <div style="position: relative;"> <canvas id="layer1" width="100" height="100" style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas> <canvas id="layer2" width="100" height="100" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas> </div> 하지만 화면 중앙에 두 캔버스 정렬을 설정하고 싶습니다. 값을 left상수로 …

104 css  html5-canvas