Html5 새로운 기능: 캔버스 태그를 사용하여 effect_html5 튜토리얼 기술의 스크린샷으로 여러 직선을 그립니다.-H5 튜토리얼-php.cn

다음 예시에서는 캔버스 태그를 사용하여 여러 개의 직선을 그립니다.

코드 복사 코드는 다음과 같습니다. index_3 브라우저가 캔버스를 지원하지 않습니다. 꼬리표. //캔버스 객체 가져오기 var canvas = document.getElementById("myCanvas"); //HTML5를 지원하지 않는 일부 브라우저에서 구문 오류 메시지가 표시되는 것을 방지하기 위해 현재 브라우저가 Canvas 개체를 지원하는지 간단히 감지합니다. if(canvas.getContext){ //해당 CanvasRenderingContext2D 개체 가져오기(브러쉬) ) var ctx = canvas.getContext("2d"); //선의 색상 ctx.StrokeStyle="#FF9933" //선의 너비(픽셀) ctx.lineWidth=10; //선의 2단계 모양 ctx.lineCap="round" //캔버스의 좌표계는 왼쪽 위입니다. Canvas 캔버스의 모서리는 원점(0,0) , 가로 좌표는 오른쪽, 세로 좌표는 아래쪽 방향이며 단위는 픽셀(px)입니다. //새 그리기 경로 시작 ctx.beginPath() //직선의 시작점 좌표를 (10,10)으로 정의합니다. ctx.moveTo(50, 50) ; //직선의 끝점 좌표를 (50,10) ctx.lineTo(350, 250) ctx.moveTo(50, 240); lineTo(360, 60); ctx.moveTo(50, 200); ctx.lineTo(300, 40) //좌표점 순서대로 직선을 그립니다. ctx.Stroke() //현재 그리기 경로 닫기 ctx.closePath() } /html>