• 《canvas》之第2章 直线图形

    《canvas》之第2章 直线图形

    第2章 直线图形

    2.1 直线图形简介

    直线、矩形、多边形。

    2.2 直线

    2.2.1 canvas坐标系

    canvas使用W3C坐标系。
    原点左上角，x轴正方向向右，y轴正方向向下。

    2.2.2 直线的绘制

    moveTo()和lineTo()配合使用来画直线。

    1. 一条直线
    ctx.moveTo(x1, y1); //移动到起点
ctx.lineTo(x2, y2);	//连接到终点
ctx.stroke();	//开始绘制

    • 1
    • 2
    • 3
    <!DOCTYPE html>
<html>
<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.moveTo(50, 100);
            cxt.lineTo(150, 50);
            cxt.stroke();
        }
    </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
    1. 多条直线
    • 三条直线
    <!DOCTYPE html>
<html>
<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.moveTo(50, 50);
            cxt.lineTo(100, 50);
			
			cxt.lineTo(50, 100);//上个点（100, 50）为新的起点。
			
            //cxt.moveTo(50, 100);
            cxt.lineTo(100, 100);
			
            cxt.stroke();
        }
    </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");

            cxt.moveTo(50, 100);//首尾重合
            cxt.lineTo(150, 50);
            cxt.lineTo(150, 100);
            cxt.lineTo(50, 100);//首尾重合
            cxt.stroke();
        }
    </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.moveTo(50, 100);//首尾重合
            cxt.lineTo(50, 50);
            cxt.lineTo(150, 50);
            cxt.lineTo(150, 100);
            cxt.lineTo(50, 100);//首尾重合
            cxt.stroke();
        }
    </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

    2.3 矩形

    矩形分为描边矩形和填充矩形。

    2.3.1 描边矩形

    strokeStyle属性和strokeRect()方法画描边矩形。

    ctx.strokeStyle = 属性值;
cts.strokeRect(x, y, width, height);

    • 1
    • 2
    1. strokeStyle属性
      3种取值：颜色值、渐变色和图案。
    ctx.strokeStyle = "#FF0000";
ctx.strokeStyle = "#F00";
ctx.strokeStyle = "red";
ctx.strokeStyle = "rgb(255, 0, 0)";
ctx.strokeStyle = "rgba(255, 0, 0, 0.8)";

    • 1
    • 2
    • 3
    • 4
    • 5
    1. strokeRect()方法
      先设置好strokeStyle属性，后使用strokeRect()方法。
    • 描边矩形
    <!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 = "red";
            cxt.strokeRect(50, 50, 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

    2.3.2 填充矩形

    fillStyle属性和fillRect()方法画填充矩形。

    ctx.fillStyle = 属性值;
cts.fillRect(x, y, width, height);

    • 1
    • 2
    1. fillStyle属性
      3种取值：颜色值、渐变色和图案。
    ctx.fillStyle= "#FF0000";
ctx.fillStyle= "#F00";
ctx.fillStyle= "red";
ctx.fillStyle= "rgb(255, 0, 0)";
ctx.fillStyle= "rgba(255, 0, 0, 0.8)";

    • 1
    • 2
    • 3
    • 4
    • 5
    1. fillRect()方法
      先设置好fillStyle属性，后使用fillRect()方法。
    • 填充矩形
    <!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(50, 50, 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
    • 同时绘制描边矩形和填充矩形
    <!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 = "red";
            cxt.strokeRect(50, 50, 80, 80);
			
            cxt.fillStyle = "#FFE8E8";
            cxt.fillRect(50, 50, 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
    • 两个重叠的填充矩形
    <!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(50, 50, 80, 80);

            cxt.fillStyle = "rgba(0, 0, 255, 0.3)";
            cxt.fillRect(30, 30, 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

    2.3.3 rect()方法

    rect(x, y, width, height);

    • 1

    strokeRect()和fillRect()调用后，立即绘制矩形。
    rect()调用后，再调用stroke()或fill()才会绘制矩形。

    ctx.rect(50, 50, 80, 80);
ctx.strokeStyle="red";
ctx.stroke();
//等价于
ctx.strokeStyle="red";
ctx.strokeRect(50, 50, 80, 80);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    ctx.rect(50, 50, 80, 80);
ctx.fillStyle="red";
ctx.fill();
//等价于
ctx.fillStyle="red";
ctx.fillRect(50, 50, 80, 80);

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    <!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.rect(50, 50, 80, 80);
            cxt.strokeStyle = "red";
            cxt.stroke();

            //绘制填充矩形
            cxt.rect(50, 50, 80, 80);
            cxt.fillStyle = "#FFE8E8";
            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

    2.3.4 清空矩形

    cxt.clearRect(x, y, width, height);

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

            cxt.fillStyle = "HotPink";
            cxt.fillRect(50, 50, 80, 80);
            
            cxt.clearRect(60, 60, 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
    • 清空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");

            cxt.fillStyle = "HotPink";
            cxt.fillRect(50, 50, 80, 80);

            var btn = $$("btn");
            btn.onclick = function () {
                cxt.clearRect(0, 0, cnv.width, cnv.height);
            }
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas><br />
    <input id="btn" type="button" value="清空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

    2.4 多边形

    计算各顶点坐标，然后使用moveTo()和lineTo()绘制出来。

    2.4.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");

            cxt.moveTo(40, 60);
            cxt.lineTo(100, 60);
            cxt.lineTo(100, 30);
            cxt.lineTo(150, 75);
            cxt.lineTo(100, 120);
            cxt.lineTo(100, 90);
            cxt.lineTo(40, 90);
            cxt.lineTo(40, 60);
            cxt.stroke();
        }
    </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

    2.4.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");
            
			var n = 15;
			var centerX = 100;
			var centerY = 75;
			var r = 50;
            createPolygon(cxt, n, centerX, centerY, r);//调用自定义的方法createPolygon()
            cxt.fillStyle = "HotPink";
            cxt.fill();
        }
        /*
         * n：表示n边形
         * centerX、centerY：表示n边形中心坐标
         * r：表示n边形的大小
         */
        function createPolygon(cxt, n, centerX, centerY, r) {
            cxt.beginPath();
            for (var i = 0; i < n; i++) {
                var x = Math.cos(2*Math.PI*i/n);
                var y = Math.sin(2*Math.PI*i/n);
                cxt.lineTo(centerX+r*x, centerY+r*y);
            }
            cxt.closePath();
        }
    </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
    • 40
    • 41

    2.4.3 多角星

    <!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 n = 6;
			var centerX = cnv.width/2;
			var centerY = cnv.height/2;
			var rMax = 50;
			var rMin = 25;
			createPolygonalStar(cxt, n, centerX, centerY, rMax, rMin)
            cxt.closePath();
            cxt.stroke();
			/*
			* n：表示n角星
			* centerX、centerY：表示n角星中心坐标
			* rMax：表示n角星外部圆的半径
			* rMin：表示n角星内部圆的半径
			*/
			function createPolygonalStar(cxt, n, centerX, centerY, rMax, rMin) {
				cxt.beginPath();
				for (var i = 0; i < n; i++) {
					var xMax = rMax*Math.cos(2*Math.PI*i/n);
					var yMax = rMax*Math.sin(2*Math.PI*i/n);
					cxt.lineTo(centerX+xMax, centerY+yMax);
					
					var xMin = rMin*Math.cos(2*Math.PI*(i+0.5)/n);
					var yMin = rMin*Math.sin(2*Math.PI*(i+0.5)/n);
					cxt.lineTo(centerX+xMin, centerY+yMin);
				}
				cxt.closePath();
			}
        }
    </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
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47

    2.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");
			var n = 8;
			var step = 30;
            for(var y = 0; y < n; y++) {
                for(var x = 0; x < n; x++) {
                    cxt.fillStyle = "rgb(" + Math.floor(255-255*y/n) + ", " + Math.floor(255-255*x/n) + ", 0)";
                    cxt.fillRect(x*step, y*step, step, step);
                }
            }
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="300" 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
    • 26
    • 27
    • 渐变调色板
    <!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 r = 255, g = 0, b = 0;
			var step = 6;
            for(var i = 0; i < 150; i++) {
                if(i < 25) {
                    g += 10;
                } else if(i > 25 && i < 50) {
                    r -= 10;
                } else if (i > 50 && i < 75) {
                    g -= 10;
                    b += 10;
                } else if(i >= 75 && i < 100) {
                    r += 10;
                } else {
                    b -= 10;
                }
                cxt.fillStyle = "rgb(" + r + ", " + g + ", " + b + ")";
                cxt.fillRect(step*i, 0, step, cnv.height-10);
            }
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="1000" 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
  • 相关阅读:
    【ArcGIS微课1000例】0116：将度-分-秒值转换为十进制度值（字段计算器VBA）
    ip地址会随网络变化而变化吗
    WPS/Word参考文献格式规范及引用的方法
    牛客: BM3 链表中的节点每k个一组翻转
    说说 Spring 定时任务如何大规模企业级运用
    AI算法检测对无人军用车辆的MitM攻击
    纵行科技与山鹰绿能达成合作，提供物联网资产管理数据服务
    面向对象特性分析大全集
    玩玩群晖NAS-搭建一个私有的Git服务
    两个浏览器页面数据通信，页面是非父子、非兄弟关系
  • 原文地址：https://blog.csdn.net/oqqyx1234567/article/details/125362786