HTML5 캔버스 기본 그리기 채우기 스타일 구현

는 그래픽을 그리는 데 사용되는 HTML5의 새로운 태그입니다. 사실 이 태그는 다른 태그와 동일합니다. CanvasRenderingContext2D 객체를 얻으면 JavaScript 스크립트를 통해 그리기 위한 객체를 제어할 수 있습니다.
는 ID, 클래스, 스타일 등과 같은 속성 외에도 높이 및 너비 속성도 있습니다. > 요소에 그리는 세 가지 주요 단계는 다음과 같습니다.
1. Canvas 개체인 요소에 해당하는 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)!