《canvas》之第11章 canvas状态

mali378287007

已于 2023-12-13 16:26:32 修改

阅读量163

点赞数

分类专栏：整理 canvas 学习文章标签： canvas 前端

于 2022-06-27 08:00:00 首次发布

本文链接：https://blog.csdn.net/oqqyx1234567/article/details/125362922

版权

整理同时被 3 个专栏收录

181 篇文章 11 订阅

订阅专栏

学习

130 篇文章 4 订阅

订阅专栏

canvas

20 篇文章 5 订阅

订阅专栏

《canvas》之第11章 canvas状态

第11章 canvas状态

第11章 canvas状态

11.1 什么是状态

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

状态值改变时：

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

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

11.2 clip()方法

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

cxt.clip();

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>

剪切矩形

<!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>

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>

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>

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>