jcanvas 소개 : jQuery는 HTML5 캔버스를 만납니다

html5는 요소와 관련 JavaScript API를 사용하여 웹 페이지에 그래픽을 바로 그릴 수 있습니다. 이 게시물에서는 HTML5 Canvas API를위한 무료 및 오픈 소스 JQuery 기반 라이브러리 인 Jcanvas를 소개하겠습니다.

jQuery로 개발되면 jcanvas는 jQuery 구문을 사용하여 Cool Canvas 도면 및 대화식 응용 프로그램을보다 쉽고 빠르고 더 빠르도록합니다. 키 테이크 아웃

JCanvas는 jQuery를 HTML5 Canvas API와 통합하여 JQuery Syntax를 사용하여 그래픽 및 대화식 응용 프로그램의 생성을 단순화하는 무료 오픈 소스 라이브러리입니다. jcanvas를 활용하려면 JCanvas 스크립트와 jQuery가 프로젝트에 포함되어 있어야 jQuery의 구조에 전제되는 JCANVAS 메소드를 사용할 수 있어야합니다. JCanvas는 네이티브 캔버스 방법과의 호환성을 유지하면서 레이어, 이벤트, 드래그 앤 드롭 및 애니메이션과 같은 추가 기능을 갖춘 기본 캔버스 API를 향상시킵니다. 캔버스의 도면 모양, 텍스트 및 이미지는 다양한 사용자 정의 가능한 속성을 허용하는 DrawRect (), DrawArc () 및 DrawImage ()와 같은 메소드를 통해 JCANVA를 통해 간소화됩니다. JCanvas는 계층 조작 및 애니메이션과 같은 고급 기능을 지원하여 복잡한 그래픽 창작물과 웹 페이지에서 역동적이고 대화식 사용자 경험을 제공합니다.

jcanvas 란 무엇입니까?

JCanvas 웹 사이트는 다음과 같이 설명합니다

jcanvas는 jQuery와 jQuery를 사용하여 작성된 JavaScript 라이브러리로 HTML5 Canvas API를 감싸고 새로운 기능과 기능을 추가하여 많은 사용자 정의 할 수 있습니다. 기능에는 레이어, 이벤트, 드래그 앤 드롭, 애니메이션 등이 포함됩니다 결과는 html5 캔버스에 전원과 편의성을 부여하는 설탕의 jQuery-esque 구문으로 싸인 유연한 API입니다.

jcanvas를 사용하면 Native Canvas API 등으로 할 수있는 모든 것을 할 수 있습니다. 원하는 경우 jcanvas와 함께 기본 HTML5 Canvas API 메소드를 사용할 수도 있습니다. Draw () 메소드는이 목적 만 사용합니다. 또한 extend () 기능을 사용하여 자신의 방법과 속성으로 JCanvas를 쉽게 확장 할 수 있습니다. 프로젝트에 jcanvas를 추가합니다 프로젝트에 jcanvas를 포함 시키려면 공식 웹 사이트 나 GitHub 페이지에서 스크립트를 다운로드 한 다음 프로젝트 폴더에 포함시킵니다. 언급했듯이 jcanvas는 작동하려면 jQuery가 필요하므로 그것을 포함시켜야합니다. 프로젝트의 스크립트 파일은 다음과 같이 보입니다

마지막 것은 Jcanvas API를 사용하여 사용자 정의 자바 스크립트를 넣는 곳입니다. 이제 테스트 드라이브를 위해 jcanvas를 복용하겠습니다.

html 문서 설정 예제를 따라 가려면 기본 HTML5 문서에 요소 태그를 추가하여 시작하십시오.

위의 코드 스 니펫에 대한 몇 가지 관심 포인트가 있습니다.
• 기본적으로 드로잉 표면의 크기는 150px x 300px입니다. 요소 마크 업 내부의 너비 및 높이 속성 에서이 기본 크기를 수정할 수 있습니다. ID 속성 추가는 필요하지 않지만 JavaScript로 요소에 쉽게 액세스 할 수있는 방법이 될 것입니다. 요소 내부의 내용은 비트 맵 이미지 일뿐입니다. 따라서 보조 기술 사용자가 접근 할 수 없습니다. 또한 Canvas API를 지원하지 않는 브라우저는 컨텐츠에 액세스하거나 어떤 식 으로든 상호 작용할 수 없습니다. 따라서 를보다 쉽게 ​​액세스 할 수 있도록하는 기술은 아직 사용할 수 없지만이 범주의 사용자에 대한 일부 폴백 컨텐츠를 추가하는 것이 권장되는 연습입니다.
  • 기본 캔버스 API를 사용하려면 JavaScript가 다음과 같이 보입니다.
  위의 코드의 변수 컨텍스트는 캔버스 개체의 2D 컨텍스트 속성에 대한 참조를 저장합니다. HTML5 캔버스 API에 노출 된 다른 모든 속성 및 방법에 액세스 할 수있는 것은이 속성입니다. 주제에 대해 더 자세히 알고 싶다면 HTML5 Canvas Tutorial : Ivaylo Gerchev의 소개는 훌륭합니다. jcanvas 메소드 및 속성에는 이미 2D 컨텍스트에 대한 참조가 포함되어 있으므로 드로잉으로 바로 이동할 수 있습니다.
  • jcanvas 로 모양을 그리는 도면 대부분의 jcanvas 메소드는 원하는 순서로 나열 할 수있는 속성 값 쌍의 맵을 허용합니다. 사각형 모양을 그리는 것으로 시작합시다.
  사각형 모양 이것은 jcanvas 객체의 drawRect () 메소드를 사용하여 사각형 모양을 그리는 방법입니다.
  • 위의 스 니펫은 캔버스 물체를 $ mycanvas라는 변수로 캐시합니다. DrawRect () 메소드 내부의 속성은 대부분 자체 설명이지만 여기에 간단한 요약이 있습니다.
  FillStyle은 사각형의 배경색을 설정합니다 Strokestyle은 테두리 색상을 설정합니다 strokewidth는 모양의 경계 너비를 설정합니다 x 및 y 캔버스 내부의 사각형의 수평 및 수직 위치에 해당하는 좌표를 설정합니다.
  0

  의 의 0 <script src="js/jquery.min.js><span><span><span></script</span>></span> </span><script src="js/jcanvas.min.js><span><span><span></script</span>></span> </span><script src="js/script.js><span><span><span></script</span>></span></span>의 값은 , 즉 (0, 0)의 값은 상단 상단에 해당합니다. 캔버스. x 좌표는 오른쪽으로 증가하고 Y 좌표는 캔버스의 바닥을 향해 증가합니다. 사각형을 그리면 기본적으로 jcanvas는 X와 Y 좌표를하여 모양의 중심에 놓여 있습니다. x와 y가 사각형의 왼쪽 상단 코너에 해당하도록 이것을 변경하려면 Center 속성을 False로 설정합니다. 마지막으로, 너비와 높이 특성은 사각형의 치수를 설정합니다.

  여기에 사각형 모양의 데모가 있습니다 : 펜 jcanvas 예제 : Codepen의 sitepoint (@sitepoint)의 사각형. 아크와 원 아크는 원의 림의 일부입니다. JCANVAS를 사용하면 Arcs를 그리는 것은 DrawArc () 메소드 내부의 몇 가지 속성에 대해 원하는 값을 설정하는 것입니다.

  드로잉 아크는 반경 속성의 값과 시작 및 엔드 각도를 정도로 설정하는 것이 포함됩니다. 아크의 방향을 시계 반대 방향으로 원한다면 위의 코드에 CCW 속성을 추가하여 true로 설정하십시오. 위의 코드의 코드 데모는 다음과 같습니다 펜 jcanvas 예제 : Codepen에서 sitepoint (@sitepoint)에 의한 Arc. 원을 그리는 것은 DrawArc () 메소드에서 시작 및 종료 속성을 모두 생략하는 것만 큼 쉽습니다. 예를 들어, 아크 모양 만 사용하여 웃는 얼굴의 간단한 그래픽을 그리는 방법은 다음과 같습니다.

  jcanvas는 jQuery 라이브러리를 기반으로하므로 jQuery 메소드를 체인 할 수있는 것과 같은 방식으로 jcanvas 메소드를 체인 할 수 있습니다. 위의 코드가 브라우저에서 렌더링하는 방법은 다음과 같습니다 펜 jcanvas 예제 : Codepen의 SitePoint (@SitePoint)에 의해 웃는 얼굴. 드로잉 선과 경로 당신은 drawline () 메소드를 사용하여 jcanvas로 신속하게 선을 그릴 수 있고 라인이 연결될 일련의 지점을 플로팅 할 수 있습니다.

  위의 코드는 둥근 및 닫힌 속성을 True로 설정하여 선의 모서리를 반올림하고 추적 경로를 닫습니다. 펜 jcanvas 예제 : Codepen에서 sitepoint (@sitepoint)에 의한 연결된 선. DrawPath () 메소드를 사용하여 유연한 경로를 그릴 수도 있습니다. 경로를 하나 이상의 연결된 라인, 아크, 곡선 또는 벡터로 생각하십시오. drawpath () 메소드는 각 점 내부의 하위 경로에 대한 x 및 y 좌표의 맵과 맵을 수락합니다. 또한 그릴 경로 유형 (예 : 선, 아크 등)을 지정해야합니다. 여기에는 drawpath ()를 사용하여 수평 및 수직으로 화살표를 잡고 화살표를 그리는 방법이 있습니다. 후자는 캔버스에 화살표 모양을 빠르게 그릴 수있는 편리한 jcanvas 메소드입니다. 🎜>

  각 하위 경로의 x 및 y 좌표는 전체 경로의 x 및 y 좌표와 관련이 있습니다. 그리고 결과는 다음과 같습니다. 펜 jcanvas 예제 : Codepen에서 sitepoint (@sitepoint)에 의한 연결된 화살표.

  텍스트 그리기 aptly라는 drawText () 메소드로 캔버스에 텍스트를 빠르게 그릴 수 있습니다. 이 작업에 필요한 주요 속성은 다음과 같습니다.

  텍스트. 이 속성을 캔버스에 표시하려는 텍스트 내용으로 설정하십시오. 'Hello World' fontsize. 이 속성의 값은 캔버스에서 텍스트의 크기를 결정합니다. jcanvas가 픽셀의 값으로 해석하는 숫자 로이 속성의 값을 설정할 수 있습니다. Fontsize : 30. 또는 포인트를 사용할 수 있지만 그러한 경우에는 측정 값을 지정해야합니다. ' fontfamily는 텍스트 이미지의 서체를 지정할 수 있습니다 : 'Verdana, sans-serif'.

  샘플 코드는 다음과 같습니다
  그리고 이것은 웹 페이지의 요소 내부에서 보이는 것입니다 : 펜 jcanvas 예제 : Codepen에서 sitepoint (@SitePoint) 별 텍스트 그리기.
  • 도면 이미지 drawImage () 메소드를 사용하여 이미지를 가져오고 조작 할 수 있습니다. 예는 다음과 같습니다.
  그리고 이것은 위의 코드가 렌더링하는 방식입니다 : 펜 jcanvas 예제 : Codepen에서 sitepoint (@sitepoint)에 의해 이미지 가져 오기 및 조작. 위의 모든 예를 단일 코디펜 데모로 결합하여보고 바이올린을보고 바이올린을 볼 수 있습니다. 캔버스 레이어 Photoshop 또는 Gimp와 같은 이미지 편집기 응용 프로그램을 사용한 적이 있다면 이미 레이어에 익숙합니다. 레이어로 작업하는 것의 멋진 부분은 캔버스의 각 이미지를 자체 레이어에 그려서 개별적으로 조작 할 수 있다는 것입니다. JCanvas는 캔버스 기반 디자인에 유연성을 추가하는 강력한 레이어 API를 제공합니다. 다음은 jcanvas 레이어를 사용하는 방법에 대한 개요입니다 레이어 추가 각 레이어에 하나의 객체 만 그릴 수 있습니다. JCANVAS 프로젝트에 레이어를 두 가지 방법 중 하나로 추가 할 수 있습니다.
  • addlayer () 메소드를 사용한 다음 DrawLayers () 메소드 를 사용하십시오 드로잉 메소드 내부에서 레이어 속성을 true로 설정하십시오.
  파란색 사각형을 그리는 첫 번째 기술을 적용하는 방법은 다음과 같습니다.

  Codepen에서 SitePoint (@SitePoint)의 PZENGP를 참조하십시오 그리고 동일한 사각형을 그려 두 번째 방법을 적용하는 방법은 다음과 같습니다.

  Codepen에서 sitepoint (@SitePoint)의 펜 ZrjqKB를 참조하십시오 당신이 볼 수 있듯이, 위의 각각과 마찬가지로 우리는 동일한 결과를 얻습니다.

  . 위의 두 코드 샘플에서 주목해야 할 중요한 점은 레이어에 이름 속성을 통해 설정 한 이름이 있다는 것입니다. 이를 통해 코드 에서이 레이어를 쉽게 참조하고 인덱스 값을 변경하고 애니메이션을 사용하고 제거하는 등 모든 종류의 멋진 작업을 수행 할 수 있습니다. 우리가 어떻게 할 수 있는지 봅시다.

  애니메이션 레이어 animatelayer () 메소드를 사용하여 jcanvas를 사용하여 레이어 기반 도면에 애니메이션을 빠르게 추가 할 수 있습니다. 이 메소드는 다음 매개 변수를 수용합니다

  레이어의 또는 이름 키 값 쌍의 속성 쌍이있는 객체 애니메이션의 지속 시간

  밀리 초. 이것은 선택적 매개 변수입니다. 설정하지 않으면 기본값은

  400

  입니다.

  애니메이션의 완화
  . 이것은 또한 선택적 매개 변수이기도합니다. 설정하지 않으면 기본값 애니메이션이 완료 될 때 실행되는 선택적 콜백 함수. ANIMATELAYER () 메소드가 작동하는 것을 보자. 우리는 층에 반투명 오렌지 원을 그린 다음 위치, 색상 및 불투명 속성을 애니메이션합니다. 애니메이션을 보려면 아래 데모를 확인하십시오 펜 jcanvas 예제 : Codepen에서 sitepoint (@sitepoint)에 의한 애니메이션 레이어. 이 코피 펜 데모에 결합 된 이전 세 가지 예를 모두 볼 수 있습니다. Draggable 레이어

주의를 기울이고 싶은 멋진 기능 중 하나는 층의 드래그 가능한 속성을 true로 설정하여 정기적 인 jcanvas 레이어를 드래그 가능한 레이어로 바꾸는 기능입니다. <:> 다음은 다음과 같습니다
• 위의 스 니펫은 다음을 포함하여 두 개의 드래그 가능한 사각형 레이어를 그립니다. draggable : true. 또한 Bringtofront 속성의 사용에 유의하여 레이어를 드래그하면 자동으로 다른 모든 기존 레이어의 전면으로 밀려 나옵니다. 마지막으로, 코드는 레이어를 회전시키고 박스 그림자를 설정하여 JCANVAS 도면에 이러한 효과를 빠르게 추가 할 수있는 방법을 보여주기 만하면됩니다. 결과는 다음과 같습니다
• 드래그 가능한 레이어를 이동하기 전, 도중 또는 후에 앱을 수행하려면 JCANVAS가 관련 이벤트에서 콜백 함수를 지원하여이를 쉽게 달성 할 수 있습니다. 레이어를 드래그하기 시작하면 트리거 트리거를 트리거합니다 레이어를 드래그 할 때 불이 드래그합니다 레이어 드래그를 멈출 때 드래그 스톱 트리거 Dragcancel은 캔버스의 드로잉 표면의 테두리를 끄는 층을 끌 때 발생합니다. 사용자가 레이어 드래그를 마친 후 페이지에 메시지를 표시하고 싶다고 가정 해 봅시다. DragStop 이벤트에 콜백 함수를 추가하여 위의 코드 스 니펫을 재사용 할 수 있습니다.

  <script src="js/jquery.min.js><span><span><span></script</span>></span>
  </span><script src="js/jcanvas.min.js><span><span><span></script</span>></span>
  </span><script src="js/script.js><span><span><span></script</span>></span></span>

  각 정사각형을 드래그 한 후 페이지에 방금 떨어 뜨린 컬러 스퀘어를 알려주는 메시지가 표시됩니다. 아래 데모에서 시도해보십시오 : Codepen에서 sitepoint (@SitePoint)에 의해 콜백 함수가있는 펜 드래그 가능한 JCANVAS 레이어를 참조하십시오.

  결론 이 게시물에서 HTML5 Canvas API와 함께 작동하는 새로운 jQuery 기반 라이브러리 인 JCANVAS를 소개했습니다. 캔버스 표면을 빠르게 그리거나 시각 효과, 애니메이션 및 드래그 가능한 레이어를 추가 할 수있는 JCANVAS 방법 및 속성 중 일부를 설명했습니다. jcanvas로 할 수있는 것이 훨씬 더 많습니다. JCANVAS 웹 사이트의 샌드 박스에서 신속하게 테스트 할 수있는 자세한 지침 및 예제는 JCANVAS 문서를 방문 할 수 있습니다. 이 기사와 함께 jcanvas drawline () 메소드를 사용하여 Codepen에 기본 그림 응용 프로그램을 작성했습니다. Codepen에서 sitepoint (@sitepoint)의 펜 jcanvas 페인팅 앱 참조. 더 많은 기능을 추가하고 Sitepoint 커뮤니티와 결과를 공유하여 더 나은 느낌을 받으십시오. jcanvas에 대한 자주 묻는 질문 (FAQ) : jQuery는 html5 캔버스를 만난다 jcanvas 란 무엇이며 jQuery 및 HTML5 캔버스와 어떻게 관련이 있습니까?

  jcanvas . jQuery의 단순성과 다양성, 빠르고 작고 기능이 풍부한 JavaScript 라이브러리 및 HTML5 캔버스의 그래픽 전력을 활용합니다. HTML5 캔버스는 웹 페이지에 그래픽을 그리는 데 사용되는 HTML 요소입니다. JCANVAS는 모양을 그리기, 애니메이션 만들기, 이벤트 처리 등을위한 간단하고 일관된 API를 제공합니다.

  jcanvas로 시작하려면 어떻게해야합니까?
  Jcanvas를 시작하려면 먼저 필요합니다. HTML 파일에 jQuery 라이브러리 및 JCANVAS 라이브러리를 포함합니다. 해당 웹 사이트에서 이러한 라이브러리를 다운로드하거나 CDN (Content Delivery Network)을 사용할 수 있습니다. 이 라이브러리를 포함 시키면 jcanvas 함수를 사용하여 캔버스를 그리기 시작할 수 있습니다.

  jcanvas를 사용하여 모양을 그릴 수 있습니까?

  jcanvas는 캔버스에 모양을 그릴 수있는 여러 기능을 제공합니다. 예를 들어, drawRect () 함수를 사용하여 사각형, DrawArc () 함수를 그리기하여 Arc를 그리며 DrawPolygon () 함수를 그릴 수 있습니다. 이러한 각 함수는 위치, 크기, 색상 등과 같은 모양의 특성을 지정하는 속성 객체를 수용합니다. jcanvas로 모양을 애니메이션 할 수 있습니까?
  예, jcanvas는 캔버스의 모양을 애니메이션 할 수있는 강력한 애니메이션 기능을 제공합니다. Animate () 함수를 사용하여 지정된 기간 동안 모양의 특성을 애니메이션 할 수 있습니다. 이 기능은 jQuery 애니메이션 엔진을 사용하므로 jQuery가 제공하는 모든 완화 기능을 지원합니다.

  jcanvas로 이벤트를 처리하는 방법?

  JCanvas는 캔버스의 이벤트를 처리하기위한 여러 기능을 제공합니다. 예를 들어, Click () 함수를 사용하여 클릭 이벤트, 마우스 오버 이벤트를 처리하기위한 마우스 오버 () 함수 및 MousedOwn () 함수를 처리하여 Mousedown 이벤트를 처리 할 수 ​​있습니다. 이러한 각 함수는 이벤트가 발생할 때 호출되는 콜백 함수를 허용합니다.

  jcanvas를 사용하여 복잡한 그래픽을 생성 할 수 있습니까?

  예, JCanvas는 복잡한 그래픽을 만드는 프로세스를 단순화하도록 설계되었습니다. 웹 페이지에서. 모양을 그리기 위해 광범위한 기능을 제공하고, 애니메이션을 만들고, 이벤트를 처리하는 등을 제공합니다. jcanvas를 사용하면 간단한 모양에서 복잡한 애니메이션 및 대화식 그래픽에 이르기까지 모든 것을 만들 수 있습니다.

  JCanvas는 모든 브라우저와 호환됩니까?

  JCanvas는 HTML5 캔버스 요소를 지원하는 모든 최신 브라우저와 호환됩니다. 여기에는 Google Chrome, Mozilla Firefox, Apple Safari 및 Microsoft Edge의 최신 버전이 포함됩니다. 그러나이 브라우저는 HTML5 Canvas 요소를 지원하지 않기 때문에 Internet Explorer 8 이상을 지원하지 않습니다.

  jcanvas와 관련된 문제를 해결할 수있는 방법은 무엇입니까?
  JCanvas, JCanvas, 문제에 직면하면 어떻게해야합니까? JCANVAS는 문제를 해결하는 데 도움이되는 자세한 오류 메시지를 제공하므로 오류 메시지를 확인할 수 있습니다. 도서관과 그 기능에 대한 포괄적 인 정보를 제공하는 JCANVAS 문서를 참조 할 수도 있습니다.

  상업 프로젝트에서 jcanvas를 사용할 수 있습니까?

  예, Jcanvas는 MIT 라이센스에 따라 릴리스됩니다. 즉, 개인 및 상업 프로젝트에서 무료로 사용할 수 있습니다. 그러나 소프트웨어 또는 해당 문서의 사본에 원래 저작권 통지 및 면책 조항을 포함시켜야합니다.

  jcanvas에 대한 더 많은 리소스를 찾을 수있는 곳은 어디입니까?

  JCanvas에 대한 더 많은 리소스를 찾을 수 있습니다. 포괄적 인 문서, 예제 및 튜토리얼을 제공하는 공식 웹 사이트. 또한 웹 개발 웹 사이트 및 포럼 (예 : Stack Overflow 및 Sitepoint)에서 유용한 정보를 찾을 수 있습니다.

위 내용은 jcanvas 소개 : jQuery는 HTML5 캔버스를 만납니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!