canvas绘制三角形

主要还是利用画直线的方法

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();
	}

加上了边框和颜色

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

编程界小明哥

请博主喝瓶水,博主持续输出!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值