canvas填充和描边介绍

：点上面关注免费学习前端知识！

---

2D上下文的两种基本绘图操作是填充和描边。填充，就是用指定的样式（颜色、渐变或图像）填充图形；描边，就是只在图形的边缘画线。大多数2D上下文操作都会细分为填充和描边两个操作，而操作的结果取决于两个属性： fillStyle 和strokeStyle 。

这两个属性的值可以是字符串、渐变对象或模式对象，而且它们的默认值都是 “#000000” 。如果为它们指定表示颜色的字符串值，可以使用CSS中指定颜色值的任何格式，包括颜色名、十六进制码、 rgb 、 rgba 、 hsl 或 hsla 。举个例子：

var drawing = document.getElementById(“drawing”);

//确定浏览器支持<canvas>元素

if (drawing.getContext){

    var context = drawing.getContext(“2d”);

    context.strokeStyle = “red”;

    context.fillStyle = ”#0000ff”;

}

以上代码将 strokeStyle 设置为red（CSS中的颜色名），将 fillStyle 设置为#0000ff（蓝色）。然后，所有涉及描边和填充的操作都将使用这两个样式，直至重新设置这两个值。如前所述，这两个属性的值也可以是渐变对象或模式对象。作者后面会讨论这两种对象。

推荐阅读《canvas基本用法》

完

看前端技术文章,就在Web前端精髓