<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>canvas描边样式-lineJoin</title>
<style>
html{height: 100%;overflow: hidden;}
body{height: 100%;margin: 0;}
#test{
background: antiquewhite;
}
</style>
</head>
<body>
<canvas id="test"></canvas>
<script>
const cvs=document.getElementById('test');
cvs.width=window.innerWidth;
cvs.height=window.innerHeight;
const ctx=canvas.getContext('2d');
/*strokeStyle:描边的着色样式*/
ctx.strokeStyle='maroon';
/*lineWidth:描边宽*/
ctx.lineWidth=60;
/*lineJoin 拐角类型
canvas描边样式-lineJoin-拐角类型
最新推荐文章于 2024-04-10 16:05:41 发布
本文深入探讨了HTML5 Canvas中的lineJoin属性,它用于定义线条连接处的拐角样式,包括miter(尖角)、round(圆角)和bevel(斜接)。了解这些设置如何影响图形的外观,以及在不同场景下的应用选择。
摘要由CSDN通过智能技术生成