• 技术文章 > web前端 > H5教程

    fillstyle属性怎么使用

    不言 不言 2019-02-14 16:55:28 原创 206
    html5中的fillstyle属性可以用来填充绘制图形的颜色,还有实现颜色渐变及填充图像,下面的文章我们就来具体看一下fillstyle属性的用法。

    JavaScript

    我们先来看一下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>

    效果如下

    微信截图_20190214162758.png

    颜色渐变

    代码如下

    <!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>

    效果如下

    微信截图_20190214163117.png

    填充图像

    代码如下

    <!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>

    运行效果如下

    微信截图_20190214164623.png

    本篇文章到这里就全部结束了,更多精彩内容大家可以关注php中文网的其他相关栏目教程!!!

    以上就是fillstyle属性怎么使用的详细内容,更多请关注php中文网其它相关文章!

    第六期线上培训班
    专题推荐: fillstyle属性
    上一篇:移动端H5中百度地图的click事件的介绍(代码示例) 下一篇:HTML5中video标签如何使用

    相关文章推荐

    • HTML5 Canvas入门学习教程_html5教程技巧 • 一波HTML5 Canvas基础绘图实例代码集合_html5教程技巧 • 使用HTML5的Canvas绘制曲线的简单方法_html5教程技巧 • html设置或返回用于填充绘画的颜色渐变或模式的属性fillStyle

    全部评论我要评论

  • 取消 发布评论 发送
  • PHP中文网