Canvas—描边与填充

ゝ一世哀愁。 2021-12-15 16:15 1147阅读 0赞

### 文章目录 ###

*  描边
 *   *  stroke
     *  strokeStyle
 *  strokeRect
 *  填充
 *  fill
 *   *  fillRect
     *  fillStyle

# 描边 #

## stroke ##

Canvas中常用的`stroke`方法就是描边方法，它用以描绘轮廓。

const myCanvas = document.getElementById('myCanvas');
    const ctx = myCanvas.getContext('2d');
    ctx.moveTo(0, 0);
    ctx.lineTo(100, 100);
    ctx.lineTo(0, 100);
    ctx.stroke();

![\[外链图片转存失败(img-jV77Tkz3-1562116464213)(http://note.youdao.com/yws/res/15792/E66AFE656D9140DEA6E46C2385D04593)\]][img-jV77Tkz3-1562116464213_http_note.youdao.com_yws_res_15792_E66AFE656D9140DEA6E46C2385D04593]

## strokeStyle ##

顾名思义，`strokeStyle`即用以描述描边的样式，简单地说就是边的颜色。

const myCanvas = document.getElementById('myCanvas');
    const ctx = myCanvas.getContext('2d');
    ctx.moveTo(0, 0);
    ctx.lineTo(100, 100);
    ctx.lineTo(0, 100);
    ctx.strokeStyle = 'blue';   //设置边的颜色为蓝色
    ctx.stroke();

![\[外链图片转存失败(img-vQH8VFl3-1562116464227)(http://note.youdao.com/yws/res/15797/32343971338D45889CE4DC3055FE6294)\]][img-vQH8VFl3-1562116464227_http_note.youdao.com_yws_res_15797_32343971338D45889CE4DC3055FE6294]

# strokeRect #

该方法就是通过描边的方式绘制矩形。

const myCanvas = document.getElementById('myCanvas');
    const ctx = myCanvas.getContext('2d');
    ctx.strokeRect(100, 100, 150, 100);

![\[外链图片转存失败(img-3oDVDQ48-1562116464228)(http://note.youdao.com/yws/res/15807/F6341A2B57F74A5EB188DD9A780F0DF1)\]][img-3oDVDQ48-1562116464228_http_note.youdao.com_yws_res_15807_F6341A2B57F74A5EB188DD9A780F0DF1]

# 填充 #

# fill #

填充，即用某种颜色填充某闭合空间内部。

例如，

const myCanvas = document.getElementById('myCanvas');
    const ctx = myCanvas.getContext('2d');
    ctx.moveTo(0, 0);
    ctx.lineTo(100, 100);
    ctx.fillStyle = 'green';
    ctx.fill();

![\[外链图片转存失败(img-0P7v21gX-1562116464231)(http://note.youdao.com/yws/res/15815/CC1B69CD09EB4C2B9CDA0C3E60E776B9)\]][img-0P7v21gX-1562116464231_http_note.youdao.com_yws_res_15815_CC1B69CD09EB4C2B9CDA0C3E60E776B9]

可以看到在这个例子中，并不能画出任何东西，这是因为一条直线还不能形成一个闭合区域。若是再加一条即可，

const myCanvas = document.getElementById('myCanvas');
    const ctx = myCanvas.getContext('2d');
    ctx.moveTo(0, 0);
    ctx.lineTo(100, 100);
    ctx.lineTo(0, 100);
    ctx.fillStyle = 'green';
    ctx.fill();

![\[外链图片转存失败(img-FXIIkHbK-1562116464232)(http://note.youdao.com/yws/res/15821/E64C83446FBB4F34B86A256A6C829B18)\]][img-FXIIkHbK-1562116464232_http_note.youdao.com_yws_res_15821_E64C83446FBB4F34B86A256A6C829B18]

`fill`方法会自动形成一个闭合区域并填充。

## fillRect ##

有`strokeRect`，自然也就有`fillRect`，参数也都一致。

const myCanvas = document.getElementById('myCanvas');
    const ctx = myCanvas.getContext('2d');
    ctx.fillRect(100, 100, 150, 150);

![\[外链图片转存失败(img-cenflQnY-1562116464232)(http://note.youdao.com/yws/res/15827/AA8755388C594D1E9EB83CDDFF04CD4F)\]][img-cenflQnY-1562116464232_http_note.youdao.com_yws_res_15827_AA8755388C594D1E9EB83CDDFF04CD4F]

## fillStyle ##

同样地，`fillStyle`也是用以修改填充样式，即填充颜色。

const myCanvas = document.getElementById('myCanvas');
    const ctx = myCanvas.getContext('2d');
    ctx.fillStyle = 'orange';
    ctx.fillRect(100, 100, 150, 150);

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqYzI1Ng_size_16_color_FFFFFF_t_70]

[img-jV77Tkz3-1562116464213_http_note.youdao.com_yws_res_15792_E66AFE656D9140DEA6E46C2385D04593]: /images/20211215/eefcd6dbaa024113b8da182593de009b.png
[img-vQH8VFl3-1562116464227_http_note.youdao.com_yws_res_15797_32343971338D45889CE4DC3055FE6294]: /images/20211215/d0c3382fe4054010992acadbed3040fd.png
[img-3oDVDQ48-1562116464228_http_note.youdao.com_yws_res_15807_F6341A2B57F74A5EB188DD9A780F0DF1]: /images/20211215/d440263e23254c64be95a2330c6baf1c.png
[img-0P7v21gX-1562116464231_http_note.youdao.com_yws_res_15815_CC1B69CD09EB4C2B9CDA0C3E60E776B9]: /images/20211215/68ce712e6f5b48ba9ed56922df3f638d.png
[img-FXIIkHbK-1562116464232_http_note.youdao.com_yws_res_15821_E64C83446FBB4F34B86A256A6C829B18]: /images/20211215/d91550c247334c8b9b57e5c668aaccf0.png
[img-cenflQnY-1562116464232_http_note.youdao.com_yws_res_15827_AA8755388C594D1E9EB83CDDFF04CD4F]: /images/20211215/24c882bc23054110b4d166aaf789bc36.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hqYzI1Ng_size_16_color_FFFFFF_t_70]: /images/20211215/1c479a0e93cc4b5da080cb231f789502.png