《canvas》之第6章图片操作

第6章图片操作

第6章图片操作

6.1 图片操作简介

将图片导入canvas进行平铺、切割、像素处理等操作。

6.2 绘制图片

drawImage()方法将图片显示出来。

6.2.1 drawImage(image, dx, dy)

image，页面中img元素，或者JavaScript创建的Image对象，或者另一个canvas对象（document.createElement(“canvas”)）。
dx，dy，左上角横纵坐标。
JavaScript创建Image对象

<!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 = "images/princess.png";

			//图片载入完全后，才能开始绘制图片
            image.onload = function () {
                cxt.drawImage(image, 40, 20);
            }
        }
    </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

页面中img元素

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <meta charset="utf-8" />
    <style type="text/css">
        /*隐藏HTML中的img元素*/
        #pic {
            display: none;
        }
    </style>
    <script type="text/javascript">
        function $$(id) {
            return document.getElementById(id);
        }
        window.onload = function () {
            var cnv = $$("canvas");
            var cxt = cnv.getContext("2d");

            var image = document.getElementById("pic");
            cxt.drawImage(image, 40, 20);
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
    <img id="pic" src="images/princess.png" alt="" />
</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

6.2.2 drawImage(image, dx, dy, dw, dh)

dw，dh定义图片的大小，会进行缩放。

<!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 image = new Image();
            image.src = "images/princess.png";
            image.onload = function () {
                cxt.drawImage(image, 40, 20, 120+60, 60);
            }
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="400" height="300" 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

6.2.3 drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

将源图片sx，sy，sw，sh部分裁剪后，缩放到canvas的dx，dy，dw，dh处显示。

<!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 image = new Image();
            image.src = "images/princess.png";
            image.onload = function () {
                cxt.drawImage(image, 0, 0, 80, 80, 40, 20, 80, 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

6.3 平铺图片

var pattern = cxt.createPattern(image, "type");
cxt.fillStyle = pattern;
cxt.fillRect();
1
2
3

type取值

参数值	说明
repeat	水平垂直方向平铺，默认
repeat-x	水平方向平铺
repeat-y	垂直方向平铺
no-repeat	只显示一次，不平铺

平铺图片

<!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 myImg = new Image();
            myImg.src = "images/flower.png";

            myImg.onload = function () {
                var pattern = cxt.createPattern(myImg, "repeat");
                cxt.fillStyle = pattern;
                cxt.fillRect(0, 0, cnv.width, cnv.height);
            }
        }
    </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

平铺canvas

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

            //创建canvas元素
            var bgCanvas = document.createElement("canvas");
            bgCanvas.width = 20;
            bgCanvas.height = 20;

            //在新创建的canvas中画一个圆
            var bgCxt = bgCanvas.getContext("2d");
            bgCxt.beginPath();
            bgCxt.arc(10, 10, 10, 0, 360 * Math.PI / 180, true);
            bgCxt.closePath();
            bgCxt.fillStyle = "HotPink";
            bgCxt.fill();

            //平铺canvas
            var pattern = cxt.createPattern(bgCanvas, "repeat-x");
            cxt.fillStyle = pattern;
            cxt.fillRect(0, 0, 200, 200);
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="200" height="160" 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

6.4 切割图片

cxt.clip();
1

clip()方法切割图片步骤：

绘制基本图形。
使用clip()方法。
绘制图片。

切割圆形

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

            //第1步，绘制基本图形，用来切割
            cxt.beginPath();
            cxt.arc(70, 70, 50, 0, 360 * Math.PI / 180, true);
            cxt.closePath();
            cxt.stroke();

            //第2步，使用clip()方法，使得切割区域为上面绘制的基本图形
            cxt.clip();

            //第3步，绘制一张图片
            var image = new Image();
            image.src = "images/princess.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>
</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

切割三角形

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

            //第1步，绘制基本图形，用来切割
            cxt.moveTo(20, 70);
            cxt.lineTo(120, 20);
            cxt.lineTo(120, 70);
            cxt.lineTo(20, 70);
            cxt.stroke();

            //第2步，使用clip()方法，使得切割区域为上面绘制的基本图形
            cxt.clip();

            //第3步，绘制一张图片
            var image = new Image();
            image.src = "images/princess.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>
</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

6.5 深入图片操作

图片结合文字或图形，实现特殊效果。

图片结合文字

<!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 = "images/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

图片结合图形

<!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 = "images/princess.png";

            image.onload = function () {
                cxt.beginPath();
                cxt.arc(50, 50, 50, 0, 360 * Math.PI / 180, false);
                cxt.closePath();
                var pattern = cxt.createPattern(image, "no-repeat");
                cxt.fillStyle = pattern;
                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

相关阅读:
【SwiftUI模块】0013、SwiftUI搭建-类似蚂蚁财富的基金累计盈亏的走势图
 qml Textinput 、TextField、TextEdit、TextArea用法介绍
 SAP CO系统配置-物料分类帐
 Himall商城字符串帮助类移除前导/后导字符串
 linux内核调度
 关于IDEA中gradle项目bootrun无法进入断点以及gradle配置页面不全的解决方案
 爬虫系列：爬虫验证码识别
 怎样在CSDN赚点零花钱
 java反射详解及优化
 1517_AURIX TC275 SRI中的仲裁功能
原文地址：https://blog.csdn.net/oqqyx1234567/article/details/125362873

《canvas》之第6章 图片操作

《canvas》之第6章 图片操作

第6章 图片操作

6.1 图片操作简介

6.2 绘制图片

6.2.1 drawImage(image, dx, dy)

6.2.2 drawImage(image, dx, dy, dw, dh)

6.2.3 drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

6.3 平铺图片

6.4 切割图片

6.5 深入图片操作

《canvas》之第6章图片操作

《canvas》之第6章图片操作

第6章图片操作