HTML5——Canvas_05之【绘制径向渐变】

最新推荐文章于 2025-05-13 07:17:31 发布

原创最新推荐文章于 2025-05-13 07:17:31 发布 · 447 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Canvas

Html5 同时被 2 个专栏收录

15 篇文章

订阅专栏

Canvas

9 篇文章

订阅专栏

本文介绍了一种使用HTML5 Canvas API实现径向渐变的方法。通过JavaScript代码创建径向渐变并将其应用到画布上，实现了从黄色到品红色再到青色的渐变效果。该教程适用于希望了解如何在网页中加入渐变背景的前端开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>绘制径向渐变</title>
    
    <script>
        function draw(id){
            var canvas=document.getElementById(id);
            if(canvas==null)
            {
                return false;
            }
            var context=canvas.getContext("2d");
            //createRadiaGradient径向渐变
            var g1=context.createRadiaGradient(400,0,0,400,0,400);
            g1.addColorStop(0.1,"rgb(255,255,0)");
            g1.addColorStop(0.3,"rgb(255,0,255)");
            g1.addColorStop(1,"rgb(0,255,255)");
            content.fillStyle=g1;
            context.fillRect(0,0,500,500);
            
            context.closePath();
            context.fill();
            context.stroken();



        }
    </script>
    
    
</head>

<body onload="draw("canvas");">
   <canvas id="canvas" width="500" height="500"></canvas>
</body>

</html>