html中lineJoin示例

最新推荐文章于 2023-01-16 15:18:53 发布

傲世阿龍

最新推荐文章于 2023-01-16 15:18:53 发布

阅读量727

点赞数

分类专栏： HTML

本文链接：https://blog.csdn.net/u010383937/article/details/72777937

版权

HTML 专栏收录该内容

115 篇文章 5 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>lineJoin</title>
<script>
function draw(id)
{
	var context=document.getElementById('canvas').getContext('2d');
	var lineJoin=['round','bevel','miter'];
	context.strokeStyle='#09f';
	context.linewidth='10';
	for(var i=0;i<lineJoin.length;i++)
	{
		context.lineJoin=lineJoin[i];
		context.beginPath();
		context.moveTo(-5,5+i*40);
		context.lineTo(35,45+i*40);
		context.lineTo(75,5+i*40);
		context.lineTo(115,45+i*40);
		context.lineTo(155,5+i*40);
		context.stroke();
	}
}
</script>
</head>
<body οnlοad="draw('canvas');">
<h1>lineJoin</h1>
<canvas id="canvas" width="400" height="300"/>
</body>
</html>