《canvas》之第2章 直线图形

已于 2023-12-12 17:07:47 修改
阅读量299 收藏
点赞数
分类专栏： 整理 canvas 学习 文章标签： 前端 canvas
于 2022-06-23 12:00:00 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/oqqyx1234567/article/details/125362786
版权
整理 同时被 3 个专栏收录
181 篇文章 11 订阅
订阅专栏
学习
130 篇文章 4 订阅
订阅专栏
canvas
20 篇文章 4 订阅
订阅专栏

《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();	//开始绘制

<!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. 多条直线
  • 三条直线
<!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>
  • 三角形
<!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>
  • 矩形
<!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>

2.3 矩形

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

2.3.1 描边矩形

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

ctx.strokeStyle = 属性值;
cts.strokeRect(x, y, width, height);
  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. 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>

2.3.2 填充矩形

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

ctx.fillStyle = 属性值;
cts.fillRect(x, y, width, height);
  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. 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>
  • 同时绘制描边矩形和填充矩形
<!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>
  • 两个重叠的填充矩形
<!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>

2.3.3 rect()方法

rect(x, y, width, height);

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

ctx.rect(50, 50, 80, 80);
ctx.fillStyle="red";
ctx.fill();
//等价于
ctx.fillStyle="red";
ctx.fillRect(50, 50, 80, 80);

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

2.3.4 清空矩形

cxt.clearRect(x, y, width, height);
  • 清空指定区域
<!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>
  • 清空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>

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>

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>

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>

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>
  • 渐变调色板
<!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>
mali378287007
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
canvas绘制的直线动画
08-31
本文主要分享了canvas绘制的直线动画的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
09-28
Canvas 提供了一个二维绘图环境，通过API接口，我们可以控制图形的绘制，包括线条、形状、图像、文本等。 在HTML5中，Canvas元素的使用通常涉及到以下几个步骤： 1. **声明Canvas元素**：在HTML中，我们需要创建一...
canvas绘制直线、折线、矩形与多边形
热门推荐
zhang_cherry的博客
01-09 1万+
1、canvas的width和height属性与style中的width和height的区别 canvas是html5新增的绘图工具。通过canvas标签创建画布后，它有三个基本要素：id、宽度和高度。 特别注意的是：canvas的宽度和高度不能在style里面设置，因为此时设置的是div的宽度和高度，canvas会使用默认的宽度（300px），高度（150px）。 <canvas id="canvas" width="200px" height="200px" style="border: #138
【canvas】canvas基础使用（四）：线型的设置
最新发布
qq_2511276124的博客
04-10 947
学习如何使用canvas来设置线形。
Canvas 画直线
weixin_46441425的博客
04-01 893
canvas绘制直线
编程界明世隐的博客
01-14 3771
说明： lineTo(x, y) 绘制一条从当前位置到指定x以及y位置的直线。 moveTo(x, y) 将笔移动到指定的坐标x以及y上。 stroke() 描边 lineWidth 设置线的宽度 strokeStyle 设置线条的颜色 实例1 window.onload=function(){ var canvas = document.getElementById('canvas'); canvas.width='300'; canvas.height='...
canvas基础1 - 画直线（通俗易懂）
许小叮当的博客
06-10 3736
本文开始是canvas，通俗易懂，小白也没烦恼，
canvas基础入门系列教程(3)-绘制直线图形
螺钉课堂官方博客
02-12 403
2.1.绘制直线 2.1.1.设置描边颜色 通过strokeStyle属性来设置线条颜色 // 1. 获取到canvas对象 var oCanvas = document.getElementById('cvs') // 2. 获取到上下文环境 var ctx = oCanvas.getContext('2d') // 3. 开始绘制图形 // 3.1.把路径移动到画布中...
清华大学张思民Java第6章.ppt
11-13
本章主要探讨了Java在图形绘制和数字图像处理方面的知识，由清华大学的张思民教授讲解。 6.1 图形与图形的描绘 在Java中，我们可以使用`java.awt.Graphics`类提供的方法来绘制基本图形。每个图形对象，通常是`java....
HTML5 Canvas开发详解（第2版）源码
08-28
"HTML5 Canvas开发详解（第2版）源码"是一份宝贵的资源，提供了关于如何利用Canvas进行图形编程的深入指导。这份源码能够帮助开发者通过实例学习和理解Canvas API的各种功能。 Canvas API主要由一系列方法和属性...
《HTML5 Canvas开发详解(第2版)》示例代码
11-07
《HTML5 Canvas开发详解(第2版)》由[美] Steve Fulton和Jeff Fulton撰写，国内由任旻和罗泽鑫翻译，这本书深入探讨了Canvas API的各个方面，为读者提供了全面的学习资源。 Canvas API是HTML5标准的一部分，通过...
canvas 绘制旋转直线
07-23
1)canvas 绘制圆环 绘制带有旋转角度的直线 2）详细介绍看注释
微信小程序canvas截取任意形状的实现代码
10-15
在微信小程序中，canvas元素是用于图形绘制的重要工具，它提供了丰富的绘图API，使得开发者可以自由地在画布上绘制各种形状和图像。本文主要探讨的是如何利用canvas在微信小程序中实现截取任意形状的功能。 首先，...
学习Canvas基础-画直线
qq_67983277的博客
11-14 1663
学习Canvas基础-画直线
canvas画直线
往事随风
04-23 1039
随着数据可视化的蓬勃发展，市场上对canavas相关的需求量越来越大，今天整理了一些canavas的一些基础操作方法，希望能帮助到大家。 万丈高楼平地起，从零开始，先使用 canavas 画一条直线 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /
初识 Canvas（使用 Canvas 绘制直线图形）
两个月亮
01-27 799
Canvas 元素已被大多数浏览器所支持，如果你担心旧版本浏览器无法显示 Canvas 元素，你可以在 Canvas 元素内部嵌套另一个元素（替补元素）。如果浏览器支持 Canvas 元素，则 Canvas 元素内部嵌套的另一个元素将被忽略；如果浏览器不支持 Canvas 元素，则 Canvas 元素将被忽略，而其内部的元素将正常发挥作用。，否则该元素后的元素都将被认为是 canvas 元素的替补元素。函数来为直线的绘制指定绘制的起点，那么上一条直线的终点将作为下一条直线的起点（第一条直线的起点必须使用。
Canvas绘制直线
hotboyboy的博客
03-15 510
栅格 在我们开始画图之前，我们需要了解一下画布栅格（canvas grid）以及坐标空间。如右图所示，canvas元素默认被网格所覆盖。通常来说网格中的一个单元相当于canvas元素中的一像素。栅格的起点为左上角（坐标为（0,0））。所有元素的位置都相对于原点定位。所以图中蓝色方形左上角的坐标为距离左边（X轴）x像素，距离上边（Y轴）y像素（坐 标为（x,y））。 moveTo() 将笔触移动到...
canvas绘制直线，斜线
qq_21277357的博客
01-01 340
【代码】canvas绘制直线，斜线。
reportlab canvas 如何画虚线 ？
08-22
reportlab是一个用于生成PDF文档的Python库，其中的canvas模块可以用于绘制各种图形。要画虚线，可以使用canvas模块中的drawLine方法，并通过设置线条属性来实现。 首先，需要导入相应的模块： ```python from ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值