如果绘制路径不是封闭的，这个方法会先将图形闭合起来，然后再填充输出。
注意：所有的 fill 图形，如 fillRect 等，都是立刻向屏幕输出的，他们没有绘制路径这个概念
下面的代码将绘制一个简单的填充三角形。
注意：绘制三角形的时候，默认的背景色为白色，默认的前景色为黑色。
设置画布
<canvas id=”test2″ width=”200″ height=”200″ style=”border:1px solid #c3c3c3;”>你的浏览器不支持 <canvas>标签，请使用 Chrome 浏览器 或者 FireFox 浏览器</canvas>
<input type=”button” value=”画三角” onclick=”drawTri();”/>
<input type=”button” value=”清除” onclick=”clearTri();”/>
绘制三角形
<script type=”text/javascript”>
function drawTri(){
var canvas = document.getElementById(‘test2’);
var ctx=canvas.getContext(“2d”);
ctx.beginPath();
ctx.moveTo(75,50);
ctx.lineTo(100,75);
ctx.lineTo(100,25);
ctx.fill();
}
function clearTri(){
var canvas = document.getElementById(‘test2’);
var ctx=canvas.getContext(“2d”);
ctx.clearRect(0,0,200,200);
}
</script>
你的浏览器不支持 <canvas>标签，请使用 Chrome 浏览器 或者 FireFox 浏览器
你的浏览器不支持 <canvas>标签，请使用 Chrome 浏览器 或者 FireFox 浏览器
六、半个单位的坐标
里还要回过头来说说坐标，下面的代码是在画布上绘制网格，点击“画网格”按钮可以看见效果
设置画布
<canvas id=”test2″ width=”200″ height=”200″ style=”border:1px solid #c3c3c3;”>你的浏览器不支持 <canvas>标签，请使用 Chrome 浏览器 或者 FireFox 浏览器</canvas>
<input type=”button” value=”画三角” onclick=”drawTri();”/>
<input type=”button” value=”清除” onclick=”clearTri();”/>
绘制三角形
<script type=”text/javascript”>
function drawTri(){
var canvas = document.getElementById(‘test2’);
var ctx=canvas.getContext(“2d”);
ctx.beginPath();
ctx.moveTo(75,50);
ctx.lineTo(100,75);
ctx.lineTo(100,25);
ctx.fill();
}
function clearTri(){
var canvas = document.getElementById(‘test2’);
var ctx=canvas.getContext(“2d”);
ctx.clearRect(0,0,200,200);
}
</script>
你的浏览器不支持 <canvas>标签，请使用 Chrome 浏览器 或者 FireFox 浏览器
