图形的着色区域有两种

描边区域： strokeStyle 代表了描边样式，描边区域的绘制方法是 stroke()、strokeRect() 或者strokeText() 。 填充区域： fillStyle 代表了填充样式，填充区域的绘制方法是 fill()、fillRect() 或者fillText() 。

图形的着色方式有3种

• 纯色
  • 书写方式（与css 一致）：
    • red

    • 000000

    • rgb(r,g,b)
    • rgba(r,g,b,a)
  • 赋值方式
    • ctx.fillStyle= ‘red’
    • ctx.strokeStyle= ‘rgb(r,g,b)’
• 渐变
  • 建立渐变对象的方式：
    • 线性渐变: gradient=createLinearGradient(x1, y1, x2, y2)

  - 径向渐变 gradient=createRadialGradient(x1, y1, r1, x2, y2, r2)  

• 定义渐变的颜色节点 gradient.addColorStop(position, color)
• 赋值方式
  • ctx.fillStyle= gradient
  • ctx.strokeStyle= gradient
    
    • 纹理
• 建立纹理对象：
  • pattern=context.createPattern(image,”repeat|repeat-x|repeat-y|no-repeat”);
• 为着色样式赋值
  • ctx.fillStyle= pattern
  • ctx.strokeStyle= pattern

描边样式

影响描边样式的因素

strokeStyle：描边的颜色。

ctx.strokeStyle = 'red'

lineWidth：描边宽。定义描边的宽度，它是从路径的中心开始绘制的，内外各占宽度的一半。

ctx.lineWidth=40;

lineCap：描边端点样式。

<canvas id="canvas"></canvas>
<script>
    const canvas=document.getElementById('canvas');
    //canvas充满窗口
    canvas.width=window.innerWidth;
    canvas.height=window.innerHeight;
    //画笔
    const  ctx=canvas.getContext('2d');
    /*strokeStyle：描边的着色样式*/
    ctx.strokeStyle='maroon';
    /*lineWidth：描边宽*/
    ctx.lineWidth=40;
    /*lineCap 描边端点样式
    *   butt 没有端点，默认
    *   round 圆形端点
    *   square 方形端点
    * */
    ctx.save();
    ctx.lineCap='butt';
    ctx.beginPath();
    ctx.moveTo(50,50);
    ctx.lineTo(400,50);
    ctx.stroke();
    ctx.restore();
    ctx.save();
    ctx.lineCap='round';
    ctx.beginPath();
    ctx.moveTo(50,150);
    ctx.lineTo(400,150);
    ctx.stroke();
    ctx.restore();
    ctx.save();
    ctx.lineCap='square';
    ctx.beginPath();
    ctx.moveTo(50,250);
    ctx.lineTo(400,250);
    ctx.stroke();
    ctx.restore();
</script>

lineJoin：描边拐角类型 。

<canvas id="canvas"></canvas>
<script>
    const canvas=document.getElementById('canvas');
    //canvas充满窗口
    canvas.width=window.innerWidth;
    canvas.height=window.innerHeight;
    //画笔
    const  ctx=canvas.getContext('2d');
    /*strokeStyle：描边的着色样式*/
    ctx.strokeStyle='maroon';
    /*lineWidth：描边宽*/
    ctx.lineWidth=40;
    /*lineJoin 拐角类型
    *   miter 尖角
    *   round 圆角
    *   bevel 切角
    * */
    ctx.save();
    ctx.lineJoin='miter';
    ctx.beginPath();
    ctx.moveTo(50,50);
    ctx.lineTo(400,50);
    ctx.lineTo(200,150);
    ctx.stroke();
    ctx.restore();
    ctx.save();
    ctx.lineJoin='round';
    ctx.beginPath();
    ctx.moveTo(50,250);
    ctx.lineTo(400,250);
    ctx.lineTo(200,350);
    ctx.stroke();
    ctx.restore();
    ctx.save();
    ctx.lineJoin='bevel';
    ctx.beginPath();
    ctx.moveTo(50,450);
    ctx.lineTo(400,450);
    ctx.lineTo(200,550);
    ctx.stroke();
    ctx.restore();
</script>

miterLimit：拐角最大厚度（只适用于lineJoin=‘miter’ 的情况）。

<canvas id="canvas"></canvas>
<script>
    const canvas=document.getElementById('canvas');
    //canvas充满窗口
    canvas.width=window.innerWidth;
    canvas.height=window.innerHeight;
    //画笔
    const  ctx=canvas.getContext('2d');
    /*strokeStyle：描边的着色样式*/
    ctx.strokeStyle='maroon';
    /*lineWidth：描边宽*/
    ctx.lineWidth=40;
    /*miterLimit 拐角限制，number 类型，如2,1,3*/
    ctx.save();
    ctx.miterLimit=2;
    ctx.beginPath();
    ctx.moveTo(50,50);
    ctx.lineTo(400,50);
    ctx.lineTo(400,150);
    ctx.stroke();
    ctx.restore();
</script>

setLineDash(segments)：将描边设置为虚线，可以通过getLineDash() 方法获取虚线样式。

<canvas id="canvas"></canvas>
<script>
    const canvas=document.getElementById('canvas');
    //canvas充满窗口
    canvas.width=window.innerWidth;
    canvas.height=window.innerHeight;
    //画笔
    const  ctx=canvas.getContext('2d');
    /*strokeStyle：描边的着色样式*/
    ctx.strokeStyle='maroon';
    /*lineWidth：描边宽*/
    ctx.lineWidth=4;
    /* setLineDash(segments) 虚线 */
    ctx.save();
    ctx.beginPath();
    ctx.moveTo(50,100);
    ctx.lineTo(700,100);
    ctx.setLineDash([30,60,90]);
    ctx.stroke();
    ctx.restore();
</script>

lineDashOffset：虚线的偏移量。

<canvas id="canvas"></canvas>
<script>
    const canvas=document.getElementById('canvas');
    //canvas充满窗口
    canvas.width=window.innerWidth;
    canvas.height=window.innerHeight;
    //画笔
    const  ctx=canvas.getContext('2d');
    /*strokeStyle：描边的着色样式*/
    ctx.strokeStyle='maroon';
    /*lineWidth：描边宽*/
    ctx.lineWidth=4;
    /* lineDashOffset 虚线偏移  */
    ctx.save();
    ctx.beginPath();
    ctx.moveTo(50,100);
    ctx.lineTo(700,100);
    ctx.setLineDash([60]);
    ctx.stroke();
    ctx.restore();
    ctx.save();
    ctx.beginPath();
    ctx.moveTo(50,150);
    ctx.lineTo(700,150);
    ctx.setLineDash([60]);
    ctx.lineDashOffset=-90;
    ctx.stroke();
    ctx.restore();
</script>

霓虹灯

实现思路：

• 爱心：两个三次贝塞尔曲线
• 描边
• 虚线偏移

<canvas id="canvas"></canvas>
<script>
    const canvas=document.getElementById('canvas');
    // canvas充满窗口
    canvas.width=window.innerWidth;
    canvas.height=window.innerHeight;
    // 画笔
    const  ctx=canvas.getContext('2d');
    // 颜色数组
    const colors=['red','yellow'];
    function draw(){
        // 保存上下文对象的状态
        ctx.save();
        // 偏移坐标系
        ctx.translate(300,400);
        // 开始绘制路径
        ctx.beginPath();
        // 向路径集合中添加子路径
        // 绘制心形子路径
        // 设置路径起点
        ctx.moveTo(0,0);
        // 用两个三次贝塞尔曲线组成爱心
        ctx.bezierCurveTo(-200,-50,-180,-300,0,-200);
        ctx.bezierCurveTo(180,-300,200,-50,0,0);
        // 设置描边宽度
        ctx.lineWidth=10;
        ctx.setLineDash([30]);
        /*--------虚线1-------*/
        // 描边颜色
        ctx.strokeStyle=colors[0];
        // 以描边的方式显示路径
        ctx.stroke();
        /*--------虚线2-------*/
        // 描边颜色
        ctx.lineDashOffset=30;
        ctx.strokeStyle=colors[1];
        // 以描边的方式显示路径
        ctx.stroke();
        // 将上下文对象的状态恢复到上一次保存时的状态
        ctx.restore();
    }
    setInterval(function(){
        draw();
        colors.reverse();
    },200)
</script>