«canvas» 태그된 질문

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

9
Chart.js 선 차트의 레이블 수 제한
내가 얻은 데이터에서 차트의 모든 포인트를 표시하고 싶지만 모든 레이블을 표시하고 싶지는 않습니다. 왜냐하면 차트를 잘 읽을 수 없기 때문입니다. 나는 문서에서 그것을 찾고 있었지만 이것을 제한하는 매개 변수를 찾을 수 없었습니다. 예를 들어 3 개의 레이블 만 사용하고 싶지는 않습니다. 차트도 3 점으로 제한되기 때문입니다. 가능할까요? 나는 지금 그와 …
10
SVG와 HTML5 Canvas의 차이점은 무엇입니까?
SVG와 HTML5 Canvas의 차이점은 무엇입니까? 둘 다 나에게 똑같은 일을하는 것 같다. 기본적으로 둘 다 좌표 점을 사용하여 벡터 아트 워크를 그립니다. 내가 무엇을 놓치고 있습니까? SVG와 HTML5 Canvas의 주요 차이점은 무엇입니까? 왜 하나를 선택해야합니까?
92 html  canvas  svg 
5
전체 캔버스를 특정 색상으로 채우는 방법
전체 HTML5 <canvas>를 하나의 색상 으로 채우는 방법 . 나는 다음과 같은 몇 가지 솔루션을 보았다 이 , 변경이 차지하는 공간의 색상있는 유일한 일을 CSS를 사용하여 배경 색상을 변경할 수 있지만, 캔버스 투명 남아 있기 때문에 이것은 좋은 솔루션이 아닙니다. 다른 하나는 캔버스 내부에 색상으로 무언가를 만드는 것입니다. 예를 들어 …
10
canvas.toDataURL ()에서 보안 예외가 발생하는 이유는 무엇입니까?
충분한 수면을 취하지 않았습니까? 이 다음 코드 var frame=document.getElementById("viewer"); frame.width=100; frame.height=100; var ctx=frame.getContext("2d"); var img=new Image(); img.src="http://www.ansearch.com/images/interface/item/small/image.png" img.onload=function() { // draw image ctx.drawImage(img, 0, 0) // Here's where the error happens: window.open(frame.toDataURL("image/png")); } 이 오류가 발생합니다. SECURITY_ERR: DOM Exception 18 이것이 작동하지 않을 방법이 없습니다! 누구든지 이것을 설명 할 수 …
8
자바 스크립트 캔버스로 이미지 크기 조정 (부드럽게)
캔버스로 일부 이미지의 크기를 조정하려고하지만 부드럽게하는 방법에 대해 잘 모르겠습니다. 포토샵, 브라우저 등에서 그들이 사용하는 몇 가지 알고리즘 (예 : bicubic, bilinear)이 있지만 이것이 캔버스에 내장되어 있는지 여부는 모르겠습니다. 여기 내 바이올린이 있습니다. http://jsfiddle.net/EWupT/ var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); canvas.width=300 canvas.height=234 ctx.drawImage(img, 0, 0, 300, 234); document.body.appendChild(canvas); …
2
Base64 PNG 데이터를 HTML5 캔버스로
Base64로 인코딩 된 PNG 이미지를 캔버스 요소에로드하고 싶습니다. 이 코드가 있습니다. <html> <head> </head> <body> <canvas id="c"></canvas> <script type="text/javascript"> var canvas = document.getElementById("c"); var ctx = canvas.getContext("2d"); data = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oMCRUiMrIBQVkAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAADElEQVQI12NgoC4AAABQAAEiE+h1AAAAAElFTkSuQmCC"; ctx.drawImage(data, 0, 0); </script> </body> </html> Chrome 8에서 오류가 발생합니다. Uncaught TypeError: Type error 그리고 파이어 폭스의 Firebug에서 "객체의 유형이 …
89 html  canvas  png  base64 
3
사용자 브라우저에서 화살표 키 스크롤 비활성화
캔버스와 자바 스크립트를 사용하여 게임을 만들고 있습니다. 페이지가 화면 (코멘트 등)보다 길 때 아래쪽 화살표를 누르면 페이지가 아래로 스크롤되어 게임을 플레이 할 수 없게됩니다. 플레이어가 아래로 이동하려고 할 때 창이 스크롤되지 않도록하려면 어떻게해야합니까? Java 게임에서는 사용자가 게임을 클릭하는 한 문제가되지 않습니다. 나는 해결책을 시도했다 : 화살표 키로 FF에서 페이지 스크롤을 …
13
Chart.js 캔버스 크기 조정
( Android WebView HTML5 캔버스 오류 )에서 Graph.js 라이브러리를 사용하여 그래프를 그리는 것과 관련된 질문을 게시했습니다. 내가 가진 문제는 그래프를 여러 번 그리는 함수를 호출하면 매번 캔버스 크기가 조정된다는 것입니다. 그래프가 동일한 캔버스에 다시 그려 질 때마다 크기도 변경됩니다. 캔버스 크기 설정도 시도했지만 성공하지 못했습니다. 이유가 무엇일까요? 캔버스 크기가 매번 …
86 html  canvas  chart.js 
9
mousemove에서 캔버스에서 픽셀 색상 가져 오기
마우스 아래에서 RGB 값 픽셀을 얻을 수 있습니까? 이것에 대한 완전한 예가 있습니까? 지금까지 내가 가진 내용은 다음과 같습니다. function draw() { var ctx = document.getElementById('canvas').getContext('2d'); var img = new Image(); img.src = 'Your URL'; img.onload = function(){ ctx.drawImage(img,0,0); }; canvas.onmousemove = function(e) { var mouseX, mouseY; if(e.offsetX) { mouseX …
6
HTML5 Canvas DrawImage : 앤티 앨리어싱 적용 방법
다음 예를 살펴보십시오. http://jsfiddle.net/MLGr4/47/ var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); img = new Image(); img.onload = function(){ canvas.width = 400; canvas.height = 150; ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, 400, 150); } img.src = "http://openwalls.com/image/1734/colored_lines_on_blue_background_1920x1200.jpg"; 보시다시피 drawImage가 자동으로 앤티 앨리어싱을 적용한다고하지만 이미지는 앤티 앨리어싱되지 않습니다. 여러 가지 …
16
HTML5 캔버스에서 타원을 그리는 방법?
타원형 모양을 그리는 기본 기능이없는 것 같습니다. 또한 나는 달걀 모양을 찾고 있지 않습니다. 2 개의 베 지어 곡선으로 타원을 그릴 수 있습니까? 누군가 그것에 능숙 했습니까? 내 목적은 눈을 그리고 실제로 호를 사용하는 것입니다. 미리 감사드립니다. 해결책 따라서 scale ()은 다음 모든 모양의 크기를 변경합니다. Save ()는 이전 설정을 …
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.