《canvas》之第12章其他应用

第12章其他应用

第12章其他应用

12.1 canvas对象

document.getElementById()获取canvas对象。

12.1.1 canvas对象属性

width、height。

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

            //绘制初始图形
            cxt.fillStyle = "#FF6699";
            cxt.fillRect(30, 30, 50, 50);

            $$("btn").onclick = function () {
                cxt.clearRect(0, 0, cnv.width, cnv.height);
                cxt.translate(10, 10);
                cxt.fillStyle = "#FF6699";
                cxt.fillRect(30, 30, 50, 50);
            }
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" 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

canvas对象方法

getContext(“2d”)，获取canvas 2d上下文环境对象。
toDataURL()，获取canvas对象产生的位图的字符串。

cnv.toDataURL(type);
1

type，可选参数，输出的MIME类型（type省略时，默认image/png）。
MIME类型，设定用一种应用程序来打开某种扩展名的文件的方式类型。

<!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 60px 微软雅黑";

            //定义阴影
            cxt.shadowOffsetX = 5;
            cxt.shadowOffsetY = 5;
            cxt.shadowColor = "#66CCFF";
            cxt.shadowBlur = 10;

            //填充文字
            cxt.fillStyle = "#FF6699";
            cxt.fillText(text, 10, 90);

            $$("btn").onclick = function () {
            	//当前页面打开url链接
                window.location.href = cnv.toDataURL("image/png"); 
            }
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="320" height="150" 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

点击按钮，浏览器地址产生字符串：data:image/png;base64,iV.....==
toDataURL()方法将画布保存为Base64位编码的URL，可直接嵌入网页的小型数据，如img元素的图片文件等。
data URL用处：

发送图片数据到web服务器的数据库，进行长期保存。
浏览器中直接打开，进行本地保存。

12.2 globalAlpha属性

定义canvas环境的透明度。

cxt.globalAlpha = "数值";
1

取值范围0.0(完全透明)~1.0(完全不透明，默认值)。
针对整个canvas，想实现局部图形或文字的透明效果，可使用RGBA。

<!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.globalAlpha = "0.3";
            
            cxt.font = "20px bold 微软雅黑";
            
            cxt.fillStyle = "purple";
            cxt.fillText("绿叶学习网", 50, 40);

            cxt.fillStyle = "HotPink";
            cxt.fillRect(50, 50, 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

12.3 globalCompositeOperation属性

设置交叉图形的显示方式。

cxt.globalCompositeOperation = "属性值";
1

属性值	说明
source-over	新图形覆盖旧图形重叠部分，默认值
source-in	只显示新图形重叠部分，其它部分透明处理
source-out	只显示新图形未重叠部分，其它部分透明处理
source-atop	只显示旧图形+新图形重叠部分，其它部分透明处理
destination-over	旧图形覆盖新图形重叠部分
destination-in	只显示旧图形重叠部分，其它部分透明处理
destination-out	只显示旧图形未重叠部分，其它部分透明处理
destination-atop	只显示新图形+旧图形重叠部分，其它部分透明处理
copy	只显示新图形，旧图形透明处理
xor	两种图形都显示，重叠部分透明处理
darker	两种图形都显示，重叠部分相减
lighter	两种图形都显示，重叠部分相加

<!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.fillStyle = "HotPink";
            cxt.fillRect(30, 30, 60, 60);
            
            //绘制圆形
            cxt.beginPath();
            cxt.arc(100, 100, 40, 0, Math.PI * 2, true);
            cxt.closePath();
            
            cxt.globalCompositeOperation = "xor";
            cxt.fillStyle = "LightSkyBlue";
            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

<!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.globalCompositeOperation = "xor";
			
            //绘制第1个矩形
            cxt.fillStyle = "HotPink";
            cxt.fillRect(30, 30, 60, 60);
			
			cxt.save();
            cxt.globalCompositeOperation = "xor";
            //绘制圆形
            cxt.beginPath();
            cxt.arc(100, 100, 40, 0, Math.PI * 2, true);
            cxt.closePath();
            cxt.fillStyle = "LightSkyBlue";
            cxt.fill();
			cxt.restore();
			
            //绘制第2个矩形
            cxt.fillStyle = "HotPink";
            cxt.fillRect(110, 30, 60, 60);
        }
    </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
37
38
39

12.4 strokeStyle和fillStyle

分别用于描边型stroke()和填充型fill()。

矩形

<!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.strokeStyle = "HotPink";
            cxt.strokeRect(20, 20, 50, 50);

            cxt.fillStyle = "LightSkyBlue";
            cxt.fillRect(100, 20, 50, 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

圆形

<!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.arc(50, 50, 25, 0, 360 * Math.PI / 180, false);
            cxt.closePath();
            cxt.strokeStyle = "HotPink";
            cxt.stroke();

            cxt.beginPath();
            cxt.arc(150, 50, 25, 0, 360 * Math.PI / 180, false);
            cxt.closePath();
            cxt.fillStyle = "LightSkyBlue";
            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

文字

<!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 25px 微软雅黑";
			
            cxt.strokeStyle = "purple";
            cxt.strokeText(text, 30, 50);

            cxt.fillStyle = "purple";
            cxt.fillText(text, 30, 100);
        }
    </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

图片

<!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");

            //创建image对象
            var image = new Image();
            image.src = "princess.png";

            image.onload = function () {
                var text = "绿叶学习网";
                cxt.font = "bold 22px 微软雅黑";
                var pattern = cxt.createPattern(image, "no-repeat");
                cxt.fillStyle = pattern;
                cxt.fillText(text, 10, 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
30
31

princess.png

相关阅读:
C++ —— 单机软件加入Licence许可权限流程（附详细流程图、详细代码已持续更新..）
nvm：npm ERR! Unexpected token ‘.‘
Python——与Matlab对应的Python版本
 redis 集群（cluster）
47_包装类
 RS&FSW测试脚本
 Leetcode.2786 访问数组中的位置使分数最大
 flink-cdc同步mysql数据到kafka
2022年9月8号Java23设计模式学习(课时三)抽象工厂模式
 C++核心基础教程之STL容器详解 list
原文地址：https://blog.csdn.net/oqqyx1234567/article/details/125362933

《canvas》之第12章 其他应用

《canvas》之第12章 其他应用

第12章 其他应用

12.1 canvas对象

12.1.1 canvas对象属性

canvas对象方法

12.2 globalAlpha属性

12.3 globalCompositeOperation属性

12.4 strokeStyle和fillStyle

《canvas》之第12章其他应用

《canvas》之第12章其他应用

第12章其他应用