이 기사 예제는 JS+HTML5에 의해 타원형 패턴을 그리는 방법을 설명합니다. HTML5 캔버스에는 타원형을 그리는 방법이 없습니다. 다음 코드는 타원형을 그릴 수 있습니다. 참조를 위해 귀하와 공유됩니다. 특정 구현 방법은 다음과 같습니다.
1. 암시 적 캔버스에서 (CSS를 : display : none;)로 정의합니다.
2. 다른 명백한 캔버스에 다른 종횡비를 가진 암시 적 캔버스의 이미지를 그려 정원을 타원으로 바꿉니다.
3. 또한 애니메이션 기능을 추가하십시오.
<html> <head> <meta http-equiv = "content-type"content = "text/html; charset = utf-8"/> <title> 테스트 색상 배경 </title> <cript> var ticker = 0; new 배열 ( "#000000", "#a52a2a", "#b8860b", "핑크", "녹색", "노란색", "빨간색", "오렌지", "#bb008b", "#8b0000"); 함수 단점 () {var canvashide = document.getElementById ( "hide"); // 숨겨진 캔버스 var g = canvashide.getContext ( "2d"); // 숨겨진 캔버스의 브러시를 찾으십시오. // 숨겨진 캔버스 var i = 0을 청소하십시오. {// 다른 색상이 동심하고 순서대로 발산되는 정원을 그립니다. g.beginpath (); var grd = g.createradialgradient (300,300,300-i*25, 300,300,265-i*25); grd.addcolorstop (0, col [(0+i+ticker)%col.length]); grd.addcolorstop (1, col [( 1+i+ticker)%col.length]); g.fillstyle = grd; g.arc (300,300,300-i*25,0,2*math.pi); g.fill (); i ++;} (i <11); // 명시 적 캔버스의 브러시를 찾으십시오. mycanvas gg var gg = docum // 명시 적 캔버스 청소/ * 600 너비와 300 높이의 규모로 암시 적 캔버스의 정원 이미지를 그리십시오. Ticker ++;} 함수 preperation () {setInterval ( 'd } </script> <tyle> #MyCanvas {위치 : 절대; 왼쪽 : 0px; 상단 : 0px;}#hide {display : none;} </style> </head> <body onload = "preperation ()"> <canvas id = "mycanvas"> </canvas> <canvas id = "hide"> </canvas> </body> </html>이 기사가 모든 사람의 웹 프로그래밍에 도움이되기를 바랍니다.