首页 > Web前端 > HTML基础

HTML canvas fillStyle 属性详解

HTML基础 2022-06-02 15:25:133小码哥的IT人生shichen

HTML canvas fillStyle 属性

HTML5 Canvas 参考手册

定义和用法

fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式。

实例

实例 1

定义用蓝色填充的矩形：

JavaScript:

 var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#0000ff";
ctx.fillRect(20,20,150,100);

完整实例【亲自试一试】：

 <!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#0000ff";
ctx.fillRect(20,20,150,100);
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

提示：页面底部提供更多实例。

语法

context.fillStyle=color|gradient|pattern;

属性值

值	描述
color	指示绘图填充色的 CSS 颜色值。默认值是 #000000。
gradient	用于填充绘图的渐变对象（线性或放射性）
pattern	用于填充绘图的 pattern 对象

技术细节

默认值：	#000000

更多实例

实例 2

定义从上到下的渐变，作为矩形的填充样式：

JavaScript:

 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);

完整实例【亲自试一试】：

 <!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script type="text/javascript">
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>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

实例 3

定义从左到右的渐变，作为矩形的填充样式：

JavaScript:

 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(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);

完整实例【亲自试一试】：

 <!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script type="text/javascript">
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(1,"white");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

实例 4

定义从黑到红到白的的渐变，作为矩形的填充样式：

JavaScript:

 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);

完整实例【亲自试一试】：

 <!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script type="text/javascript">
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>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

实例 5

用到的图像：

使用图像来填充绘图：

JavaScript:

 var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("lamp");
var pat=ctx.createPattern(img,"repeat");
ctx.rect(0,0,150,100);
ctx.fillStyle=pat;
ctx.fill();

完整实例【亲自试一试】：

 <!DOCTYPE html>
<html>
<body>
<p>要用到的图片：</p>
<img src="/i/lamp.gif" id="lamp" />
<p>Canvas:</p>
<button onclick="draw('repeat')">Repeat</button>
<button onclick="draw('repeat-x')">Repeat-x</button>
<button onclick="draw('repeat-y')">Repeat-y</button>
<button onclick="draw('no-repeat')">No-repeat</button>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script type="text/javascript">
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,150,100);
ctx.fillStyle=pat;
ctx.fill();
}
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

浏览器支持

表中的数字注明了首个完全支持该属性的浏览器版本。

Chrome	Edge	Firefox	Safari	Opera
Chrome	Edge	Firefox	Safari	Opera
4.0	9.0	3.6	4.0	10.1

注意：Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。

HTML5 Canvas 参考手册

上一篇HTML onmouseup 事件属性详解下一篇HTML canvas strokeStyle 属性详解

小码哥的IT人生

HTML canvas fillStyle 属性详解

HTML canvas fillStyle 属性

定义和用法

实例

实例 1

完整实例【亲自试一试】：

语法

属性值

技术细节

更多实例

实例 2

完整实例【亲自试一试】：

实例 3

完整实例【亲自试一试】：

实例 4

完整实例【亲自试一试】：

实例 5

完整实例【亲自试一试】：

浏览器支持

tags标签云

Web前端栏目导航

最新文章

热门文章

	var c=document.getElementById("myCanvas");
	var ctx=c.getContext("2d");
	ctx.fillStyle="#0000ff";
	ctx.fillRect(20,20,150,100);

	<!DOCTYPE html>
	<html>
	<body>
	<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
	Your browser does not support the HTML5 canvas tag.</canvas>
	<script type="text/javascript">
	var c=document.getElementById("myCanvas");
	var ctx=c.getContext("2d");
	ctx.fillStyle="#0000ff";
	ctx.fillRect(20,20,150,100);
	</script>
	</body>
	</html>

	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);

	var c=document.getElementById("myCanvas");
	var ctx=c.getContext("2d");
	var img=document.getElementById("lamp");
	var pat=ctx.createPattern(img,"repeat");
	ctx.rect(0,0,150,100);
	ctx.fillStyle=pat;
	ctx.fill();

HTML canvas fillStyle 属性 详解

HTML canvas fillStyle 属性

定义和用法

实例

实例 1

完整实例【亲自试一试】：

语法

属性值

技术细节

更多实例

实例 2

完整实例【亲自试一试】：

实例 3

完整实例【亲自试一试】：

实例 4

完整实例【亲自试一试】：

实例 5

完整实例【亲自试一试】：

浏览器支持

相关阅读

tags标签云

Web前端栏目导航

最新文章

热门文章

HTML canvas fillStyle 属性详解