接下来是用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> 
随时随地看视频
