当前位置：网站首页>《canvas》之第4章线条操作

《canvas》之第4章线条操作

2022-06-24 06:44:00 【yxqq378287007】

《canvas》之第4章线条操作

第4章线条操作

第4章线条操作

4.1 线条操作简介

线条操作属性

属性	说明
lineWidth	定义线条宽度
lineCap	定义线帽样式
lineJoin	定义两个线条交接处样式

线条操作方法

方法	说明
setLineDash()	定义线条的虚实样式

4.2 lineWidth属性

cxt.lineWidth = 整数;

默认1，默认单位px。

线条宽度

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript"> function $$(id) {
       return document.getElementById(id); } window.onload = function () {
       var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); //lineWidth值为5 //cxt.beginPath(); cxt.moveTo(20, 20); cxt.lineTo(180, 20); cxt.lineWidth = 5; cxt.stroke(); //lineWidth值为10 cxt.beginPath(); cxt.moveTo(20, 70); cxt.lineTo(180, 70); cxt.lineWidth = 10; cxt.stroke(); //lineWidth值为15 cxt.beginPath(); cxt.moveTo(20, 120); cxt.lineTo(180, 120); cxt.lineWidth = 15; cxt.stroke(); } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray"></canvas>
</body>
</html>

曲线宽度

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript"> function $$(id) {
       return document.getElementById(id); } window.onload = function () {
       var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); cxt.arc(70, 70, 50, 0, -90 * Math.PI / 180, false); cxt.lineWidth = 5; cxt.stroke(); } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>

假设线条宽度lineWidth，strokeRect()方法绘制矩形实际宽度为width+lineWidth，实际高度为height+lineWidth，arc()方法绘制圆形的实际半径为radius+lineWidth。

4.3 lineCap属性

定义线条开始处和结尾处的线帽样式。

cxt.lineCap = "属性值";

属性值	说明
butt	无线帽，默认
round	圆形线帽，半径为线宽一半
square	正方形线帽，宽度为线宽一半

线帽直线

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript"> function $$(id) {
       return document.getElementById(id); } window.onload = function () {
       var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); cxt.lineWidth = 16; //lineCap值为默认值（butt） //cxt.beginPath(); cxt.moveTo(20, 20); cxt.lineTo(180, 20); //cxt.lineCap = "butt"; cxt.stroke(); //lineCap值改为round cxt.beginPath(); cxt.moveTo(20, 70); cxt.lineTo(180, 70); cxt.lineCap = "round"; cxt.stroke(); //lineCap值改为square cxt.beginPath(); cxt.moveTo(20, 120); cxt.lineTo(180, 120); cxt.lineCap = "square"; cxt.stroke(); } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray"></canvas>
</body>
</html>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript"> function $$(id) {
       return document.getElementById(id); } window.onload = function () {
       var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); cxt.moveTo(50, 50); cxt.lineTo(100, 50); cxt.lineTo(50, 100); cxt.lineTo(100, 100); cxt.lineWidth = 12; cxt.lineCap = "round"; cxt.stroke(); } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>

4.4 lineJoin属性

定义线条交接处的样式。

cxt.lineJoin = "属性值";

属性值	说明
miter	尖角，默认
round	圆角，半径为线宽一半
bevel	斜角，对角线为线宽

直线交接样式

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript"> function $$(id) {
       return document.getElementById(id); } window.onload = function () {
       var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); var yoffset = 100; cxt.lineWidth = 12; //cxt.beginPath(); cxt.moveTo(50, 50); cxt.lineTo(100, 50); cxt.lineTo(50, 100); cxt.lineTo(100, 100); //cxt.lineJoin = "miter"; cxt.stroke(); cxt.beginPath(); cxt.moveTo(50, 50+yoffset); cxt.lineTo(100, 50+yoffset); cxt.lineTo(50, 100+yoffset); cxt.lineTo(100, 100+yoffset); cxt.lineJoin = "round"; cxt.stroke(); cxt.beginPath(); cxt.moveTo(50, 50+yoffset*2); cxt.lineTo(100, 50+yoffset*2); cxt.lineTo(50, 100+yoffset*2); cxt.lineTo(100, 100+yoffset*2); cxt.lineJoin = "bevel"; cxt.stroke(); } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="350" style="border:1px dashed gray;"></canvas>
</body>
</html>

4.5 setLineDash()方法

定义线条的虚实样式。

cxt.setLineDash(array);

array是一个数组组合。

[10, 5]表示10px实线，5px空白，Chrome、Firefox支持setLineDash()方法，IE不支持。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript"> function $$(id) {
       return document.getElementById(id); } window.onload = function () {
       var cnv = $$("canvas"); var cxt = cnv.getContext("2d"); cxt.strokeStyle = "red"; cxt.setLineDash([10, 5]); cxt.strokeRect(50, 50, 80, 80); } </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>