漸變
<!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>
