html5 canvas 画阿迪达斯logo,canvas绘图画出了的美团LOGO

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

canvas练习

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);