html canvas 化一个彩虹

最新推荐文章于 2025-06-05 14:57:34 发布

debby004

最新推荐文章于 2025-06-05 14:57:34 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： html 文章标签： html canvas

本文链接：https://blog.youkuaiyun.com/qq_41370724/article/details/83574914

html 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种使用HTML5 Canvas元素绘制桥洞的方法。通过JavaScript编程，实现了动态调整画布大小，并利用循环绘制一系列半圆弧来模拟桥洞的形状。此教程适合初学者了解Canvas的基本用法及图形绘制技巧。

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

</<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
123
<canvas id="canvas">该浏览器不支持canvas，请更换浏览器后查看</canvas>
<script>
    window.onload=function () {
        var canvas = document.getElementById('canvas');
        var a = 1000;
        var a2 = a*2;
        var aa2 = a/2;
        canvas.width=a2;
        canvas.height=a;
        var sc = canvas.getContext("2d");
        sc.lineWidth = 5;
        sc.strokeStyle = "#00ffff";
        for(var i = 300;i<=aa2;i+=100){

            sc.beginPath();
            sc.arc(a,a,i,0,0.5*Math.PI,true);
            sc.stroke();

        }

    }
</script>
</body>
</html>