美文网首页
canvas实例宝马图标

canvas实例宝马图标

作者: 最帅的坏兔子 | 来源:发表于2018-12-15 19:29 被阅读8次
    <!DOCTYPE html>
    <html>
    <head>
        <title>宝马图标</title>
    </head>
    <body>
        <canvas id="canvas"></canvas>
    </body>
    <script type="text/javascript">
        window.onload = function(){
            var canvas = document.getElementById('canvas');
            canvas.width = 600;
            canvas.height = 600;
            var ctx = canvas.getContext('2d');
            ctx.beginPath();
            ctx.fillStyle = 'white';
            ctx.fillRect(0,0,600,600);
            ctx.beginPath();
            ctx.arc(300,300,300,0,2*Math.PI);
            ctx.stroke();
            ctx.fillStyle = 'black';
            ctx.beginPath();
            ctx.arc(300,300,295,0,2*Math.PI);
            ctx.fill();
            ctx.beginPath();
            ctx.arc(300,300,200,0,2*Math.PI);
            ctx.fillStyle = 'white';
            ctx.fill();
            ctx.beginPath();
            ctx.arc(300,300,195,0,2*Math.PI);
            ctx.stroke();
            ctx.fillStyle = 'blue';
            ctx.beginPath();
            ctx.arc(300,300,195,0,Math.PI/2);
            ctx.lineTo(300,300);
            ctx.closePath();
            ctx.fill();
            ctx.arc(300,300,195,Math.PI,Math.PI*(3/2));
            ctx.lineTo(300,300);
            ctx.closePath();
            ctx.fill();
        }
    </script>
    </html>
    
    宝马图标.png

    相关文章

      网友评论

          本文标题:canvas实例宝马图标

          本文链接:https://www.haomeiwen.com/subject/qywahqtx.html