<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<title>红包</title>
<style>
body{text-align:center;padding-top:3em;}
</style>
</head>
<body>
<canvas width="650" height="478"></canvas>
<script>
(function(){
var cvs=document.querySelector("canvas"),
g=cvs.getContext("2d");
g.lineWidth=2;
//红包
g.beginPath();
g.fillStyle = '#CC0000';
g.fillRect(30,30,330,640);
g.fillStyle = 'yellow';
g.closePath();
g.beginPath();
g.fillStyle = 'red';
g.fillRect(30,30,330,70);
g.closePath();
g.beginPath();
g.fillStyle = 'red';
g.moveTo(30,100);
g.lineTo(190,130);
g.lineTo(360,100);
g.fill();
g.closePath();
g.beginPath();
g.arc(190,130,50,0,Math.PI*2,true);
g.fillStyle = 'yellow';
g.closePath();
g.fill();
})();
</script>
</body>
</html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
<title>红包</title>
<style>
body{text-align:center;padding-top:3em;}
</style>
</head>
<body>
<canvas width="650" height="478"></canvas>
<script>
(function(){
var cvs=document.querySelector("canvas"),
g=cvs.getContext("2d");
g.lineWidth=2;
//红包
g.beginPath();
g.fillStyle = '#CC0000';
g.fillRect(30,30,330,640);
g.fillStyle = 'yellow';
g.closePath();
g.beginPath();
g.fillStyle = 'red';
g.fillRect(30,30,330,70);
g.closePath();
g.beginPath();
g.fillStyle = 'red';
g.moveTo(30,100);
g.lineTo(190,130);
g.lineTo(360,100);
g.fill();
g.closePath();
g.beginPath();
g.arc(190,130,50,0,Math.PI*2,true);
g.fillStyle = 'yellow';
g.closePath();
g.fill();
})();
</script>
</body>
</html>