画布（canvas）效果之-填充色, 笔划色, 颜色值

最新推荐文章于 2024-08-16 13:20:36 发布

无名之辈2018

最新推荐文章于 2024-08-16 13:20:36 发布

阅读量1.5k

点赞数

分类专栏：前端文章标签： Html5

原文链接：https://www.mk2048.com/blog/blog.php?id=jijbaa2cb&title=%E7%94%BB%E5%B8%83%EF%BC%88canvas%EF%BC%89%E6%95%88%E6%9E%9C%E4%B9%8B-%E5%A1%AB%E5%85%85%E8%89%B2%2C+%E7%AC%94%E5%88%92%E8%89%B2%2C+%E9%A2%9C%E8%89%B2%E5%80%BC

版权

前端专栏收录该内容

115 篇文章 0 订阅

订阅专栏

示例

<!DOCTYPE HTML>
<html>
<head>
    <title>填充色, 笔划色, 颜色值</title>
</head>
<body>
    <canvas id="canvas" width="260" height="140" style="background-color: rgb(222, 222, 222)">
        您的浏览器不支持 canvas 标签
    </canvas>
    <br />
    <button type="button" onclick="drawIt();">Demo</button>
    <button type="button" onclick="clearIt();">清除画布</button>

    <script type="text/javascript">

        var ctx = document.getElementById('canvas').getContext('2d');

        function drawIt() {

            clearIt();

            /*
             * context.fillStyle - 指定填充色的颜色值
             *
             * context.strokeStyle - 指定笔划色的颜色值
             *
             * 颜色值示例如下：
             *   Color Name - "green"
             *   #rgb - "#0f0"
             *   #rrggbb = "#00ff00"
             *   rgb(0-255, 0-255, 0-255) - rgb(0, 255, 0)
             *   rgb(0.0%-100.0%, 0.0%-100.0%, 0.0%-100.0%) - rgb(0%, 100%, 0%)
             *   rgba(0-255, 0-255, 0-255, 0.0-1.0) - rgb(0, 255, 0, 1)
             *   rgba(0.0%-100.0%, 0.0%-100.0%, 0.0%-100.0%, 0.0-1.0) - rgb(0%, 100%, 0%, 1)
             */

            ctx.fillStyle = 'Red';
            ctx.strokeStyle = 'Green';
            ctx.lineWidth = 10;

            // 看看 fillStyle 颜色的示例和 strokeStyle 颜色的示例，以及先 stroke 再 fill 和先 fill 再 stroke 的区别
            ctx.beginPath();
            ctx.rect(20, 20, 100, 100);
            ctx.stroke();
            ctx.fill();

            ctx.beginPath();
            ctx.rect(140, 20, 100, 100);
            ctx.fill();
            ctx.stroke();
        }

        function clearIt() {
            ctx.clearRect(0, 0, 260, 140);
        }

    </script>
</body>
</html>