canvas来画求

520独花

已于 2022-11-08 19:48:02 修改

阅读量90

点赞数

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

于 2022-11-08 19:46:52 首次发布

本文链接：https://blog.csdn.net/qq_60568498/article/details/127756845

版权

canvas 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

结构图

下面了解一下画球的案例：

canvas来画球的基础
标签	<canvas></canvas>	需要画球的画布标签
开启画布	ctx.beginPath()	开启画布
画圆球的属性	ctx.arc(x,y,r,startAngle,endAngle,counterclockwise)	x,y是圆心的坐标、r是圆圈的半径， startAngle是角度的开启点， counterclockwise是角度的结束点
画布的填充颜色	ctx.fillstyle = 'red'	red表示红色
填充结束	ctx.fill();	如果不写fill() 属性的话填充颜色无效
着色	ctx.stroke();	如果不写着色不会显示小球
关闭画布	ctx.closePath	画球的画布的关闭画布的属

下面开始写代码啦

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>画圆</title>
    <style>
        canvas{
            border: 2px solid #aaaaaa;
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="con" width="500" height="500"></canvas>
    <script>
        <!--获取画布-->
        let canvas = document.getElementById('con');
        let ctx = canvas.getContext('2d')

    //    画圆
        /**
         *arc(x,y,radius,startAngle,endAngle,counterclockwise)
         * x,y是圆心的坐标
         * radius是圆圈的描边
         * startAngle是角度的衡量
         * counterclockwise 是圆圈的方向逆时针（true） 顺时针（false）
         */

        ctx.arc(250,250,200,0,Math.PI*2,false)
        //填充颜色
        ctx.fillStyle = 'yellow'
        ctx.fill();
        //描边大小
        ctx.lineWidth = 10;
        //描边颜色
        ctx.strokeStyle = 'red'
    //    如果没有着色也没看的见
        ctx.stroke()
        //    关闭路径
        ctx.closePath()
    </script>
</body>
</html>

我们的本次画小球的案例到此结束！谢谢给位的支持！