canvas 用颜色和渐变填充对象

最新推荐文章于 2023-03-20 11:29:13 发布

JinmyHe

最新推荐文章于 2023-03-20 11:29:13 发布

阅读量446

点赞数

分类专栏： web前端-动画图形文章标签： canvas

本文链接：https://blog.csdn.net/weixin_42659625/article/details/82766497

版权

web前端-动画图形专栏收录该内容

19 篇文章 1 订阅

订阅专栏

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);

JinmyHe

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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：线性...
复制链接

扫一扫