canvas绘图画出了的美团LOGO@慕课网原创_慕课网

接下来是用HTML新标签canvas绘图画出了的美团LOGO。

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">
    <title>canvas练习</title>
</head>  
<body>  
    <canvas id="myfirstcanvas" width="300" height="300">
    </canvas>
    <script type="text/javascript">
    var canvas=document.getElementById('myfirstcanvas');
    canvas.style.backgroundColor="#000000";
    var context=canvas.getContext('2d');
    function drawRoundedRect(x,y,w,h,r,bgcolor){
        context.beginPath();
        context.moveTo(x+r,y);
        context.fillStyle = bgcolor;
        context.arcTo(x+w,y,x+w,y+h,r);
        context.arcTo(x+w,y+h,x,y+h,r);
        context.arcTo(x,y+h,x,y,r);
        context.arcTo(x,y,x+w,y,r);     
        context.closePath();
        context.fill();
    }
    drawRoundedRect(20,20,256,256,15,"#ffffff");
    context.beginPath();
    context.fillStyle="#22C6AB";
    context.arc(148, 148, 100, 0, Math.PI * 2,true);
    context.fill();
    context.beginPath();
    context.font = "60px Arial";
        //设置字体填充颜色
    context.fillStyle = "#ffffff";
    context.fillText("美团", 88, 163);
    </script>
</body>  
</html>