关于canvas的lineTo()方法和ClosePath()

最新推荐文章于 2023-05-06 15:59:01 发布
最新推荐文章于 2023-05-06 15:59:01 发布
阅读量2k 收藏
点赞数
分类专栏： 准备学前端了了了 文章标签： html5 canvas lineTo
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sz0hj/article/details/46942373
版权
在学习HTML5 Canvas时，通过lineTo()方法的使用，作者试图理解其绘制路径的过程。在尝试中，发现原本预期的直线图形因调用closePath()方法而变为闭合路径，从而连接了路径的第一个和最后一个点，形成一个封闭图形。这揭示了closePath()在Canvas绘图中的关键作用。
摘要由CSDN通过智能技术生成

就在刚刚学习html5的canvas的时候,讲到lineTo,视频里面给了一段代码画出了一个这么个东西:


于是我很好奇的想要一步一步走一遍,想知道到底是怎么画出来的(这个前后的绘制路径什么的很令人好奇啊). 刚刚到第三步的时候我就懵了,他跑出来画出来了这么个图形:


我就在奇怪为什么不是这个(明明按照w3c上面lineTo这个方法的解释应该是这样的):

最低0.47元/天 解锁文章
sz0hj
关注
专栏目录
html5使用canvas 的lineTo方法绘制折线并实现小球运动轨迹
wxCSDN1997的博客
01-10 2021
上次使用了canvas 的bezierCurveTo方法绘制曲线 并实现小球运动轨迹。 现在研究一下lineto怎么做到小球运动轨迹。（当然还没有研究 bezierCurveTo 是否可以绘制直线，之后有空在研究 ） 先附上效果图： 小球从 黄色起点位置开始运动，慢慢运动到粉色线上 ，超出粉色线后，小球恢复起始位置重新开始。 附上代码： 说明 xDis yDis 黄色线上的计算公式 因为设计线条时 正好设置的是 底为300 高为400 斜边为500的直角三...
html5的canvas绘制线条，moveTo和lineTo详解
王业楼的个人博客
11-08 6282
今天在看html5，里面新增的属性有一个canvas，它相当于一个画布你可以用js在里面画你想要的效果！我在w3c的手册里面看到用moveTo和lineTo绘制线条讲的不是很清楚，尤其是moveTo和lineTo函数没有说的很明白！所以特地在这里与新手朋友分享一下我的理解！     一、w3c里面的代码和实现效果     手册的代码是这样的
HTML5-Canvas简介line to&move to
冯泽威的博客
10-23 721
Canvascanvas是HTML5中新增的标签，用于绘制图形，实际上，这个标签和其他的标签一样，其特殊之处在于该标签可以获取一个CanvasRenderingContext2D对象，我们可以通过JavaScript脚本来控制该对象进行绘图。 canvas只是一个绘制图形的容器，除了id、class、style等属性外，还有height和width属性。在canvas元素上绘图主要有三步：1获取c
CSS——canvas 中 lineTo()与moveTo()的区别
qq_43201350的博客
02-08 749
使用方式： context.moveTo(10, 10); context.lineTo(80, 10); moveTo： 移动到指定位置，然后使用lineTo去画。 lineTo：直接画到指定的位置。当没设置moveTo的时候，这个位置就为空，这样话lineTo的第一个点就没有东西，就是第一个图。 ......
从moveTo到lineTo，画出Canvas的第一条线
weixin_45785873的博客
04-20 1447
Canvas是H5新增的一个标签, 我们可以通过JS在这个标签上绘制各种图案 Canvas 拥有多种绘制路径、矩形、圆形、字符以及图片的方法。
html canvas第三课 （moveto lineto beginpath closepath measureText等）
weixin_44555663的博客
09-18 207
第3周课程总结（9.16～9.20） 1、复习上周内容，熟悉setTimeout方法及其运行原理。 var n=0; function showWords() { context.clearRect(0, 0, canvas.width, canvas.height);//清空 if(n<words.length) { drawText(words.c...
HTML5中canvas中的beginPath()和closePath()的重要性
09-22
在Canvas中绘制图形时，会有一系列的绘图指令构成一个路径，比如移动画笔的位置(moveTo)、画线(lineTo)等。一旦调用了beginPath()，当前的路径就会被重置，因此你可以开始一个新的路径。这一点至关重要，因为它可以...
html5 Canvas绘制线条 closePath()实例代码
09-28
2. 第二个路径同样以`beginPath()`开始，然后`moveTo(25,25)`、`lineTo(100,25)`和`lineTo(25,100)`定义了一个矩形的三边，但这次没有调用`closePath()`，所以矩形的第四边（即起点25,25和终点100,25之间）没有被...
借助HTML5 Canvas来绘制三角形和矩形等多边形的方法
12-13
这个对象提供了各种属性和方法，用于控制在Canvas元素上绘制的内容。以下是一些关键的属性和方法： 1. **strokeStyle**: 用于设置线条颜色，可以是CSS颜色字符串、CanvasGradient或CanvasPattern。例如，`ctx....
canvas笔记-lineTo()与moveTo()的区别
IT1995的博客
05-30 6888
首先来看下如下代码： let canvas = document.getElementById("canvas"); canvas.width = 800; canvas.height = 800; let context = canvas.getContext("2d"); context.lineWidth = 10; context.lineTo(10, 10); context.l
《canvas》之第2章 直线图形
yxqq378287007的博客
06-23 546
canvas 直线图形
canvas：基础知识【直线和矩形】
读心悦
01-13 1163
canvas，就是画布，是HTML5和核心技术之一，结合JavaScript，可以绘制各种各样的图形，比如矩形、曲线、圆形等等。另外，canvas可以绘制图表、动画效果、游戏开发。基本图形汇中有直线和曲线。常见的直线图形是直线、矩形和多边形。
canvas——有无closePath()的区别
dielin8349的博客
05-22 302
closePath()会将没封闭的图形，自动封上。 对于fill()来说，closePath()的有无没有差别。 <script type="text/javascript"> window.onload = function(){ var canvas = document.getElementById("can...
HTML5中canvas的lineTo和moveTo的用法
sxj的专栏
11-20 9442
function draw2D(){ var canvas=document.getElementById("canvas-fram"); if(canvas==undefined){ return ; } canvas.width=1000; //设置画布的宽
使用canvas划线遇到的覆盖问题
最新发布
Dyj_zf的博客
05-06 780
可以发现右边的图边框是灰色的，是连接线的颜色覆盖了小球边框的颜色，周围小球是遍历数组渲染的，遍历的时候是先画的链接线后画的球，当时不明白问题出在了哪里，打断点发现，是遍历第二个数据的时候画连接线的颜色设置覆盖了一个球的边框颜色设置，后来发现canvas画图的时候画完一条线之后，使用。这样，第二条线将使用新的颜色进行绘制，而不会覆盖第一条线。以确保下一条线使用正确的颜色。想实现这样一个功能，开发中发现了问题，汇出的图是这样的。注：关键点在beginPath()，，并使用 beginPath()
canvas绘制的线条位置错乱
weixin_46787337的博客
07-15 1180
canvas标签的宽高可以通过js的方式设置,也可以在style样式中直接设置,但是这两种设置的方式显示的效果天差地别，Canvas的默认宽高是width150使用canvas标签一定要用js指定元素的宽高，不然就是bughttpshttps。...
canvas-画布
weixin_44486539的博客
12-02 2667
HTML5 的 canvas 元素用于定义画布，是一个矩形区域，默认颜色为白色，默认大小为 300 * 150；通过 JavaScript 可以在该区域上绘制图像 ，开发人员可以控制其每一个像素；canvas 拥有多种绘制：路径、矩形、圆形、字符以及添加图像的方法。 **注意**：如果要设置画布的大小不能通过 CSS 样式进行设置，只能通过元素的 `width` 、`height` 属性进行设置，否则会出现问题。
canvas中beginPath()与closePath()的使用
weixin_33883178的博客
12-28 630
2019独角兽企业重金招聘Python工程师标准>>> ...
canvas笔记-closePath函数的使用（含例子）
IT1995的博客
05-31 2342
如下代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <canvas id="canvas" style="border:1px solid #aaa;display:block;margin:50px auto;">
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值