HTML5简明教程-1.1.1.HTML5Canvas参考手册之填充fillStyle

最新推荐文章于 2022-12-21 15:24:37 发布

lufaxinT

最新推荐文章于 2022-12-21 15:24:37 发布

阅读量2.2k

点赞数 1

分类专栏： HTML5 文章标签： web前端 html5 html

本文链接：https://blog.csdn.net/tomorrow13210073213/article/details/42169229

版权

HTML5 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

之前写过一篇关于HTML5canvas的博文，泛泛介绍了canvas的相关功能。今早翻看w3cschool才发现，canvas相关知识还有很多。在接下来的先关文章中会对canvas做进一步学习与总结，做一个备查手册。

属性名：fillStyle

属性描述：fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式。

属性默认值：#000000

属性值：color|gradient|pattern

属性值详解：

（1）color。与普通样式的颜色定义相同，可以用类似于red、green等英文单词，可以用#000000这样的颜色值，也可以用rgba()定义颜色或透明度。如下代码：

    //单色填充
    cC.fillStyle = 'red';
    cC.fillRect(0, 0, 200, 200);
    
    //rgba填充
    cC.fillStyle = 'rgba(0,0,255,0.5)';
    cC.fillRect(210, 0, 200, 200);

（2） gradient。gradient指又createLinearGradient()或createRadialGradient()创建的对象，分别实现线性渐变和放射渐变。方法在此不做详细介绍，以后会专门总结。代码如下：

    //线性渐变填充
    //获得渐变范围，参数：（起点X轴坐标，起点Y轴坐标，终点X轴坐标，终点Y轴坐标）
    var lg = cC.createLinearGradient(0, 210, 200, 200);
    lg.addColorStop(0, 'green');
    lg.addColorStop(0.5, 'red');
    lg.addColorStop(1, 'yellow');
    cC.fillStyle = lg;
    cC.fillRect(0, 210, 200, 200);

    //放射渐变填充
    //获得渐变范围，参数：（渐变的开始圆的 x 坐标，渐变的开始圆的 y 坐标，开始圆的半径，渐变的结束圆的 x 坐标，渐变的结束圆的 y 坐标，结束圆的半径）
    var rg = cC.createRadialGradient(370, 370, 50, 370, 370, 170);
    rg.addColorStop(0, 'red');
    rg.addColorStop(0.5, 'green');
    rg.addColorStop(1, 'yellow');
    cC.fillStyle = rg;
    cC.fillRect(210, 210, 200, 200);

（3） pattern。pattern指由createPattern()方法创建的对象，该对象与ps中的对象填充相似，都是用已有对象内容填充相关区域。此处我们用img创建填充对象，仍会存在浏览器兼容性问题，所以在图像加载完成后才进行绘制，以解决兼容性问题。代码如下：

    //pattern对象填充
    //用图片做填充时仍会存在浏览器兼容性的问题，需要在图片加载完成后进行绘制，否则将无法绘制
    var img = document.getElementById('img');
    img.onload = function() {
        //createPattern()方法的第二个参数定义了第一个对象的重复方式，与背景图片的重复方式一致，有如下方式：
        //repeat：x轴与y轴都重复
        //repeat-x：仅重复x轴
        //repeat-y：仅重复y轴
        //no-repeat：不重复，仅显示一次
        var p = cC.createPattern(img, 'repeat');
        cC.fillStyle = p;
        cC.fillRect(0, 400, 400, 400);
        cC.fill();
    };

fillStyle的基本内容也就这些，下面是我测试用到的代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Html5 Canvas</title>
</head>

<body>
    <canvas id="can" width="400" height="800"></canvas>
    原图：
    <img src="resources/images/1.jpg" alt="" id="img">
</body>

<script type="text/javascript">
    //获得页面元素
    var c = document.getElementById('can');
    //调用html5相关方法获得2D对象
    var cC = c.getContext('2d');

    //单色填充
    cC.fillStyle = 'red';
    cC.fillRect(0, 0, 200, 200);
    
    //rgba填充
    cC.fillStyle = 'rgba(0,0,255,0.5)';
    cC.fillRect(210, 0, 200, 200);

    //线性渐变填充
    //获得渐变范围，参数：（起点X轴坐标，起点Y轴坐标，终点X轴坐标，终点Y轴坐标）
    var lg = cC.createLinearGradient(0, 210, 200, 200);
    lg.addColorStop(0, 'green');
    lg.addColorStop(0.5, 'red');
    lg.addColorStop(1, 'yellow');
    cC.fillStyle = lg;
    cC.fillRect(0, 210, 200, 200);

    //放射渐变填充
    //获得渐变范围，参数：（渐变的开始圆的 x 坐标，渐变的开始圆的 y 坐标，开始圆的半径，渐变的结束圆的 x 坐标，渐变的结束圆的 y 坐标，结束圆的半径）
    var rg = cC.createRadialGradient(370, 370, 50, 370, 370, 170);
    rg.addColorStop(0, 'red');
    rg.addColorStop(0.5, 'green');
    rg.addColorStop(1, 'yellow');
    cC.fillStyle = rg;
    cC.fillRect(210, 210, 200, 200);

    //pattern对象填充
    //用图片做填充时仍会存在浏览器兼容性的问题，需要在图片加载完成后进行绘制，否则将无法绘制
    var img = document.getElementById('img');
    img.onload = function() {
        //createPattern()方法的第二个参数定义了第一个对象的重复方式，与背景图片的重复方式一致，有如下方式：
        //repeat：x轴与y轴都重复
        //repeat-x：仅重复x轴
        //repeat-y：仅重复y轴
        //no-repeat：不重复，仅显示一次
        var p = cC.createPattern(img, 'repeat');
        cC.fillStyle = p;
        cC.fillRect(0, 400, 400, 400);
        cC.fill();
    };
</script>

</html>

最终效果如下图：