zoukankan      html  css  js  c++  java
  • 怎样设置闭合区域的填充颜色

    需要使用: ctx.fillStyle().

    <!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.fillStyle = "red";
                ctx.fill();
    
    
                ctx.beginPath();
                ctx.arc(150, 150, 50, -Math.PI/2, -Math.PI, true);
                ctx.fillStyle = "green";
                ctx.fill();
    
                ctx.beginPath();
                ctx.arc(150, 150, 50, -Math.PI, -Math.PI*3/2, true);
                ctx.fillStyle = "orange";
                ctx.fill();
    
                ctx.beginPath();
                ctx.arc(150, 150, 50, -Math.PI*3/2, -Math.PI*2, true);
                ctx.fillStyle = "blue";
                ctx.fill();
            }
            draw();
        </script>
    </body>
    
    </html>

    注意: 

    1. 如果当前Path没有闭合, 则 ctx.fill() 会先闭合再填充;

    2. 案例中使用了四次ctx.beginPath(), 说明这个图形下了四笔.

  • 相关阅读:
    图像处理之图像分割
    matlab 矩阵运算技巧
    回溯法:八皇后问题
    spring框架学习笔记(二)
    spring框架学习笔记(一)
    java下搭建Webservice服务
    log4j使用
    Mybatis使用
    java序列化与反序列化
    java常用数据类型
  • 原文地址:https://www.cnblogs.com/aisowe/p/11572307.html
Copyright © 2011-2022 走看看