English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

HTML 참조 설명서

HTML 태그 전체

HTML canvas fillStyle 속성

HTML 캔버스 fillStyle() 속성은 그래픽의 색상, 변화 또는 패턴을 설정합니다. 기본 값은 #000000입니다. <canvas> 요소는 JavaScript를 사용하여 웹 페이지에서 그래픽을 그릴 수 있게 합니다. 각 캔버스는 높이와 너비를 설명하는 두 가지 요소를 가지고 있습니다. 높이와 너비.

온라인 예제

사각형에 빨간 채우기 색상을 정의합니다:

Yourbrowserdoesnotsupportthecanvastag.

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 객체.

더 많은 예제

온라인 예제

정의 한 변화(위에서 아래로)를 사용하여 사각형의 채우기 스타일로 설정합니다:

Yourbrowserdoesnotsupportthecanvastag.

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>
테스트를 보고 보세요 ‹/›

온라인 예제

정의된 왼쪽에서 오른쪽으로의 변화를定义为矩形的填充样式:

Yourbrowserdoesnotsupportthecanvastag.

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>
테스트를 보고 보세요 ‹/›

온라인 예제

검정에서 빨간색으로再到 흰색으로의 변화를定义为矩形的填充样式:

Yourbrowserdoesnotsupportthecanvastag.

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>
테스트를 보고 보세요 ‹/›

사용된 이미지:

온라인 예제

이미지를 사용하여 그리기:

YourbrowserdoesnotsupporttheHTML5canvastag.

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>
테스트를 보고 보세요 ‹/›
HTML canvas 참조 가이드