CanvasRenderingContext2D.lineCap属性用于指定线段的两端以何种方式结束。
CanvasRenderingContext2D对象是HTML5 Canvas中的核心对象。
CanvasRenderingContext2D.lineCap属性的取值(字符串)有以下几种：
| butt | 默认值没有线帽，实际长度与宽度和设置的值一致。 |
| round | 半圆形线帽。以半圆形绘制线段两端的线帽，半圆的直径等于线条的宽度。 |
| square | 矩形线帽。以矩形绘制线段两端的线帽，两侧扩展的宽度各等于线条宽度的一半。 |
这个属性只有在线条比较宽的时候才有效(即lineWidth属性值较大)。上述语言描述可能让人难以理解，在这里，我们以具体的示例来比较lineCap属性设为不同值时的显示效果。
lineCap属性的3种设置效果的比较
此外，你也可以直接使用产生上述图片效果的html代码在支持HTML5的浏览器上运行，以查看本地的实际效果。
<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title>比较lineCap属性的不同设置效果</title>
</head>
<body>
<!-- 添加canvas标签，并加上红色边框以便于在页面上查看效果 -->
<canvasid="myCanvas"width="400px"height="300px"style="border:1px solid red;">
您的浏览器不支持canvas标签。
</canvas>
<scripttype="text/javascript">
//获取Canvas对象(画布)
var canvas = document.getElementById("myCanvas");
//获取对应的CanvasRenderingContext2D对象(画笔)
var ctx = canvas.getContext("2d");
//注意，Canvas的坐标系是：Canvas画布的左上角为原点(0,0)，向右为横坐标，向下为纵坐标，单位是像素(px)。
//绘制一条lineCap为butt的线段
ctx.beginPath();
ctx.moveTo(20,50);
ctx.lineTo(100,50);
ctx.strokeStyle ="#00f";
ctx.lineWidth =20;
ctx.lineCap ="butt";
ctx.stroke();
ctx.closePath();
//绘制一条lineCap为round的线段
ctx.beginPath();
ctx.moveTo(20,100);
ctx.lineTo(100,100);
ctx.strokeStyle ="#00f";
ctx.lineWidth =20;
ctx.lineCap ="round";
ctx.stroke();
ctx.closePath();
//绘制一条lineCap为square的线段
ctx.beginPath();
ctx.moveTo(20,150);
ctx.lineTo(100,150);
ctx.strokeStyle ="#00f";
ctx.lineWidth =20;
ctx.lineCap ="square";
ctx.stroke();
ctx.closePath();
</script>
</body>
</html>
.
相关推荐
3. 使用`CanvasRenderingContext2D`对象提供的方法进行图形绘制，比如绘制线条、填充形状、设置颜色等。 线条的绘制是`canvas`绘图的基础，涉及到的关键属性有`lineWidth`、`lineCap`、`lineJoin`和`miterLimit`。 ...
若需要在canvas上进行绘制，首先需要通过JavaScript中的document.getElementById方法获取到canvas元素，然后使用getContext("2d")方法得到一个CanvasRenderingContext2D对象，该对象即为“画笔”，用于定义绘图的...
- **获取绘图上下文**: 使用`getElementById`获取canvas元素，然后调用`getContext("2d")`获取CanvasRenderingContext2D对象，这是在canvas上绘图的基础。 - **设置绘制起点**: 使用`moveTo(x, y)`移动画笔到指定...
这个“HTML5 Canvas核心技术图形、动画与游戏开发完整源码”压缩包可能包含了多个示例项目，用于帮助学习者深入理解Canvas API的使用方法。 Canvas API是HTML5的一个重要组成部分，它提供了一组JavaScript接口，让...
2. **Context对象**: Canvas API的核心是`CanvasRenderingContext2D`对象，它是用于绘图的主要接口。一旦获取到Canvas元素，我们就可以调用`getContext('2d')`来获取这个对象，然后使用它的方法进行绘制。 3. **...
`CanvasRenderingContext2D`对象提供了一系列绘图方法，如`fillRect()`（填充矩形）、`strokeRect()`（描边矩形）、`beginPath()`（开始一个新的路径）、`moveTo()`（移动到指定位置）、`lineTo()`（绘制线段）、`...
`image`可以是`<img>`元素或`CanvasRenderingContext2D`的`createImageBitmap`方法返回的位图。 7. **图形变换**：`translate(x, y)`、`rotate(angle)`、`scale(x, y)`和`transform(a, b, c, d, e, f)`用于平移、...