html中canvas HTML canvas lineWidth 属性

html中canvas

HTML5 中的 canvas 元素是一个可以使用脚本（通常是JavaScript）来绘制图形的 HTML 元素。它可以用于绘制图形、制作图像动画以及实现游戏开发。

<canvas id="myCanvas" width="200" height="100"></canvas>

上面的代码定义了一个名为 myCanvas 的 canvas 元素，宽度为 200px，高度为 100px。要在 canvas 上进行绘图，需要使用 JavaScript 获取该元素的上下文并调用相应的 API 来实现。

var c = document.getElementById("myCanvas");  // 获取 canvas 元素 
var ctx = c.getContext("2d");                // 获取 2D 绘图上下文 
ctx.fillStyle = "#FF0000";                   // 设置填充样式 
ctx.fillRect(0, 0, 150, 75);                 // 绘制一个填充的矩形 

上面的代码通过 getContext() 方法获得了 canvas 的 2D 绘图上下文，然后使用 fillStyle 属性设置填充样式，最后使用 fillRect() 方法在 (0, 0) 处开始，宽度为 150px、高度为 75px 的位置处填充一个彩色的正方形。

HTML canvas lineWidth 属性

HTML canvas lineWidth 属性

HTML canvas 参考手册

实例

用宽度为 10 像素的线条来绘制矩形：

YourbrowserdoesnotsupporttheHTML5canvastag. var c=document.getElementById("myCanvas"); var canvOK=1; try {c.getContext("2d");} catch (er) {canvOK=0;} if (canvOK==1) { var ctx=c.getContext("2d"); ctx.lineWidth=10; ctx.strokeRect(20,20,80,100); }

JavaScript：

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.lineWidth=10;
ctx.strokeRect(20,20,80,100);

---

浏览器支持

Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 lineWidth 属性。

注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元素。

---

定义和用法

lineWidth 属性设置或返回当前线条的宽度，以像素计。

默认值：	1
JavaScript 语法：	context.lineWidth=number;

属性值

值	描述
number	当前线条的宽度，以像素计。

---

HTML canvas 参考手册