最後的效果:
源碼:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas</title>
</head>
<body>
<canvas id="bry" width="400" height="200"></canvas>
<script>
var bg = document.getElementById('bry');
var ctx = bg.getContext('2d');
ctx.beginPath();
ctx.moveTo(0,60);
ctx.lineTo(100,60);
ctx.lineTo(100,40);
ctx.lineTo(130,75);
ctx.lineTo(100,110);
ctx.lineTo(100,90);
ctx.lineTo(0,90);
var grd = ctx.createLinearGradient(0,0,100,0);
grd.addColorStop(0,'#fff');
grd.addColorStop(1,'#4ce8b2');
ctx.fillStyle = grd;
ctx.fill();
ctx.strokeStyle = '#000';
ctx.font = '14px 宋體';
ctx.strokeText('brytest',20,80);
</script>
</body>
</html>