主要还是利用画直线的方法
lineTo moveTo
实例1
window.onload=function(){
var canvas = document.getElementById('canvas');
canvas.width='300';
canvas.height='300';
var ctx = canvas.getContext('2d');
//先将笔尖移动到0,0处
ctx.moveTo(100,100);
//先将笔滑到200,200处
ctx.lineTo(200,200);
//再将笔滑到150,220处
ctx.lineTo(150,230);
//再将笔滑到100,100处 形成闭合的三角形
ctx.lineTo(100,100);
//执行绘画的动作,如果没有执行stroke函数不会有任何的效果
ctx.stroke();
}
画了一个闭合的三角形
实例2
window.onload=function(){
var canvas = document.getElementById('canvas');
canvas.width='300';
canvas.height='300';
var ctx = canvas.getContext('2d');
//先将笔尖移动到0,0处
ctx.moveTo(100,100);
//先将笔滑到200,200处
ctx.lineTo(200,200);
//再将笔滑到150,220处
ctx.lineTo(150,230);
//再将笔滑到100,100处 形成闭合的三角形
ctx.lineTo(100,100);
//填充这个图形
ctx.fill();
}
画出一个实心的三角形
注意:fill函数会自动闭合图形,也就是最后一个ctx.lineTo(100,100); 可以不写
window.onload=function(){
var canvas = document.getElementById('canvas');
canvas.width='300';
canvas.height='300';
var ctx = canvas.getContext('2d');
//先将笔尖移动到0,0处
ctx.moveTo(100,100);
//先将笔滑到200,200处
ctx.lineTo(200,200);
//再将笔滑到150,220处
ctx.lineTo(150,230);
//再将笔滑到100,100处 形成闭合的三角形
//ctx.lineTo(100,100);
//填充这个图形
ctx.fill();
}
注销了这个代码依然是可以的
实例3
window.onload=function(){
var canvas = document.getElementById('canvas');
canvas.width='300';
canvas.height='300';
var ctx = canvas.getContext('2d');
//先将笔尖移动到0,0处
ctx.moveTo(100,100);
//先将笔滑到200,200处
ctx.lineTo(200,200);
//再将笔滑到150,220处
ctx.lineTo(150,230);
//再将笔滑到100,100处 形成闭合的三角形
//ctx.lineTo(100,100);
ctx.fillStyle='green';//改变填充颜色
//填充这个图形
ctx.fill();
}
改变填充的颜色
实例4
window.onload=function(){
var canvas = document.getElementById('canvas');
canvas.width='300';
canvas.height='300';
var ctx = canvas.getContext('2d');
//先将笔尖移动到0,0处
ctx.moveTo(100,100);
//先将笔滑到200,200处
ctx.lineTo(200,200);
//再将笔滑到150,220处
ctx.lineTo(150,230);
//再将笔滑到100,100处 形成闭合的三角形
ctx.lineTo(100,100);
ctx.fillStyle='green';//改变填充颜色
//填充这个图形
ctx.fill();
ctx.lineWidth=5;
ctx.strokeStyle='red';
//执行绘画
ctx.stroke();
}
加上了边框和颜色