HTML5标签绘制渐变图形的一些总结

最新推荐文章于 2021-07-01 09:38:59 发布

老施同学

最新推荐文章于 2021-07-01 09:38:59 发布

阅读量635

点赞数

本文链接：https://blog.csdn.net/guofengs/article/details/51429733

版权

个人总结专栏收录该内容

34 篇文章 0 订阅

订阅专栏

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>practice</title>
    <script>
        function createArcile(id) {
            var canvas = document.getElementById(id);
            var ctx = canvas.getContext("2d");
            //ctx.fillStyle = "blue";
            ctx.beginPath();
            ctx.arc(75,75,50,0,Math.PI*2,true);
            ctx.stroke();
        }
        function LinerGradient(id) {
            var canvas = document.getElementById(id);
            var ctx = canvas.getContext('2d');
            var g1 = ctx.createLinearGradient(0,0,0,300);
            g1.addColorStop(0,"#FFA07A");
            g1.addColorStop(1,"#FFA500");
            ctx.fillStyle = g1;
            ctx.fillRect(0,0,400,400);
            var g2 = ctx.createLinearGradient(0,0,300,0);
            g2.addColorStop(0,"rgb(255,0,255)");
            g2.addColorStop(1,"rgb(0,0,255)");
            for(var i=0;i<10;i++){
                ctx.beginPath();
                ctx.fillStyle = g2;
                ctx.arc(i*25,i*25,i*10,0,Math.PI*2,true);
                ctx.closePath();
                ctx.stroke();
                ctx.fill();
            }
        }
        function path(id) {
            var canvas = document.getElementById(id);
            var ctx = canvas.getContext('2d');
            ctx.fillStyle = "blue";
            ctx.fillRect(0,0,400,400);
            for(var i=0;i<10;i++){
                ctx.beginPath();
                ctx.fillStyle = "red";
                ctx.arc(i*25,i*25,i*10,0,Math.PI*2,true);
                ctx.closePath();
                ctx.stroke();
                ctx.fill();
            }
        }
        function RadialGradient(id) {
            var canvas = document.getElementById(id);
            var ctx = canvas.getContext('2d');
            var g1 = ctx.createRadialGradient(200,200,50,200,200,30);
            g1.addColorStop(0,"rgb(255,255,0)");
            g1.addColorStop(1,"rgb(0,255,255)");
            ctx.fillStyle = g1;
            ctx.fillRect(0,0,400,400);
            ctx.fill();
            ctx.stroke();
        }
    </script>
</head>
<body οnlοad="RadialGradient('canvas')">
    <canvas id="canvas" width="400" height="400"></canvas>
</body>
</html>

尝试了一下最后的结束语句：ctx.stroke(); ctx.fill();ctx.closePath()

目前个人认为：stroke是产生一条闭合的实线，颜色为黑色，无填充颜色；

fill是填充颜色

closePath在前面有beginPath是使用，目前阶段不熟悉beginPath 和ClosePath的用处；

老施同学

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML5标签绘制渐变图形的一些总结

代码如下： practice function createArcile(id) { var canvas = document.getElementById(id); var ctx = canvas.getContext("2d"); //ctx.fillStyle =
复制链接

扫一扫