English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
HTML 캔버스 fillStyle() 속성은 그래픽의 색상, 변화 또는 패턴을 설정합니다. 기본 값은 #000000입니다. <canvas> 요소는 JavaScript를 사용하여 웹 페이지에서 그래픽을 그릴 수 있게 합니다. 각 캔버스는 높이와 너비를 설명하는 두 가지 요소를 가지고 있습니다. 높이와 너비.
사각형에 빨간 채우기 색상을 정의합니다:
JavaScript:
<!DOCTYPE html> <html> <head> <title>HTML canvas fillStyle 속성 사용(기본 튜토리얼 웹 oldtoolbag.com)</title> </head> <body> <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3> 당신의 브라우저는 HTML을 지원하지 않습니다5 canvas 태그.</canvas> <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="#FF0000"; ctx.fillRect(20,20,150,100); </script> </body> </html>테스트를 보고 보세요 ‹/›
IEFirefoxOperaChromeSafari
Internet Explorer 9Firefox, Opera, Chrome 및 Safari가 fillStyle 속성을 지원합니다.
주의:Internet Explorer 8 이전 버전에서 canvas 요소를 지원하지 않습니다.
<canvas> 요소는 JavaScript를 사용하여 웹 페이지에서 그래픽을 그릴 수 있게 합니다. 각 캔버스는 높이와 너비를 설명하는 두 가지 요소를 가지고 있습니다. 높이와 너비.
기본 값: | #000000 |
---|---|
JavaScript 문법: | context.fillStyle=color|gradient|pattern; |
값 | 설명 |
---|---|
color | 그래픽 채우기 색상을 지시합니다 CSS 색상 값입니다. 기본 값은 #000000입니다. |
gradient | 그래픽을 채우기 위해 사용되는 변화 객체(선형 또는 放射性)。 |
pattern | 그래픽을 채우기 위해 사용되는 pattern 객체. |
정의 한 변화(위에서 아래로)를 사용하여 사각형의 채우기 스타일로 설정합니다:
JavaScript:
<!DOCTYPE html> <html> <head> <title>HTML canvas fillStyle 속성 사용(기본 튜토리얼 웹 oldtoolbag.com)</title> </head> <body> <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3> 당신의 브라우저는 HTML을 지원하지 않습니다5 canvas 태그.</canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var my_gradient = ctx.createLinearGradient(0, 0, 0, 170); my_gradient.addColorStop(0, "black"); my_gradient.addColorStop(1, "white"); ctx.fillStyle = my_gradient; ctx.fillRect(20, 20, 150, 100); </script> <p>주의: Internet Explorer 8및 이전 버전에서 canvas 태그를 지원하지 않음.</p> </body> </html>테스트를 보고 보세요 ‹/›
정의된 왼쪽에서 오른쪽으로의 변화를定义为矩形的填充样式:
JavaScript:
<!DOCTYPE html> <html> <head> <title>HTML canvas fillStyle 속성 사용(기본 튜토리얼 웹 oldtoolbag.com)</title> </head> <body> <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3> 당신의 브라우저는 HTML을 지원하지 않습니다5 canvas 태그.</canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var grd = ctx.createLinearGradient(0, 0, 170, 0); grd.addColorStop(0, "black"); grd.addColorStop(0.5, "red"); grd.addColorStop(1, "white"); ctx.fillStyle = grd; ctx.fillRect(20, 20, 150, 100); </script> <p>주의: Internet Explorer 8및 이전 버전에서 canvas 태그를 지원하지 않음.</p> </body> </html>테스트를 보고 보세요 ‹/›
검정에서 빨간색으로再到 흰색으로의 변화를定义为矩形的填充样式:
JavaScript:
<!DOCTYPE html> <html> <head> <title>HTML canvas fillStyle 속성 사용(기본 튜토리얼 웹 oldtoolbag.com)</title> </head> <body> <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3> 당신의 브라우저는 HTML을 지원하지 않습니다5 canvas 태그.</canvas> <script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var my_gradient = ctx.createLinearGradient(0, 0, 170, 0); my_gradient.addColorStop(0, "black"); my_gradient.addColorStop(0.5, "red"); my_gradient.addColorStop(1, "white"); ctx.fillStyle = my_gradient; ctx.fillRect(20, 20, 150, 100); </script> <p>주의: Internet Explorer 8및 이전 버전에서 canvas 태그를 지원하지 않음.</p> </body> </html>테스트를 보고 보세요 ‹/›
이미지를 사용하여 그리기:
JavaScript:
<!DOCTYPE html> <html> <head> <title>HTML canvas fillStyle 속성 사용(기본 튜토리얼 웹 oldtoolbag.com)</title> </head> <body> <p>이미지적용:</p> <img src="haha.gif" id="lamp"> <p>화면:</p> <button onclick="draw(&39;repeat')">재복</button> <button onclick="draw(&39;repeat-x')">재복-x</button> <button onclick="draw(&39;repeat-y')">재복-y</button> <button onclick="draw(&39;no-repeat')">불재복</button> <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3> 당신의 브라우저는 HTML을 지원하지 않습니다5 canvas 태그. </canvas> <script> function draw(direction) { var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.clearRect(0,0,c.width,c.height); var img=document.getElementById("lamp") var pat=ctx.createPattern(img,direction); ctx.rect(0,0,220,128); ctx.fillStyle=pat; ctx.fill(); } </script> </body> </html>테스트를 보고 보세요 ‹/›