fillstyle属性怎么使用
发布时间：2020-05-06 编辑：jiaochengji.com
教程集为您提供fillstyle属性怎么使用等资源，欢迎您收藏本站，我们将为您提供最新的fillstyle属性怎么使用资源
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>效果如下
颜色渐变
代码如下
<!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>效果如下
填充图像
代码如下
<!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属性怎么使用的详细内容，更多请关注教程集其它相关文章！
本文转载自PHP中文网
您可能感兴趣的文章：
fillstyle属性怎么使用
Canvas中beginPath()和closePath()的分析总结（附示例）
html5 canvas标签是什么意思？canvas标签使用方法介绍
html5 canvas有什么用?HTML5最新的canvas元素详解
Canvas怎么使用
使用HTML5 Canvas为图片填充颜色和纹理
HTML5 canvas实现画图程序（附代码）
html5 Canvas实现画未闭合的路径及渐变色的填充方法
python怎么调用私有属性
如何使用HTML5 canvas绘制文字
上一篇：HTML5中video标签如何使用
下一篇：canvas实现弹球的代码示例
[关闭]