您所在的位置：首页 > IT干货资料 > web前端 > 【Web前端基础知识】如何使用canvas绘制圆形

【Web前端基础知识】如何使用canvas绘制圆形

发布： Web前端培训
来源：Web前端干货资料
2020-04-15 14:52:40
阅读()
分享

手机端入口

四、设置绘制样式

设置绘制样式，需要使用fillStyle。fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式。

语法：context.fillStyle=color|gradient|pattern;

color：指示绘图填充色的 CSS 颜色值。默认值是 #000000;

gradient：用于填充绘图的渐变对象(线性或放射性);

pattern：用于填充绘图的 pattern 对象。

这里我们需要使用fillStyle来设置颜色。

五、填充图形

我们需要使用fill()方法来填充已经设置好的圆形。

fill() 方法填充当前的图像(路径)。默认颜色是黑色。

语法：

context.fill();

六、利用上面学会的内容我们先来绘制一个圆形

我们在宽500像素，高500像素，边框是1像素黑色实线的画布中，绘制一个圆心在x轴25像素，y轴25像素，半径是10像素，起始角是0，结束角是2*PI，逆时针，填充颜色是半透明的绿色的圆形。

具体代码如下：

>

<html>

<head>

    <meta charset="UTF-8">

    <title>使用canvas绘制圆形title>

    <style>

        #canvas{

            border:1px solid #000;

        }

    style>

head>

<body>

    <canvas width="500" height="500" id="canvas">canvas>

    <script>

        var myCanva  = document.getElementById("canvas");

        var ctx = myCanva.getContext("2d");



        ctx.beginPath();

        ctx.arc(25, 25, 10, 0, Math.PI * 2, true);

        ctx.closePath();

        ctx.fillStyle = 'rgba(0,255,0,0.25)';

        ctx.fill();

    script>

body>

html>

七、绘制文中一开始提到的图，只需要加一个循环就可以实现了。

具体代码如下：

>

<html>

<head>

    <meta charset="UTF-8">

    <title>使用canvas绘制圆形title>

    <style>

        #canvas{

            border:1px solid #000;

        }

    style>

head>

<body>

    <canvas width="500" height="500" id="canvas">canvas>

    <script>

        var myCanva  = document.getElementById("canvas");

        var ctx = myCanva.getContext("2d");



        for(var i = 0; i < 10; i++){

            ctx.beginPath();

            ctx.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);

            ctx.closePath();

            ctx.fillStyle = 'rgba(0,255,0,0.25)';

            ctx.fill();

        }

    script>

body>

html>