您的位置:首页> HTML5教程> canvas API

canvas fillStyle

2018-10-15 21:04| 作者: admin| 查看: 1341| 评论: 0|来自: 蚂蚁部落

属性名称fillStyle是一个合成词,由单词fill和style构成。

fill具有填充的意思,style具有方式的意思。

那么可以猜测,此属性的功能作用与图案的填充方式,事实也的确如此。

fillStyle属性可以设置或者返回canvas图案的填充方式。

默认值是#000000,属性值可以有如下三种类型:

(1).颜色。

(2).渐变。

(3).模式。

在文章后面会通过实例演示一下属性值三种类型的使用。

更多关于canvas内容可以参阅canvas API一章节。

语法结构:

[JavaScript] 纯文本查看 复制代码
context.fillStyle=color|gradient|pattern;

浏览器兼容:

(1).IE9+浏览器支持此属性。

(2).edge浏览器支持此属性。

(3).谷歌浏览器支持此属性。

(4).火狐浏览器支持此属性。

(5).Opera浏览器支持此属性。

(6).Safari浏览器支持此属性。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>蚂蚁部落</title>
<script>
window.onload=function(){
  let canvas=document.getElementById("ant");
  let ctx=canvas.getContext("2d");
  ctx.fillStyle="red";
  ctx.fillRect(10,20,150,60);
}
</script>
</head>
<body>
<canvas id="ant">当前浏览器不支持canvas</canvas>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/15/210526s7jhmrnlvf9ausu7.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

fillStyle属性值为"red",当然也可以其他颜色类型,CSS可用的颜色类型,canvas中都是可用的。

关于这些颜色类型可以参阅CSS颜色值类型一章节。

演示一段使用RGBA颜色类型的实例:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>蚂蚁部落</title>
<script>
window.onload=function(){
  let canvas=document.getElementById("ant");
  let ctx=canvas.getContext("2d");
  ctx.fillStyle="RGBA(255,0,0,0.5)";
  ctx.fillRect(10,20,150,60);
}
</script>
</head>
<body>
<canvas id="ant">当前浏览器不支持canvas</canvas>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/15/210621d1gz9mg21atfa05f.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

fillStyle属性值设置为RGBA颜色值。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>蚂蚁部落</title>
<script>
window.onload=function(){
  let canvas=document.getElementById("ant");
  let ctx=canvas.getContext("2d");
  let gradient=ctx.createLinearGradient(0,0,0,170);
  gradient.addColorStop(0,"red");
  gradient.addColorStop(1,"blue");
  ctx.fillStyle=gradient;
  ctx.fillRect(10,20,150,60);
}
</script>
</head>
<body>
<canvas id="ant">当前浏览器不支持canvas</canvas>
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/15/210645yy50eeynelivtay3.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述代码中,fillStyle属性值并不是普通的颜色值,而是一个线性渐变对象。

关于线性渐变可以参阅canvas createLinearGradient()一章节。

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" />  
<title>蚂蚁部落</title>
<script>
window.onload=function(){
  let canvas=document.getElementById("ant");
  let ctx=canvas.getContext("2d");
  let img=document.getElementById("lamp")
  let pat=ctx.createPattern(img,"repeat");
  ctx.fillStyle=pat;
  ctx.fillRect(10,20,150,60);
}
</script>
</head>
<body>
<canvas id="ant">当前浏览器不支持canvas</canvas>
<img src="demo/js/img/lamp.jpg" id="lamp">
</body>
</html>

代码运行效果截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201810/15/210716tsp7l5ocltcu9dqq.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

fillStyle属性值是一个CanvasPattern对象。

关于此对象可以参阅canvas createPattern()一章节。


鲜花

握手

雷人

路过

鸡蛋
上一篇:canvas fillRect()下一篇:canvas lineTo()

最新评论

返回顶部