html5 canvas学习--启用不同的线型

最新推荐文章于 2021-07-16 09:51:09 发布

xiaopengyaonixi

最新推荐文章于 2021-07-16 09:51:09 发布

阅读量520

点赞数

分类专栏： Html5

Html5 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

1,lineWidth(设置线条的粗细)

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<canvas id="myCanvas" width="300" height="200"></canvas>
	<script type="text/javascript">
		function draw(){
			var ctx = document.getElementById("myCanvas").getContext("2d");
			for(var i = 0;i<12;i++){
				ctx.strokeStyle = "red";
				ctx.lineWidth=1+i;
				ctx.beginPath();
				ctx.moveTo(5,5+i*14);
				ctx.lineTo(140,5+i*14);
				ctx.stroke();
			}			
		}

		window.onload = function(){
			draw();
		}
	</script>
</body>
</html>

运行的结果如下如：

2.lineCap(设置端点样式)

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<canvas id="myCanvas" width="300" height="200"></canvas>
	<script type="text/javascript">
		function draw(){
			var ctx = document.getElementById("myCanvas").getContext("2d");
			var lineCap = ["butt","round","square"];
			// 绘制参考线
			ctx.strokeStyle="red";
			ctx.beginPath();
			ctx.moveTo(10,10);
			ctx.lineTo(10,150);
			ctx.moveTo(150,10);
			ctx.lineTo(150,150);
			ctx.stroke();
			// 绘制直线段
			ctx.strokeStyle="blue";
			for(var i = 0;i<lineCap.length;i++){
				ctx.lineWidth = 20;
				ctx.lineCap=lineCap[i];
				ctx.beginPath();
				ctx.moveTo(10,30+i*50);
				ctx.lineTo(150,30+i*50);
				ctx.stroke();
			}
		}
		window.onload = function(){
			draw();
		}		
	</script>
</body>
</html>

运行的结果如下：

3.lineJoin(设置连接处样式)

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>	
	<canvas id="myCanvas" width="600" height="300"></canvas>
	<script type="text/javascript">
		function draw(){
			var ctx = document.getElementById("myCanvas").getContext("2d");
			var lineJoin = ["round","bevel","miter"];
			ctx.strokeStyle = "blue";
			for(var i = 0;i<lineJoin.length;i++){
				ctx.lineWidth = 25;
				ctx.lineJoin = lineJoin[i];
				ctx.beginPath();
				ctx.moveTo(10+i*150,30);
				ctx.lineTo(100+i*150,30);
				ctx.lineTo(100+i*150,100);
				ctx.stroke();
			}
		}
		window.onload = function(){
			draw();
		}
	</script>
</body>
</html>

运行的结果如下：

4.miterLimit(设置绘制交点的方式)

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<canvas id="myCanvas" width="1600" height="300"></canvas>
	<script type="text/javascript">
		function draw(){
			var ctx = document.getElementById("myCanvas").getContext("2d");
			for(var i = 0;i<10;i++){
				ctx.strokeStyle = "blue";
				ctx.lineWidth = 10;
				ctx.lineJoin = "miter";
				ctx.miterLimit = i*10;
				ctx.beginPath();
				ctx.moveTo(10,i*30);
				ctx.lineTo(100,i*30);
				ctx.lineTo(10,33*i);
				ctx.stroke();
			}
		}
		window.onload = function(){
			draw();
		}
	</script>
</body>
</html>

运行结果：

xiaopengyaonixi

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html5 canvas学习--启用不同的线型

1,lineWidth(设置线条的粗细) function draw(){ var ctx = document.getElementById("myCanvas").getContext("2d"); for(var i = 0;i<12;i++){ ctx.strokeStyle = "red"; ctx.lineWidth=1+i;
复制链接

扫一扫