Home > Article > Web Front-end > Canvas drawing Olympic rings code sharing

Canvas drawing Olympic rings code sharing

巴扎黑Original: 2017-07-18 10:52:233861browse

Running effect:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas id="drawing" width="800" height="600">A drawing of someing!</canvas>
    <script type="text/javascript">var drawing = document.getElementById('drawing');if(drawing.getContext) {//绘制奥运五环，画圆var context = drawing.getContext('2d');
            context.lineWidth = 7;
            context.strokeStyle = '#0180C3';
            context.beginPath();
            context.arc(70, 70, 40, 0, 2*Math.PI, false);
            context.stroke();
            context.strokeStyle = '#000';
            context.beginPath();
            context.arc(160, 70, 40, 0, 2*Math.PI, false);
            context.stroke();
            context.strokeStyle = '#BF0628';
            context.beginPath();
            context.arc(250, 70, 40, 0, 2*Math.PI, false);
            context.stroke();
            context.strokeStyle = '#EBC41F';
            context.beginPath();
            context.arc(115, 110, 40, 0, 2*Math.PI, false);
            context.stroke();
            context.strokeStyle = '#198E4A';
            context.beginPath();
            context.arc(205, 110, 40, 0, 2*Math.PI, false);
            context.stroke();//环环相扣，画弧（实现相关圆弧的覆盖）context.strokeStyle = '#0180C3';
            context.beginPath();
            context.arc(70, 70, 40, 1.9*Math.PI, 2.1*Math.PI, false);
            context.stroke();
            context.strokeStyle = '#000';
            context.beginPath();
            context.arc(160, 70, 40, 1.9*Math.PI, 2.1*Math.PI, false);
            context.stroke();
            context.beginPath();
            context.arc(160, 70, 40, 0.5*Math.PI, 0.7*Math.PI, false);
            context.stroke();
            context.strokeStyle = '#BF0628';
            context.beginPath();
            context.arc(250, 70, 40, 0.5*Math.PI, 0.7*Math.PI, false);
            context.stroke();
        }</script>
</body>
</html>

The above is the detailed content of Canvas drawing Olympic rings code sharing. For more information, please follow other related articles on the PHP Chinese website!

Statement：

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

Previous article：How to call camera code sharing on h5 pageNext article：How to call camera code sharing on h5 page

See more

Canvas drawing Olympic rings code sharing

Related articles