canvas 路径的绘制

canvas
	路径的绘制
	1、设置笔触点(落笔点)坐标; bi.moveTo(x,y);默认左上角顶点
	2、设置笔触点路径(可多条路径); bi.lineTo(x,y);
	3、设置笔触颜色; bi.strokeStyle='颜色'
	4、笔触绘制; bi.stroke();
	
	若路径是封闭图形
	5、设置填充颜色(只是设置不填充); bi.fillStyle='颜色';
	6、开始封闭图形颜色填充; bi.fill();  //若不封闭则会自动在起点和终点连线成封闭填充

	避免不同canvas相互影响,设置开始和结束
	7、开始图形绘制; bi.beginPath();
	8、结束图形绘制; bi.closePath();

代码示例:

<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		.canvas{
			border:solid 2px black;
		}
	
	
	</style>
</head>
<body>

	<canvas width="300px" height="200px" class='canvas'>您的浏览器不支持canvas标签,请变更支持canvas的浏览器</canvas>
	<script>
			var	canvas=document.querySelector(".canvas");
			var bi=canvas.getContext('2d');

			bi.strokeStyle='orange';
			bi.moveTo(10,10);
			bi.lineTo(70,70);
			bi.lineTo(20,20);
			bi.lineTo(35,70);
			bi.lineTo(70,70);
			// bi.stroke();
			bi.fillStyle='pink';
			bi.fill();

			bi.beginPath();
			bi.fillStyle='red';
			bi.fillRect(50,50,50,50);
			bi.closePath();
			
			// bi.fillStyle='blue';
			bi.fillRect(150,50,50,50);

	</script>
	
</body>

</html>
发布了305 篇原创文章 · 获赞 3 · 访问量 6630
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 游动-白 设计师: 上身试试

分享到微信朋友圈

×

扫一扫,手机浏览