《canvas》之第10章 canvas路径

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

《canvas》之第10章 canvas路径

第10章 canvas路径

10.1 什么是路径

方法说明
beginPath()开始一条新路径
closePath()关闭当前路径
isPointInPah()判断点是否存在于当前路径内

10.2 beginPath()方法和closePath()方法

beginPath()方法和closePath()方法，只运用于canvas基本图形的绘制。

10.2.1 beginPath()方法

canvas基于状态绘制图形，每次绘制（stroke()或fill()），检查当前状态的所有值（strokeStyle、fillStyle、lineWidth等）。

cxt.beginPath();

  • beginPath()开始新路径，则不同路径使用不同值。

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

  • 未开始新路径（所有cxt.strokeStyle = “blue”）

<!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.lineWidth = 5;

            //第1条直线
            cxt.moveTo(50, 40);
            cxt.lineTo(150, 40);
            cxt.strokeStyle = "red";
            cxt.stroke();

            //第2条直线
            cxt.moveTo(50, 80);
            cxt.lineTo(150, 80);
            cxt.strokeStyle = "green";
            cxt.stroke();

            //第3条直线
            cxt.moveTo(50, 120);
            cxt.lineTo(150, 120);
            cxt.strokeStyle = "blue";
            cxt.stroke();
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray"></canvas>
</body>
</html>
  • 开始新路径（cxt.strokeStyle不同）
<!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.lineWidth = 5;

            //第1条直线
            cxt.beginPath(); //可省略第一条路径
            cxt.moveTo(50, 40);
            cxt.lineTo(150, 40);
            cxt.strokeStyle = "red";
            cxt.stroke();

            //第2条直线
            cxt.beginPath();
            cxt.moveTo(50, 80);
            cxt.lineTo(150, 80);
            cxt.strokeStyle = "green";
            cxt.stroke();

            //第3条直线
            cxt.beginPath();
            cxt.moveTo(50, 120);
            cxt.lineTo(150, 120);
            cxt.strokeStyle = "blue";
            cxt.stroke();
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray"></canvas>
</body>
</html>

10.2.2 closePath()方法

关闭路径，路径起点和终点连接起来，成为封闭图形。

cxt.closePath();
  • 圆弧与扇形
<!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.arc(70, 70, 50, 0, -90 * Math.PI / 180, true);
			//cxt.closePath();
            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(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.closePath();//cxt.lineTo(40, 60);
            cxt.stroke();
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
  • beginPath()配合closePath()使用
<!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(70, 70, 50, 0, -90 * Math.PI / 180, true);
            cxt.closePath();
            cxt.strokeStyle = "red";
            cxt.stroke();

            //cxt.beginPath();
            cxt.arc(70, 120, 50, 0, -90 * Math.PI / 180, true);
            cxt.closePath();
            cxt.strokeStyle = "blue";
            cxt.stroke();
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>
  • 未使用closePath()绘制封闭图形
<!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.lineWidth = 10;

            //cxt.beginPath();
            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.closePath();
            cxt.strokeStyle = "HotPink";
            cxt.stroke();
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray;"></canvas>
</body>
</html>

10.3 isPointInPah()方法

判断点是否存在于当前路径，不支持strokeRect()和fillRect()，只能用rect()代替。

cxt.isPointInPah(x, y);

<!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.rect(50, 50, 80, 80);
            cxt.stroke();
            //cxt.strokeRect(50, 50, 80, 80);
            if (cxt.isPointInPath(100, 50)) {
                alert("点(100,100)存在于当前路径中");
            }
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray"></canvas>
</body>
</html>

Google和Firefox不支持点在直线上的判断，IE支持。

<!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, 50);
            cxt.lineTo(150, 50);
            cxt.stroke();
            if (cxt.isPointInPath(100, 50)) {
                alert("点(50,100)存在于当前路径中");
            }
        }
    </script>
</head>
<body>
    <canvas id="canvas" width="200" height="150" style="border:1px dashed gray"></canvas>
</body>
</html>
mali378287007
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
canvas绘制路径(直线、圆、切线圆弧、二次贝塞尔曲线、三次贝塞尔曲线、矩形)
caoxinjian423的博客
11-04 622
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>canvas绘制路径</title> <style> body{margin: 0;.
HTML5 canvas基本绘图之绘制五角星
09-27
// 五角星有10个顶点，每个顶点由两个线段构成 for (var i = 0; i ; i++) { // 计算第一个线段的终点坐标 context.lineTo(Math.cos((18 + i * 72) / 180 * Math.PI) * 200 + 200, -Math.sin((18 + i * 72) / 180...
canvas绘制路径
weixin_43269800的博客
02-13 550
canvas绘制路径 图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。 canvas绘制基本步骤 1.首先，你需要创建路径起始点。 2.然后你使用画图命令去画出路径 3.之后你把路径封闭。 4.一旦路径生成，你就能通过描边或填充路径区域来渲染图形。 beginPath() 新建一条路径，生成之后，图形绘制命令被指向到路径上准备生成路径。 生成路径的第一步叫...
Canvas——路径绘制
mantou_riji的博客
01-13 1553
原因：因为绘制好空心长方形之后没有 ”抬笔“ ，就会认为空心长方形和后面绘制的长方形是一个图案，填充的时候就会一起填充。canvas最重要的就是画笔，可以通过画笔上的属性和方法绘制出不同样式的各种图形。，使用path2D创造出路径之后，直接在路径上进行画画。canvas就是一个画板，可以使用canvas在页面上画出想要的图形。fill的原理：取画笔的起点和终点进行连接，形成闭合图形再进行填充。绘制原理：三点一半径进行圆弧绘制。canvas是一个画板，我们可以在画板上绘制。就可以进行图像的绘制。
canvas 路径
hugejihu9的专栏
01-31 279
文章来自：源码在线https://www.shengli.me/h5/634.html     效果展示：      
canvas基础-路径（2）
a595786041的博客
03-16 440
1、canvas路径 canvas路径是指存以贝塞尔曲线为理论基础的区域绘制方式，绘制时产生的线条称为路径。路径由一个或多个直线段或者曲线组成，或者是经过精确计算画出的特殊图形，路径是canvas实现绘图的基础 1.1canvs绘图方法 1.2canvas绘制直线 1.2.1绘制一条直线 绘制直线时，一般会用到moveTo方法与lineTo两个...
js-canvas基本介绍
辉生活-记录程序生活的点滴。
04-28 1399
###1. canvas（画布） 是HTML 5 新增的元素，可用于通过使用JavaScript中的脚本来绘制图形 默认宽高为300px*150px 基本概念和方法入门推荐： https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial ###2.渲染上下文 元素只是创造了一个固定大小的画布，要想在它上面绘制内容，我们需要...
HTML5 Canvas 开发详解（第2版）.zip
06-09
Canvas的API主要由两部分组成：绘图方法和路径操作。 二、绘图方法 Canvas API提供了多种绘图方法，如： 1. `fillRect(x, y, width, height)`：绘制填充的矩形。 2. `strokeRect(x, y, width, height)`：绘制矩形...
HTML5 canvas基本绘图之绘制线段
12-13
在例子中，我们首先调用`moveTo(10,10)`，然后调用`lineTo(200,200)`，这将在画布上画出一条从(10,10)到(200,200)的直线。 为了改变线条样式，我们可以使用`context.lineWidth`设置线宽，如`context.lineWidth = 2;...
html5 canvas开发详解第二版 示例代码
01-09
1. **基本绘图**：Canvas API提供了`fillRect()`、`strokeRect()`等函数来绘制矩形，`beginPath()`、`moveTo()`、`lineTo()`等方法用于绘制自由路径，以及`arc()`用于绘制圆弧。通过这些基础元素，可以构建出复杂的...
第23章 canvas创建一个画布
04-23
5. **路径与形状**：可以创建复杂路径，用于绘制自定义形状。例如，绘制一个五角星： ```javascript ctx.beginPath(); for (var i = 0; i ; i++) { ctx.rotate(Math.PI / 5); ctx.lineTo(100, 0); ctx.rotate...
初遇canvas之二
qq_31207499的博客
07-19 191
###canvas绘制路径     图形的基本元素是路径。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。      ###步骤     1.首先，你需要创建路径起始点。     2.然后你使用画图命令去画出路径     3.之后你把路径封闭。     4.一旦路径生成，你就能通过描边或填充路径区域来渲染图形。      ###绘制三角形     beginPath()     ...
HTML5 Canvas 教程：四、路径
gunnery的专栏
10-15 276
四、路径 Paths   4.1路径 Path   在HTML5画布上绘制路径，可以通过连接多个子路径（曲线）实现。每个子路径的结束点成为新的路径的上下文点。我们可以使用lineTo()、arcTo()、quadraticCurveTo()和bezierCurveTo()方法来绘制每个子路径。每次开始绘制一个新的路径时，也可以使用beginPath()方法。   &lt;!DOCT...
canvas学习心得之路径
海阔天空
10-27 2026
刚开始接触canvas的路径时，有些迷糊。 由于我们正常生活的绘画逻辑，或者由于java的GUI编程的影响，我们总是以为绘画就是有纸有笔，直接画出图形就可以了。 这纸笔也就是编程环境，这是必不可少的，一般来说，我们就可以直接绘图了，但在canvas的绘图中，虽然也能直接绘制一些图，但是更多的图是通过路径来绘制的。刚开始接触的时候，有好几次都是设置好路径，运行程序，结果界面空白一片，就是没有图出
HTML5 canvas中的路径方法
weixin_30693183的博客
12-22 114
路径方法 fill() 填充当前绘图（路径） stroke() 绘制已定义的路径 beginPath() 起始一条路径，或重置当前路径 moveTo() 把路径移动到画布中的指定点，不创建线条 clos...
理解canvas路径
banzanbei4669的博客
09-05 417
canvas路径和ps里面的路径差不多，在进行图形绘制时，先绘制出来图形的路径，然后再描边或者填充。 canvas路径还有子路径的概念,在某一时刻，canvas之中只能有一条路径存在，Canvas规范将其称为当前路径。然而这条路径可以包含许多子路径。而子路径，又是由两个或者更多的点组成的。 看下面代码 context.beginPath(); context.rect(...
2.canvas路径
singlow123的博客
02-01 638
canvas路径canvas路径指存以贝塞尔曲线为理论基础的区域绘制方式，绘制时产生的线条称为路径。具体百度创建canvas之前首先得创建一个html canvas标签<canvas id="canvas" width="400" height="500"></canvas>1.画布环境<script type="text/javascript"> // 首先获取canvas对象 v
HTML5 Canvas 教程：十一、图像数据与路径
gunnery的专栏
10-18 1846
十一、图像数据与路径 Image Data and URL   11.1图像数据 Image Data   为了获得画布上矩形区域的每个像素的图像数据，可以使用画布上下文的getImageData()方法获得图像数据对象，然后从data属性访问像素数据。图像数据中的每个像素包含四个分量，即红色、绿色、蓝色和alpha分量。使用图像数据对象访问像素数据有三种常用技术。   1、遍历从左上...
Canvas——路径使用的一些感悟
小狼驿站
05-06 3424
路径使用的一些总结： moveTo()和lineTo()函数都是用来移动点，绘制路径的函数，绘制完成后，调用closePath()函数，它会创建一条由描点的终点通向起点的虚拟路径，闭合整个路径，然后调用stroke()函数进行描边，最后可以用fill()函数来填充样式。 简单的实例代码如下： charset="utf-8">   type="text/javascript"
canvas 每段路径设置不同的颜色
最新发布
06-08
例如，你可以在绘制第一段路径之前设置颜色为红色，绘制第二段路径之前设置颜色为蓝色，以此类推。以下是一个简单的示例代码： ``` const canvas = document.getElementById('myCanvas'); const ctx = canvas....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值