html5
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧

fillstyle属性怎么使用

发布时间：2022-05-17 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了fillstyle属性怎么使用，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

fillstyle属性的作用是用来填充绘制图形的颜色，还有实现颜色渐变及填充图像；fillstyle属性的使用语法是“context.fillStyle=color|gradient|pattern;”。

fillstyle属性怎么使用

本文操作环境：windows7系统、HTML5&&CSS3版、Dell G3电脑。

html5中的fillstyle属性可以用来填充绘制图形的颜色，还有实现颜色渐变及填充图像，下面的文章我们就来具体看一下fillstyle属性的用法。

我们先来看一下fillstyle属性的基本用法

context.fillStyle=color|gradient|pattern;

color表示绘图填充色的 CSS 颜色值。默认值是黑色

gradient表示填充绘图的渐变对象（线性或放射性）

pattern表示填充绘图的模式对象

下面我们来看具体的示例

填充颜色

代码如下

<!DOCTYPE html>
<html>
<head>
<;meta charset="utf-8">
<tITle></title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>
<script>
VAR c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="pink";
ctx.fillRect(20,20,150,100);
</script>
</body>
</html>

效果如下

fillstyle属性怎么使用

颜色渐变

代码如下

<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></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,"lightgreen");
my_gradient.addColorStop(1,"yellow");
ctx.fillStyle=my_gradient;
ctx.fillRect(20,20,150,100);
</script>
</body>
</html>

效果如下

fillstyle属性怎么使用

填充图像

代码如下

<!DOCTYPE html>
<html>
<body>
<p>要用到的图片：</p>
<img src="img/mouse.png" 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="500" height="250" style="border:1px solid #d3d3d3;"></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,300,200);
ctx.fillStyle=pat;
ctx.fill();
}
</script>
</body>
</html>

运行效果如下

fillstyle属性怎么使用

本篇文章到这里就全部结束了，更多精彩内容大家可以关注脚本宝典的其他相关栏目教程！！！

以上就是fillstyle属性怎么使用的详细内容，更多请关注脚本宝典其它相关文章！

脚本宝典总结

以上是脚本宝典为你收集整理的fillstyle属性怎么使用全部内容，希望文章能够帮你解决fillstyle属性怎么使用所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：
猜你在找的html5相关文章
其他相关热搜词更多
phpjavapython程序员loadpost-format-gallerydivString参数开发ListcapMapClass工具安装SQL数据库资源this
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新html5教程
热门html5教程