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

HTML 참조 매뉴얼

HTML 태그 전체 목록

HTML canvas createLinearGradient() 메서드

createLinearGradient() 메서드는 매개변수 좌표를 따라 경로를 지정한 변화하는 그레이더를 생성합니다. 이 메서드는 선형 CanvasGradient 객체를 반환합니다.

HTML canvas 참조 설명서

온라인 예제

红色到白色的渐变（从左到右）를 정의하여 사각형의 채우 스타일로 사용:

您的浏览器,不支持HTML5 canvas标签.

createLinearGradient() 메서드의 사용 시연:

<!DOCTYPE html>
<html>
<head>
<title>HTML canvas createLinearGradient() 메서드의 사용(기본 튜토리얼 웹3codebox.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,"red");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
20,20,150,100);
</script>
</body>
</html>
시험해보세요 ‹/›

浏览器兼容性

IEFirefoxOperaChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 createLinearGradient() 方法。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

定义和用法

createLinearGradient() 메서드는 하나의 선형 연속 변화 객체를 생성합니다.
渐变可用于填充矩形，圆形，直线，文本等

고려사항:사용하십시오: strokeStyle 또는 fillStyle 속성의 값.

고려사항:사용하십시오: addColorStop() 메서드는 다른 색상을 규정하고 gradient 객체에서 색상이 어디에 위치할지 정의합니다.

JavaScript 문법:context.createLinearGradient(x0,y0,x1,y1);

参数值

参数描述
x0渐变开始点的 x 坐标
y0渐变开始点的 y 坐标
x1渐变结束点的 x 坐标
y1渐变结束点的 y 坐标

更多示例

온라인 예제

위에서 아래로의 변화를 가진 연속 변화를 정의하여 사각형의 채우 스타일로 사용:

您的浏览器不支持 canvas 标签.

JavaScript를 사용하여 효과를 시연:

<!DOCTYPE html>
<html>
<head>
<title>HTML canvas createLinearGradient() 메서드의 사용(기본 튜토리얼 웹3codebox.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;
20,20,150,100);
</script>
</body>
</html>
시험해보세요 ‹/›

온라인 예제

黑色에서 빨간색으로再到 흰색으로의 변화를 가진 연속 변화를 정의하여 사각형의 채우 스타일로 사용:

您的浏览器不支持 canvas 标签.

createLinearGradient() 메서드의 사용 시연:

<!DOCTYPE html>
<html>
<head>
<title>HTML canvas createLinearGradient() 메서드의 사용(기본 튜토리얼 웹3codebox.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;
20,20,150,100);
</script>
</body>
</html>
시험해보세요 ‹/›
HTML canvas 참조 설명서
HTML: <template> 태그