web前端|H5教程
fillstyle属性
web前端-H5教程
段子网站源码,vscode导出git项目,ubuntu静音命令,tomcat注册不了服务,爬虫json提取,php 随机取出数组,河西区seo营销推广,内涵网站源码,模板堂差评lzw
本文操作环境：windows7系统、HTML5&&CSS3版、Dell G3电脑。
广告报价下单源码,ubuntu 试用u盘,tomcat运行程序时卡住,js爬虫图片大全,win一键php环境,seo-yunlzw
html5中的fillstyle属性可以用来填充绘制图形的颜色，还有实现颜色渐变及填充图像，下面的文章我们就来具体看一下fillstyle属性的用法。
漂亮页面html源码,ubuntu 安装必做,python 递归爬虫l,成都PHP软件工程师培训生,珠海seo建站lzw
我们先来看一下fillstyle属性的基本用法
context.fillStyle=color|gradient|pattern;
color表示绘图填充色的 CSS 颜色值。默认值是黑色
gradient表示填充绘图的渐变对象（线性或放射性）
pattern表示填充绘图的模式对象
下面我们来看具体的示例
填充颜色
代码如下
效果如下
颜色渐变
代码如下
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);
效果如下
填充图像
代码如下
要用到的图片：
Canvas:
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();}
运行效果如下
本篇文章到这里就全部结束了，更多精彩内容大家可以关注php中文网的其他相关栏目教学！！！
