HTML5를 가지고 놀면서 배우기 (1) Canvas 구현 방법 _html5 튜토리얼 기술

1. 태그

Html5에서는 이 태그로 표시되는 영역이 결국 캔버스와 같습니다. 이 캔버스에. 이 태그를 사용하면 브라우저의 그래픽 성능이 크게 향상되었습니다. Flash와 SilverLight가 위협을 느끼나요?

뉴스 링크: Google은 Chrome 7 브라우저가 60배 더 빨라질 것이라고 주장합니다

태그의 사용법은 다음과 같이 매우 간단합니다.

코드를 복사하세요

코드는 다음과 같습니다. :

브라우저가 Canvas를 지원하지 않습니다. tag
canvas>

태그는 일반적인 HTML 태그와 크게 다르지 않으며 배경색, 테두리도 설정할 수 있습니다. CSS를 통해 스타일 등을 기다립니다.

태그에 대한 자세한 내용은 여기에서 확인할 수 있습니다.

태그 중간에 있는 콘텐츠는 대체 콘텐츠입니다. 사용자의 브라우저가 태그를 지원하면 이 콘텐츠가 표시됩니다. 을 선택하면 해당 섹션의 내용이 무시됩니다.

위의 코드는 다음과 같이 표시됩니다.

귀하의 브라우저는 Canvas 태그를 지원하지 않습니다.

IE 브라우저를 사용하는 경우 보기 팁을 얻으세요. Google Chrome이나 Firefox를 사용하는 경우 빨간색 사각형 영역을 볼 수 있습니다.
2. 렌더링 컨텍스트
사실 태그만으로는 아무것도 할 수 없습니다. 먼저 장치 컨텍스트 DC를 가져와야 하며, 태그에 그리는 경우 먼저 렌더링 컨텍스트를 가져와야 하지만, 먼저 컨텍스트(컨텍스트)에 그려진 다음 화면에 새로 고쳐집니다. .
주제 외: 왜 '컨텍스트'라는 복잡한 개념을 만들어야 합니까? 컨텍스트 객체 덕분에 우리 눈에는 다양한 그래픽 장치가 동일하게 보이도록 할 수 있는데, 우리는 그리는 데만 집중하면 되고, 다른 작업은 운영체제와 브라우저가 알아서 하도록 놔두는 것이 다양한 일을 하게 하는 것입니다. 구체적인 것들을 통일된 추상화로 바꾸어 우리의 부담을 줄여줍니다.
컨텍스트를 얻는 것은 매우 간단합니다. 다음 두 줄의 코드만 있으면 됩니다.
var canvas = document.getElementById('tutorial')
var ctx = canvas.getContext('2d')
먼저 캔버스 개체를 가져온 다음 캔버스 개체의 getContext 메서드를 호출합니다. 이 메서드는 현재 매개변수 "2d"만 전달할 수 있으며 가까운 시일 내에 "3d" 매개변수를 지원할 수도 있습니다. 즉, 기대하자는 뜻이다.
getContext 메소드는 렌더링 컨텍스트 객체인 CanvasRenderingContext2D 객체를 반환합니다. 이에 대한 자세한 내용은 여기에서 확인할 수 있습니다.

3. 브라우저 지원
지원되지 않는 브라우저에 대체 콘텐츠를 표시하는 것 외에도 스크립트를 사용하여 브라우저가 캔버스를 지원하는지 확인할 수도 있습니다. 방법은 매우 간단합니다. getContext 함수가 존재하는지 여부에 따라 코드는 다음과 같습니다.

코드를 복사하세요

코드는 다음과 같습니다.

var canvas = document.getElementById('tutorial');
if (canvas.getContext){
alert(" 태그 지원") else {
alert(" 태그는 지원되지 않습니다.")
}



四、一个小例子
下面将用 HTML5 的绘图功能演示一个上下移动的线条的例子， 具体的代码将在后续内容中给出

<canvas style="background-color: black" id="move_line" height="200" width="400">你的浏览器不支持 <canvas>标签，请使用 Chrome 浏览器 或者 FireFox 浏览器</canvas> <script type="text/javascript"> var canvas = document.getElementById('move_line'); var ctx=canvas.getContext("2d"); //上下移动的直线 var width=400; var height=200; var y=0 var dir=1; ctx.strokeStyle = "rgb(255,0,0)"; function draw(){ ctx.clearRect(0,0,width,height) ctx.beginPath(); ctx.moveTo(0,y); ctx.lineTo(width-1,y); ctx.stroke(); y=y+dir; if((y==0)||(y==(height-1))) dir=dir*(-1); } </script><p><input onclick="interval=setInterval(draw,10);" value="开始" type="button"> <input onclick="clearInterval(interval);" value="停止" type="button"> </p>
提示：您可以先修改部分代码再运行

你的浏览器不支持 标签，请使用 Chrome 浏览器 或者 FireFox 浏览器