canvas 用颜色和渐变填充对象

标签: canvas

context.fillStyle = 'red';

(1)以rgb()方法设置颜色:

context.fillStyle = rgb(255,0,0);

(2)以十六进制数字字符串设置填充色

context.fillStyle = "#ffffff";

(3)以rgba()方法设置填充色

context.fillStyle = rgba(255,0,0,1);

例子1:线性水平渐变

<!DOCTYPE HTML>
<html lang="cn">

<head>
    <meta charset="utf-8">
    <title>canvans</title>
    <script src="modernizr-custom.js"></script>
    <script type="text/javascript">
        //检测window是否加载完毕最终的代码
        window.addEventListener('load', eventWindowLoaded, false);

        function eventWindowLoaded() {
            canvasApp();
        }

        //检测是否支持canvas
        //使用modernizr.js
        function canvasSupport() {
            return Modernizr.canvas;
        }

        //
        function canvasApp() {
            if (!canvasSupport()) {
                return;
            } else {
                var theCanvas = document.getElementById("canvas"); //创建画布实例
                var context = theCanvas.getContext("2d"); //获得2D上下文
            }
            drawScreen();

            function drawScreen() {
                //水平渐变必须保持为0
                var gr = context.createLinearGradient(0, 0, 100, 0);

                //添加颜色渐变
                gr.addColorStop(0, 'rgb(255,0,0)');
                gr.addColorStop(.5, 'rgb(0,255,0)');
                gr.addColorStop(1, 'rgb(255,0,0)');

                //应用fillstyle生成渐变
                context.fillStyle = gr;
                context.fillRect(0, 0, 100, 100);
            }
        }
    </script>
</head>

<body>

    <canvas id="canvas" width="500" height="400">
                Your browser does not support the canvas element.
    </canvas>

</body>

</html>

创建一个水平渐变,必须首先创建一个变量gr来指代一个新的渐变。设置方式如下:

var gr = context.createLinearGradient(0, 0, 100, 0);

例子2:多个渐变填充对象

function drawScreen() {
                //水平渐变必须保持为0
                var gr = context.createLinearGradient(0, 0, 100, 0);

                //添加颜色渐变
                gr.addColorStop(0, 'rgb(255,0,0)');
                gr.addColorStop(.5, 'rgb(0,255,0)');
                gr.addColorStop(1, 'rgb(255,0,0)');

                //应用fillstyle生成渐变
                context.fillStyle = gr;
                context.fillRect(0, 0, 100, 100);
                context.fillRect(0, 100, 50, 100);
                context.fillRect(0, 200, 200, 100);
            }

例子3:水平描边渐变

function drawScreen() {
                //水平渐变必须保持为0
                var gr = context.createLinearGradient(0, 0, 100, 0);

                //添加颜色渐变
                gr.addColorStop(0, 'rgb(255,0,0)');
                gr.addColorStop(.5, 'rgb(0,255,0)');
                gr.addColorStop(1, 'rgb(255,0,0)');

                //应用fillstyle生成渐变
                context.fillStyle = gr;
                context.strokeRect(0, 0, 100, 100);
                context.strokeRect(0, 100, 50, 100);
                context.strokeRect(0, 200, 200, 100);
            }

例子4:复杂水平渐变

function drawScreen() {
                //水平渐变必须保持为0
                var gr = context.createLinearGradient(0, 0, 100, 0);

                //添加颜色渐变
                gr.addColorStop(0, 'rgb(255,0,0)');
                gr.addColorStop(.5, 'rgb(0,255,0)');
                gr.addColorStop(1, 'rgb(255,0,0)');

                //应用fillstyle生成渐变
                context.fillStyle = gr;

                context.beginPath();
                context.moveTo(0, 0);
                context.lineTo(50, 0);
                context.lineTo(100, 50);
                context.lineTo(50, 100);
                context.lineTo(0, 100);
                //水平渐变应用到复杂形状
                context.lineTo(0, 0);
                context.stroke();
                context.fill();
                context.closePath();
            }

垂直渐变如下:

 var gr = context.createLinearGradient(0, 0, 0, 100);

对角线渐变如下:

var gr = context.createLinearGradient(0, 0, 100, 100);

简单径向渐变如下:

var gr = context.createLinearGradient(50, 50, 25, 50, 50, 100);

复杂径向渐变如下:

var gr = context.createLinearGradient(50, 50, 25, 100, 100, 100);

 

版权声明:本文为weixin_42659625原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_42659625/article/details/82766497