zoukankan      html  css  js  c++  java
  • 怎样设置路径的边框(描边)颜色

    需要使用: ctx.strokeStyle

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    
    <body>
        <canvas id="canv" width="300" height="300"></canvas>
        <script>
            function draw() {
                var canvas = document.getElementById('canv');
                if (!canvas.getContext) return;
                var ctx = canvas.getContext("2d");
                ctx.beginPath();
                ctx.arc(150, 150, 50, 0, -Math.PI/2, true);
                ctx.strokeStyle = "red";
                ctx.stroke();
    
                ctx.beginPath();
                ctx.arc(150, 150, 50, -Math.PI/2, -Math.PI, true);
                ctx.strokeStyle = "green";
                ctx.stroke();
    
                ctx.beginPath();
                ctx.arc(150, 150, 50, -Math.PI, -Math.PI*3/2, true);
                ctx.strokeStyle = "orange";
                ctx.stroke();
    
                ctx.beginPath();
                ctx.arc(150, 150, 50, -Math.PI*3/2, -Math.PI*2, true);
                ctx.strokeStyle = "blue";
                ctx.stroke();
            }
            draw();
        </script>
    </body>
    
    </html>

    注意: 

    1. 每次执行 ctx.beginPath() 都相当于是画画时的"落笔"这个动作, 必须要给它指定一个落笔的位置点;

    2. ctx.strokeStyle 作用的是当前路径, 也就是最近的一次执行ctx.beginPath()之后绘制的路径; 

  • 相关阅读:
    创建型模式
    建造者模式
    抽象工厂模式
    工厂方法模式
    原型模式
    [水]三个日常签到题
    [数]青蛙的约会&Strange function
    [水]三个数学的小技巧题
    Jquery Ajax的使用
    easyui学习记录:combotree的使用
  • 原文地址:https://www.cnblogs.com/aisowe/p/11572097.html
Copyright © 2011-2022 走看看