HTML5的画布：Stroke（笔触）和Fill（填充）

最新推荐文章于 2025-06-05 20:24:38 发布

一喵呜

最新推荐文章于 2025-06-05 20:24:38 发布

阅读量1.1w

点赞数 1

CC 4.0 BY-SA版权

分类专栏： HTMl5canvas HTMl5 HTML5自由者文章标签：黄艺斌 HTML5 canvas html5技术

本文链接：https://blog.youkuaiyun.com/html5_/article/details/47316271

HTML5自由者同时被 3 个专栏收录

94 篇文章

订阅专栏

HTMl5

81 篇文章

订阅专栏

HTMl5canvas

3 篇文章

订阅专栏

本文介绍了HTML5画布上的关键属性Stroke和Fill，分别控制形状的轮廓和内部填充。通过示例展示了如何创建带有蓝色边框和绿色填充的矩形，强调了strokeStyle、fillStyle和lineWidth的使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

每当一个HTML5画布上绘制形状，有两个属性，你需要设置：

1、Stroke

2、Fill

笔触和填充决定的形状如何绘制。Stroke（笔触）是一个形状的轮廓。Fill（填充）是在形状内部的内容。

下面这图是绘制了一个蓝色外轮廓和绿色填充的矩形（实际上是两个矩形）：

下面试实现的代码：

<span style="font-size:14px;">// 1. wait for the page to be fully loaded.
window.onload = function() {
    drawExamples();
}


function drawExamples(){

    // 2. Obtain a reference to the canvas element.
    var canvas  = document.getElementById("ex1");

    // 3. Obtain a 2D context from the canvas element.
    var context = canvas.getContext("2d");


    // 4. Draw grahpics.
    context.fillStyle = "#009900";
    context.fillRect(10,10, 100,100);

    context.strokeStyle = "#0000ff";
    context.lineWidth   = 5;
    context.strokeRect(10,10, 100,100);
}</span>

请注意的笔触样式和填充样式是分开设置，使用strokeStyle 和fillStyle的2D背景的性质。

还得注意这lineWidth属性，这里设置了一个线宽为5，最后，注意在2D背景下是如何指示或者画一个矩形填充或者是矩形轮廓。