fillstyle属性的作用是用来填充绘制图形的颜色,还有实现颜色渐变及填充图像;fillstyle属性的使用语法是“context.fillStyle=color|gradient|pattern;”。
本文操作环境:windows7系统、HTML5&&CSS3版、Dell G3电脑。
html5中的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>
运行效果如下
本篇文章到这里就全部结束了,更多精彩内容大家可以关注编程之家网的其他相关栏目教程!!!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。