Canvas 路径线段厚度 lineWidth

前面我们绘制路径时使用的都是默认粗细,默认值为 1.0

其实 Canvas 还提供了 lineWidth 属性用来设置路径的粗细

ctx.lineWidth 属性

lineWidth 属性用于设置线段厚度的属性 ( 即线段的宽度 )

当获取属性值时,它可以返回当前的值 ( 默认值是1.0 )

当给属性赋值时, 0、 负数、 Infinity 和 NaN 都会被忽略;除此之外,都会被赋予一个新值

语法

ctx.lineWidth = value;
说明
value 描述线段宽度的数字。 0、 负数、 Infinity 和 NaN 会被忽略

范例

下面的代码使用 lineWidth 属性设置线段的宽度

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-1" width="300" height="150">
</canvas>

<script>
var c   = document.getElementById("canvas-1");
var ctx = c.getContext("2d");

ctx.beginPath();
ctx.moveTo(50,50);
ctx.lineWidth = 15;
ctx.lineTo(100, 50);
ctx.stroke();
</script>

运行结果如下


Canvas 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2018 简单教程 twle.cn All Rights Reserved.