奥运五环(一键复制)

最新推荐文章于 2022-08-23 16:05:28 发布

△卡卡西

最新推荐文章于 2022-08-23 16:05:28 发布

阅读量1.2k

点赞数 1

分类专栏：前端文章标签： jquery

本文链接：https://blog.csdn.net/xujx1997/article/details/120335353

版权

前端专栏收录该内容

29 篇文章 0 订阅

订阅专栏

源码展示：

代码顺序展示：

成果展示：

源码展示：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>4-canvas-圆</title>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

    <style>

        #canvas{

            background-color: rgb(255, 255, 255);

            border: 10px solid rgb(58, 182, 231);

        }

    </style>

</head>

<body>

    <div id="app">

        <canvas id="canvas" width=500px height=200px></csnvas>

    </div>

</body>

<script>

    var canvas=$('#canvas')[0];

    var ctx=canvas.getContext('2d');

    ctx.beginPath();

        //解决一笔画问题  https://blog.csdn.net/hstjbj/article/details/103122694?ops_request_misc=&request_id=&biz_id=102&utm_term=canvas%E7%94%BB%E5%9C%86&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-6-103122694.nonecase&spm=1018.2226.3001.4187


// 绘制圆形 arc(x , y , r , sAngle , eAngle，counterclockwise)

// x     圆的中心的 x 坐标。

// y     圆的中心的 y 坐标。

// r        圆的半径。

// sAngle   起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。

// eAngle   结束角，以弧度计

// counterclockwise     可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。

    ctx.arc(100, 100, 60, 0, 2 * Math.PI);

    ctx.strokeStyle='red';

    //fill

    ctx.stroke();

    ctx.beginPath();

    ctx.arc(180,100,60,0,2*Math.PI);

    ctx.strokeStyle='green';

    ctx.stroke();

    ctx.beginPath();

    ctx.arc(260,100,60,0,2 * Math.PI);

    ctx.strokeStyle='blue';

    ctx.stroke();

    ctx.beginPath();

    ctx.arc(340,100,60,0,2* Math.PI);

    ctx.strokeStyle='rgb(230, 233, 37)';

    ctx.stroke();

    ctx.beginPath();

    ctx.arc(420,100,60,0,2* Math.PI);

    ctx.strokeStyle='rgb(178, 25, 216)';

    ctx.stroke();

</script>

</script>

</html>

代码顺序展示：

成果展示：

△卡卡西

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
奥运五环(一键复制)

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title&...
复制链接

扫一扫