HTML5——Canvas_04之【绘制渐变图形】

最新推荐文章于 2025-05-21 22:29:00 发布

Superstatus

最新推荐文章于 2025-05-21 22:29:00 发布

阅读量265

点赞数

CC 4.0 BY-SA版权

分类专栏： Html5 Canvas 文章标签： Canvas

本文链接：https://blog.youkuaiyun.com/Superstatus/article/details/80566095

Html5 同时被 2 个专栏收录

15 篇文章

订阅专栏

Canvas

9 篇文章

订阅专栏

本文介绍了一种使用HTML5 Canvas API创建渐变图形的方法。通过JavaScript编程实现从黄色到青色的矩形渐变效果，以及从蓝色透明度0.5到红色透明度0.5的圆形渐变图案。该示例展示了如何利用createLinearGradient方法设置渐变填充，并通过fillRect和arc方法绘制不同形状。

摘要生成于 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);
           var context=canvas.getContext("2d");
           var g1=context.createLinearGradient(0,0,0,300);
            g1.addColorStop(0,"rgb(255,255,0)");//开始的颜色
            g1.addColorStop(1,"rgb(0,255,255)");//结束的颜色
            content.fillStyle=g1;//填充颜色
            content.fillRect(0,0,500,500);
            //以上绘制矩形 渐变
            //以下绘制圆形渐变
            var g2=context.createLinearGradient(0,0,300,0);
            g2.addColorStop(0,"rgba(0,0,255,0.5)");
            g2.addColorStop(1,"rgba(255,0,0,0.5)");
            for(var i=0;i<10;i++){
                content.beginPath();
                context.fillStyle=g2;
                context.arc(i*25,i*25,i*10,0,Math.PI*2,true);//圆形
                context.close();
                context.fill();

            }

        }
    </script>
    
    
</head>

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

</html>