渐变
<!DOCTYPE html>
<html>
<head><meta charset='utf-8'></head>
<body>
<!-- 1.配置标签 canvas -->
<canvas id='a_canvas' width='300' height='300'></canvas>
<script type="text/javascript">
// 2.获取canvas duix
var canvas = document.getElementById('a_canvas');
// 3.由canvas获取 绘图的上下文
var ctx =canvas.getContext('2d');
// 4.使用属性绘图
ctx.fillStyle = 'rgb(255,0,0)';
ctx.fillRect(50,50,200,200);
ctx.fillStyle = 'rgba(0,0,255,0.5)';
ctx.fillRect(100,100,200,200);
</script>
</body>
</html>
填充三角形
<!DOCTYPE html>
<html>
<head><meta charset='utf-8'></head>
<body>
<!-- 1.配置标签 canvas -->
<canvas id='a_canvas' width='300' height='300'></canvas>
<script type="text/javascript">
// 2.获取canvas duix
var canvas = document.getElementById('a_canvas');
// 3.由canvas获取 绘图的上下文
var ctx =canvas.getContext('2d');
// 4.使用属性绘图
//开始绘制
ctx.beginPath();
// 绘图的基点
ctx.moveTo(0,0);
//绘制从前一次到这个点的直线
ctx.lineTo(0,290);
ctx.lineTo(290,290);
//结束绘制
ctx.closePath();
// 进行绘图处理
ctx.fillStyle = 'rgba(200,0,0,0.5)';
// 填充路径
ctx.fill();
</script>
</body>
</html>
