• 《canvas》之第11章 canvas状态

    《canvas》之第11章 canvas状态

    第11章 canvas状态

    11.1 什么是状态

    canvas基于状态（strokeStyle、fillStyle、lineWidth等）绘制（stroke()、fill()）图形。

    状态值改变时：

    • 使用beginPath()开始新路径，使用新的状态值。
    • 未使用beginPath()开始新路径，后面值覆盖前面值。

    save()保存当前状态，restore()恢复之前保存的状态，一般成对使用。

    11.2 clip()方法

    基本图形绘制区域，然后clip()剪切，后面绘制图形超出剪切区域后，不会显示。

    cxt.clip();

    • 1

    clip()不支持strokeRect()和fillRect()，使用rect()代替。

    • 剪切圆
    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript">
        function $$(id) {
            return document.getElementById(id);
        }
        window.onload = function () {
            var cnv = $$("canvas");
            var cxt = cnv.getContext("2d");

            //绘制一个“描边圆”，圆心为（50，50），半径为40
            cxt.beginPath();
            cxt.arc(50, 50, 40, 0, 360 * Math.PI / 180, true);
            cxt.closePath();
            //cxt.strokeStyle = "HotPink";
            //cxt.stroke();
            cxt.fillStyle = "HotPink";
            cxt.fill();

            //使用clip()，使得“描边圆”成为一个剪切区域
            cxt.clip();

            //绘制一个“填充矩形”
            cxt.beginPath();
            cxt.fillStyle = "#66CCFF";
            cxt.fillRect(50, 50, 100, 80);
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 剪切矩形
    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript">
        function $$(id) {
            return document.getElementById(id);
        }
        window.onload = function () {
            var cnv = $$("canvas");
            var cxt = cnv.getContext("2d");

            //绘制一个“填充矩形”
            cxt.beginPath();
			cxt.rect(20, 20, 100, 80);
            cxt.strokeStyle = " HotPink";
			cxt.stroke();
            //cxt.strokeRect(20, 20, 100, 80); //strokeRect()有bug
			
            cxt.clip();

            //绘制一个“描边圆”，圆心为（120，60），半径为40
            cxt.beginPath();
            cxt.arc(120, 60, 40, 0, 360 * Math.PI / 180, true);
            cxt.closePath();
            cxt.fillStyle = " #66CCFF";
            cxt.fill();
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35

    11.3 save()方法和restore()方法

    适合场合：

    • 图形或图片剪切。
    • 图形或图片变形。
    • 状态属性改变。
      fillStyle、font、global Alpha、globalCompositeOperation、lineCap、lineJoin、lineWidth、miterLimit、shadowBlur、shadowColor、shadowOffsetX、shadowOffsetY、strokeStyle、textAlign、textBaseLine。

    11.3.1 图形或图片剪切

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript">
        function $$(id) {
            return document.getElementById(id);
        }
        window.onload = function () {
            var cnv = $$("canvas");
            var cxt = cnv.getContext("2d");

            //save()保存状态
            cxt.save();
            //使用clip()方法指定一个圆形的剪切区域
            cxt.beginPath();
            cxt.arc(70, 70, 50, 0, 360 * Math.PI / 180, true);
            cxt.closePath();
            cxt.stroke();
            cxt.clip();
            //绘制一张图片
            var image = new Image();
            image.src = "images/princess.png";
            image.onload = function () {
                cxt.drawImage(image, 10, 20);
            }
            $$("btn").onclick = function () {
                //restore()恢复状态
                cxt.restore();
                //清空画布
                cxt.clearRect(0, 0, cnv.width, cnv.height);
                //绘制一张新图片
                var image = new Image();
                image.src = "images/flower.png";
                image.onload = function () {
                    cxt.drawImage(image, 10, 20);
                }
            }
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="200" height="160" style="border:1px dashed gray;"></canvas><br />
    <input id="btn" type="button" value="绘制新图" />
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47

    11.3.2 图形或图片变形

    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript">
        function $$(id) {
            return document.getElementById(id);
        }
        window.onload = function () {
            var cnv = $$("canvas");
            var cxt = cnv.getContext("2d");

			cxt.save();
            cxt.translate(30, 30);
            cxt.fillStyle = "HotPink";
            cxt.fillRect(0, 0, 100, 50);
			cxt.restore();

            cxt.translate(60, 60);
            cxt.fillStyle = "LightSkyBlue";
            cxt.fillRect(0, 0, 100, 50);
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray"></canvas>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29

    11.3.3 状态属性的改变

    • 填充属性：fillStyle。
    • 描边属性：strokeStyle。
    • 线条效果：lineCap、lineJoin、lineWidth、miterLimit。
    • 文本效果：font、textAlign、textBaseline。
    • 阴影效果：shadowBlur、shadowColor、shadowOffsetX、shadowOffsetY。
    • 全局属性：globalAlpha、globalCompositeOperation。
    <!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <script type="text/javascript">
        function $$(id) {
            return document.getElementById(id);
        }
        window.onload = function () {
            var cnv = $$("canvas");
            var cxt = cnv.getContext("2d");

            var text = "绿叶学习网";
            cxt.font = "bold 20px 微软雅黑";

            cxt.fillStyle = "HotPink";
            cxt.save();               //save()保存状态
            cxt.fillText(text, 50, 40);

            cxt.fillStyle = "LightSkyBlue ";
            cxt.fillText(text, 50, 80);

            cxt.restore();            //restore()恢复状态
            cxt.fillText(text, 50, 120);
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray"></canvas>
</body>
</html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
  • 相关阅读:
    【数据库】数据库系统概论（二）— 关系
    golang学习笔记——select 判断语句
    什么是电商云仓？
    通过Power Platform自定义D365 CE 业务需求 - 8. 使用PowerApps配置
    vue3+node.js+mysql+ant design实现表格的查询功能
    【代码随想录】二刷-二叉树
    代码随想录day43:动态规划part05：01背包
    对象与成员函数指针 function+bind
    驱动LCD12864显示器
    计算机导论实验——Linux基础入门
  • 原文地址：https://blog.csdn.net/oqqyx1234567/article/details/125362922