1. Canvas란

canvas는 그리기 효과를 표시하기 위해 HTML5에서 제공하는 태그입니다.

canvas는 특정 JavaScript API를 사용하여 그래픽(canvas 2D 또는 WebGL)을 그릴 수 있는 빈 그래픽 영역을 제공합니다
먼저 소개합니다. 대시보드는 Apple, OS는 Safari 브라우저 모든 픽셀을 제어하세요.

캔버스 태그는 JavaScript를 사용하여 웹페이지에 이미지를 그리는 것으로, 그리기 기능 자체는 없습니다.

캔버스에는 경로, 직사각형, 원, 문자를 그리고 이미지를 추가하는 다양한 방법이 있습니다.

1.2 캔버스의 주요 응용 분야(이해)

1) 게임: 캔버스는 웹 기반 이미지 표시 측면에서 플래시보다 입체적이고 정교하며, 캔버스 게임은 유창성과 교차성 측면에서 더 좋습니다. 플랫폼.

2) 시각화된 데이터(데이터 차트): Baidu의 echart, d3.js, three.js

3) 배너 광고: 플래시의 영광스러운 시대에는 스마트폰이 아직 등장하지 않았습니다. 현재와 미래의 스마트폰 시대에는 HTML5 기술이 배너 광고에서 큰 역할을 할 수 있으며, Canvas를 사용하여 역동적인 광고 효과를 얻는 것이 완벽합니다.

4) 미래

시뮬레이터: 시각 효과든 핵심 기능이든 시뮬레이터 제품은 JavaScript로 완벽하게 구현될 수 있습니다.

원격 컴퓨터 제어: 캔버스를 사용하면 개발자는 웹 기반 데이터 전송을 더 효과적으로 구현하고 완벽한 시각적 제어 인터페이스를 구축할 수 있습니다.

그래픽 편집기: Photoshop 그래픽 편집기는 100% 웹 기반입니다.

2. 캔버스 태그 소개

<canvas width="600" height="400"></canvas>

로그인 후 복사

기능: 그리기 내용을 표시하지만 그릴 수 없음

2.1 캔버스 호환성

<canvas width="600" height="400">
    IE9及其以上版本的浏览器，才支持canvas标签
    提示：您的浏览器不支持canvas，请升级浏览器
</canvas>

로그인 후 복사

2.2 너비 및 높이 설정 시 주의 사항

1) html 속성/DOM을 사용할 수 있습니다. 속성 너비 및 높이 설정

2) 하지 말 것: CSS 스타일을 사용하여 너비 및 높이 설정

속성을 사용하여 너비 및 높이 설정. 이는 실제로 캔버스의 픽셀을 늘리는 것과 동일합니다.

기본 너비 및 높이: 300*150, 즉 가로 방향은 300픽셀과 세로 방향은 150픽셀입니다

속성을 사용하여 너비와 높이를 설정하면 캔버스의 픽셀이 늘어나거나 줄어듭니다.

CSS 스타일을 사용하면 픽셀이 늘어나지 않지만, 각 픽셀만 확장됩니다.

2.3 그리기

JavaScript에서 제공하는 그리기 API를 사용하여 그림을 그립니다.

각 캔버스에는 일련의 그리기 API(도구)가 있습니다.

2.3.1 그리기의 기본 단계

1) 캔버스를 찾습니다. 2 ) 캔버스를 통해 그리기 컨텍스트(일련의 API 컬렉션)를 가져옵니다

3) API를 사용하여 필요한 그래픽을 그립니다

// 1）、找到canvas
 var cv = document.getElementById("canvasId");
 
// 2）、拿到canvas绘图上下文
 var ctx = cv.getContext("2d");
 
// 3）、使用上下文中的API绘制图形
 ctx.moveTo(100, 100);   // 将画笔移动到 100,100 的位置
 ctx.lineTo(200, 100);   // 从 100,100 到 200,100 画一条线段
 ctx.stroke();           // 描边

로그인 후 복사