5ba626b379994d53f7acf72a64f9b697c2caaf3fc160dd2513ce82f021917f8b는 그래픽을 그리는 데 사용되는 HTML5의 새로운 태그입니다. 사실 이 태그는 다른 태그와 동일합니다. CanvasRenderingContext2D 객체를 얻으면 JavaScript 스크립트를 통해 그리기 위한 객체를 제어할 수 있습니다.
5ba626b379994d53f7acf72a64f9b697c2caaf3fc160dd2513ce82f021917f8b는 ID, 클래스, 스타일 등과 같은 속성 외에도 높이 및 너비 속성도 있습니다. 5ba626b379994d53f7acf72a64f9b697> 요소에 그리는 세 가지 주요 단계는 다음과 같습니다.
1. Canvas 개체인 5ba626b379994d53f7acf72a64f9b697 요소에 해당하는 DOM 개체를 가져옵니다.
2. ) Canvas 객체의 메서드인 CanvasRenderingContext2D 객체를 가져옵니다.
3. 그리기를 위해 CanvasRenderingContext2D 객체를 호출합니다.
채우기 스타일
이전에 사용된 fillStyle 및 획스타일은 다른 채우기 스타일도 설정할 수 있습니다. 여기서는 fillStyle을 예로 들어 보겠습니다.
•Linear 그래디언트
단계를 사용하여 (1) var grd = context.createLinearGradient( xstart , ystart, xend , 엔드 ) 선형 그래디언트를 만들고 시작 및 끝 좌표를 설정합니다
(2) grd; .addColorStop( stop, color)은 선형 그래디언트에 색상을 추가하고, stop은 0에서 1 사이의 값입니다.
(3) context.fillStyle=grd가 컨텍스트에 할당됩니다.
•방사형 그래디언트
이 방법은 첫 번째 단계에서 받은 매개변수가 다르다는 점을 제외하면 선형 그래디언트와 유사합니다.
var grd = context.createRadialGradient(x0, y0, r0 , x1 , y1 , r1 )은 시작 중심의 좌표와 원의 반지름, 끝 중심의 좌표와 원의 반지름을 받습니다.
•비트맵 채우기
createPattern( img , 반복 스타일)은 이미지 채우기를 사용하며, 반복 스타일은 반복, 반복-x, 반복-y, 반복 없음이 될 수 있습니다.
var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); //线性渐变 var grd = context.createLinearGradient( 10 , 10, 100 , 350 ); grd.addColorStop(0,"#1EF9F7"); grd.addColorStop(0.25,"#FC0F31"); grd.addColorStop(0.5,"#ECF811"); grd.addColorStop(0.75,"#2F0AF1"); grd.addColorStop(1,"#160303"); context.fillStyle = grd; context.fillRect(10,10,100,350); //径向渐变 var grd = context.createRadialGradient(325 , 200, 0 , 325 , 200 , 200 ); grd.addColorStop(0,"#1EF9F7"); grd.addColorStop(0.25,"#FC0F31"); grd.addColorStop(0.5,"#ECF811"); grd.addColorStop(0.75,"#2F0AF1"); grd.addColorStop(1,"#160303"); context.fillStyle = grd; context.fillRect(150,10,350,350); //位图填充 var bgimg = new Image(); bgimg.src = "background.jpg"; bgimg.onload=function(){ var pattern = context.createPattern(bgimg, "repeat"); context.fillStyle = pattern; context.strokeStyle="#F20B0B"; context.fillRect(600, 100, 200,200); context.strokeRect(600, 100, 200,200); };
효과는 다음과 같습니다.
위는 기본 HTML5 캔버스 드로잉의 채우기 스타일 구현 내용입니다. 더 많은 관련 내용을 주목해주세요. PHP 중국어 홈페이지(www.php.cn)!