您的位置：首页 > Web前端 > HTML5

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

2014-12-26 11:16 260 查看
之前写过一篇关于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>


最终效果如下图：



本文连接：/article/2418874.html

转载请注明出处
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航