Canvas 添加加样式&&颜色（细解）

最新推荐文章于 2023-07-22 23:53:42 发布

_筱龙

最新推荐文章于 2023-07-22 23:53:42 发布

阅读量989

点赞数

文章标签： canvas

本文链接：https://blog.csdn.net/IT_qslong/article/details/108761911

版权

加样式和颜色

色彩Colors

fillStyle = color

设置图形的填充颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function draw() {
            var ctx = document.getElementById('canvas').getContext('2d');
            for (var i=0;i<6;i++){
                for (var j=0;j<6;j++){
                    ctx.fillStyle = 'rgb(' + Math.floor(255-45*i) + ',' +
                        Math.floor(255-45*j) + ',0)';
                    ctx.fillRect(j*25,i*25,25,25);
                }
            }
        }
    </script>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>

strokeStyle = color

社会图形轮廓的颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function draw() {
            var ctx = document.getElementById('canvas').getContext('2d');
            for (var i=0;i<6;i++){
                for (var j=0;j<6;j++){
                    ctx.strokeStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ',' +
                        Math.floor(255-42.5*j) + ')';
                    ctx.beginPath();
                    ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
                    ctx.stroke();
                }
            }
        }
    </script>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>

透明度 Transparency

globalAlpha = transparencyValue

设置透明度

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.
</canvas>

<script>

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.fillStyle="red";
    ctx.fillRect(20,20,75,50);

    //Turn transparency on
    ctx.globalAlpha=0.2;
    ctx.fillStyle="green";
    ctx.fillRect(50,50,75,50);
    ctx.fillStyle="blue";
    ctx.fillRect(80,80,75,50);
</script>

</body>
</html>

渐变 Gradients

createLinearGradient(x1,y1,x2,y2)

用线性或者径向的渐变来填充或描边

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function draw() {
            var ctx = document.getElementById('canvas').getContext('2d');

            // 创建渐变
            var radgrad = ctx.createRadialGradient(45,45,10,52,50,30);
            radgrad.addColorStop(0, '#A7D30C');
            radgrad.addColorStop(0.9, '#019F62');
            radgrad.addColorStop(1, 'rgba(1,159,98,0)');

            var radgrad2 = ctx.createRadialGradient(105,105,20,112,120,50);
            radgrad2.addColorStop(0, '#FF5F98');
            radgrad2.addColorStop(0.75, '#FF0188');
            radgrad2.addColorStop(1, 'rgba(255,1,136,0)');

            var radgrad3 = ctx.createRadialGradient(95,15,15,102,20,40);
            radgrad3.addColorStop(0, '#00C9FF');
            radgrad3.addColorStop(0.8, '#00B5E2');
            radgrad3.addColorStop(1, 'rgba(0,201,255,0)');

            var radgrad4 = ctx.createRadialGradient(0,150,50,0,140,90);
            radgrad4.addColorStop(0, '#F4F201');
            radgrad4.addColorStop(0.8, '#E4C700');
            radgrad4.addColorStop(1, 'rgba(228,199,0,0)');

            // 画图形
            ctx.fillStyle = radgrad4;
            ctx.fillRect(0,0,150,150);
            ctx.fillStyle = radgrad3;
            ctx.fillRect(0,0,150,150);
            ctx.fillStyle = radgrad2;
            ctx.fillRect(0,0,150,150);
            ctx.fillStyle = radgrad;
            ctx.fillRect(0,0,150,150);
        }
    </script>
</head>
<body onload="draw();">
<canvas id="canvas" width="200" height="200"></canvas>
</body>
</html>