Home > Web Front-end > H5 Tutorial > body text

How to draw arcs and circles with canvas

php中世界最好的语言
Release: 2018-03-14 09:47:29
Original
3072 people have browsed it

This time I will show you how to use canvas to draw arcs and circles, and what are the precautions for using canvas to draw arcs and circles. The following is a practical case. Let’s take a look.

The html file is as follows:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8"/>
    <title>Canvas绘制弧线和圆</title></head><body><style>
    #canvas{        border: 1px solid #aaa;        text-align: center;
    }</style><canvas id="canvas" width="800" height="800">
    当用户浏览器不支持Canvas,请更换浏览器重试!</canvas></body></html>
Copy after login

To draw an arc or circle, you need to use the arc method. First, let us understand this method:
context.arc( x,y,r ,sAngle,eAngle,counterclockwise);
This method has 6 parameters:

x: x-axis coordinate of the center of the circle

y: y-axis coordinate of the center of the circle

r: Radius

sAngle: arc starting position

eAngle: arc ending position

counterclockwise: optional parameter, default is false, specifies whether it should be counterclockwise or clockwisedrawing. false = clockwise, true = counterclockwise.
First, let us start drawing an arc. The code is as follows:

var canvas=document.getElementById("canvas");var context=canvas.getContext("2d");
context.lineWidth=5;
context.strokeStyle="blue"context.arc(300,300,200,0,2*Math.PI);
context.stroke();//画一个空心弧线
 context.fillStyle="red"
 context.fill();//收尾直接相连为一个封闭图形,以红色填充该图形
Copy after login

After drawing an arc, let us try to draw multiple arcs so that they become a circle. Directly enter the code:

window.onload= function () {        var canvas=document.getElementById("canvas");        if(canvas.getContext("2d")){            var context=canvas.getContext("2d");
            context.lineWidth=5;
            context.strokeStyle="red";          
            for(var i=0;i<10;i++){//绘制十个弧线,收尾封闭,没有填充色
                context.beginPath();
                context.arc(50+i*100,60,40,0,2*Math.PI*(i+1)/10);
                context.closePath();//使弧线封闭,形成一个闭合图形
                context.stroke();
            }            for(var i=0;i<10;i++){//绘制十个弧线,收尾不封闭,没有填充色
                context.beginPath();
                context.arc(50+i*100,180,40,0,2*Math.PI*(i+1)/10);
                context.stroke();
            }            for(var i=0;i<10;i++){//绘制十个弧线,收尾封闭且填充为默认色
                context.beginPath();
                context.arc(50+i*100,300,40,0,2*Math.PI*(i+1)/10,true);//逆时针绘制
                context.fill();
            }
        }else {
            alert("不支持canvas,请更换浏览器!")
        }
    };
Copy after login

How to draw arcs and circles with canvas

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

What does class="no-js" mean

How to add events to button in React

Decimal problem with input type=number

The above is the detailed content of How to draw arcs and circles with canvas. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template