使用Canvas(画布)实现五环

秃头小宋s

已于 2023-08-31 11:52:20 修改

阅读量79

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 html5

于 2023-08-31 11:44:56 首次发布

本文链接：https://blog.csdn.net/m0_73634593/article/details/132599947

版权

JavaScript 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

<div>
    <canvas id="cvs" width="1000" height="1000">
         您的浏览器暂不支持画布
    </canvas>
</div>

<script>
        // 获取画布
        let ct = document.getElementById('cvs').getContext('2d');
        drawCircle();
        // 随机颜色函数
        function rColor(){
            let r = Math.floor(Math.random()*256);
            let g = Math.floor(Math.random()*256);
            let b = Math.floor(Math.random()*256);
            return 'rgb('+r+','+g+','+b+')';
        }
        // 调用画圆函数并传入5个圆的参数
        function drawCircle(lineWidth){
            ct.lineWidth = 5;
            circle(100,100);
            circle(220,100);
            circle(320,100);
            circle(160,200);
            circle(280,200);
        }
        // 画圆函数
        function circle(x,y){
            ct.beginPath();
            ct.arc(x,y,70,0,2*Math.PI,false);
            ct.strokeStyle = rColor();
            ct.stroke();
            ct.closePath();
        }
</script>