놀면서 HTML5 배우기 (1) - 캔버스에 대한 자세한 설명

width="750">

一、canvas>标签 Html5 引入了一个新的 标签，这个标签所代表的区域就好象一块画布，你的所有图形绘制最后都要在这块画布上呈现。有了这个标签，浏览器的图形表现力被极大的提升，Flash 和 SilverLight 有没有感到威胁呢? 新闻链接：Google声称Chrome7浏览器将提速60倍 <canvas>标签的用法非常简单，如下： <canvas id="tutorial" width="150" height="150" style="background-color:red;"> 你的浏览器不支持 Canvas 标签</canvas>   标签和普通的 HTML 标签没有多大的区别，你可以设置它的宽度和高度，可以通过 CSS 设置它的背景色、边框样式等等。你可以在 这里 找到关于 标签的更多内容。 标签中间的内容是替换内容，如果用户的浏览器不支持 标签，这段内容就会被显示出来；如果用户的浏览器支持 标签，则这段内容将被忽略。

1.캔버스

> 태그

Html5

에는 새로운 태그가 도입되었습니다. 캔버스를 사용하면 결국 모든 그래픽 그림이 이 캔버스에 표시됩니다. 이번 태그를 통해 브라우저의 그래픽 표현이 대폭 향상되었습니다. Flash와 SilverLight의 위협을 느끼시나요?뉴스 링크: Google은 Chrome 7 브라우저가 60배 더 빠를 것이라고 주장합니다

var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');

HTML 태그 사이에는 큰 차이가 없습니다. CSS를 통해 너비와 높이, 배경색, 테두리 스타일 등을 설정할 수 있습니다. 태그에 대한 자세한 내용은

여기

에서 확인할 수 있습니다. 사용자의 브라우저가 태그, 이 콘텐츠는 사용자의 브라우저가 태그를 지원하는 경우 표시됩니다.

위의 코드 표시 효과는 다음과 같습니다.

IE 브라우저를 사용하는 경우 참고하세요. Google Chrome이나

Firefox

를 사용하는 경우 빨간색 사각형 영역이 표시됩니다.

2. 렌더링 컨텍스트

사실 태그만으로는 아무것도 할 수 없습니다. 🎜> 학생들은 Windows에서

그리기

먼저 장치 컨텍스트 DC를 얻어야 한다는 것을 알고 있습니다. 태그에 그림을 그리려면 먼저 그래픽이 화면에 직접 그려지지 않습니다. , 먼저 컨텍스트에 그려진 다음 화면에 새로 고쳐집니다. 주제 외: 왜 "컨텍스트"라는 복잡한 개념을 만들어야 합니까? 컨텍스트 객체

덕분에 우리 눈에는 다양한 그래픽 장치가 동일하게 보이도록 만들 수 있으며, 나머지 작업은 운영 체제와 브라우저에 맡기면 됩니다. 직설적으로 말하면, 다양한 구체적인 것들을 통일된 추상화로 바꾸어 우리의 부담을 줄이는 것을 의미합니다.

다음 두 줄의 코드만 있으면 매우 간단합니다.

var canvas = document.getElementById('tutorial'); 
if (canvas.getContext){ 
    alert("支持 <canvas> 标签"); 
} else { 
    alert("不支持 <canvas> 标签");

먼저 캔버스 개체를 가져온 다음 캔버스 개체의 getContext 메서드를 호출합니다. 이 메서드는 현재 매개변수만 전달할 수 있습니다. "2d", 가까운 시일 내에 "3d" 매개변수를 지원할 수도 있습니다. 이것이 의미하는 바를 이해해야 합니다. 기대해 보겠습니다. getContext 메소드는 렌더링 컨텍스트 객체인 CanvasRenderingContext2D 객체를 반환합니다. 이에 대한 자세한 내용은 여기에서 확인할 수 있습니다. 3. 브라우저 지원 지원되지 않는 브라우저에 대체 콘텐츠를 표시하는 것 외에도 스크립트를 사용하여 브라우저가 캔버스를 지원하는지 확인할 수도 있습니다. , 방법은 매우 간단합니다. getContext 함수 가 존재하는지 확인하면 됩니다. rrreee

위 내용은 놀면서 HTML5 배우기 (1) - 캔버스에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!