canvas入门——线段绘制

最新推荐文章于 2023-11-27 14:52:53 发布
最新推荐文章于 2023-11-27 14:52:53 发布
阅读量951 收藏 6
点赞数
分类专栏： 前端学习笔记 文章标签： 前端 canvas JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/astak3/article/details/100629488
版权
moveTo、lineTo使用canvas绘制一条线段，默认已经拿到canvas的上下文context绘制一条直线需要使用context提供的moveTo、lineTo方法moveTo是线段的起点，lineTo是线段下一个点，最后使用stroke进行描边。如下代码context.moveTo(100,100)context.lineTo(200,200)context.stroke()...
摘要由CSDN通过智能技术生成

moveTo、lineTo

使用canvas绘制一条线段，默认已经拿到canvas的上下文context

绘制一条直线需要使用context提供的moveTo、lineTo方法

moveTo是线段的起点，lineTo是线段下一个点，最后使用stroke进行描边。如下代码

context.moveTo(100,100)
context.lineTo(200,200)
context.stroke()

效果图：

[外链图片转存失败(img-dtn3yBBr-1567928515393)(https://i.loli.net/2019/09/08/y7cTXhtGOsVJRU2.png)]

如果一段线段分为多段，可以多次使用lineTo方法，将每个顶点都填进去就可以了

context.moveTo(100,100)
context.lineTo(200,200)
context.lineTo(200,400)
context.stroke()

效果图：

2.png

strokeStyle、lineWidth

content还提供了strokeStyle和lineWidth两个方法，这两个方法可以的作用是描边颜色，线宽。

ctx.moveTo(100,
最低0.47元/天 解锁文章
ucc,s
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端学习笔记 -- Canvas
weixin_38457248的博客
08-18 459
Canvas画布 1、画图的步骤 1）先准备画布 2）准备画笔 3）先描路径 4）再填充 注：canvas标签的宽度和高度必须使用标签属性，不允许使用css设置 2、坐标系 坐标原点在画布的左上角 X轴水平向右 ...
canvas 如何绘制线段的实现方法
09-22
主要介绍了canvas 如何绘制线段的实现方法的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
canvas 基本用法
weixin_43180610的博客
05-28 106
canvas 基本用法 JavaScript+Canvas实现自定义画板 清除
canvas基础：绘制线段，绘制多边形
最新发布
大剑师兰特的GIS世界
11-27 721
专栏提供canvas的基础知识，高级动画，相关应用扩展等信息。canvas作为html的一部分，是图像图标地图可视化的一个重要的基础，学好了canvas，在其他的一些应用上将会起到非常重要的帮助。
使用canvas绘制笑脸
yinge0508的博客
10-12 2217
笑脸示例代码： <template> <div class="div"> <canvas id="tutorial3" width="150" height="150"></canvas> </div> </template> <script> export default { data() { return {}; }, mounted() { var canvas = do
原生js使用canvas实现鼠标绘制直线
weixin_72388638的博客
04-08 4034
直线可以看成是一小段一小段的线段组成，并且两点确定一条直线；首先当鼠标左键点击时候获取鼠标左键xy坐标，把当前获取得到的xy坐标赋值给线段起始点的坐标值，当鼠标移动后再获取新的鼠标位置x2和y2 再把获取得到到x2和y2赋值给线段的末尾点坐标值 ，之后两点连起来就是一段线段。之后再画一条线段，只要把前面那段线段的末尾点为起始点，再获取鼠标移动时候产生的新点，把两端相连就是一大段线段，如此重复。
canvas学习总结三之绘制路径-线段
09-22
在本文中，我们将深入探讨HTML5 Canvas API中的一个重要概念——绘制路径，特别是关于线段的绘制。Canvas API允许开发者在网页上动态绘制图形，而线段是基础元素之一。了解如何有效地利用`moveTo()`、`lineTo()`、`...
HTML5 Canvas 绘图——使用 Canvas 绘制图形图文教程 使用html5 canvas 绘制精美的图
09-28
我们可以通过`drawImage(image, dx, dy, dw, dh)`方法将图像绘制到Canvas上，`image`是图像源，`dx`, `dy`是目标位置的坐标，`dw`和`dh`是绘制的宽度和高度。 7. **文本绘制** 可以使用`fillText(text, x, y)`或`...
HTML5 canvas基本绘图之绘制线段
09-28
<canvas></canvas>是HTML5中新增的标签，用于绘制图形，这篇文章主要为大家详细介绍了HTML5 canvas基本绘图之绘制线段方法，感兴趣的小伙伴们可以参考一下
canvas之画一条线段
QDY5945的博客
11-12 173
1 var canvas=document.getElementById("canvas"); 2 //设置绘图环境 3 var cxt=canvas.getContext(...
canvas动态划线（canvas跟随鼠标变幻线条...）
01-02
canvas动态划线（canvas跟随鼠标变幻线条,知乎登录页面动态线条背景动画代码） 每次被下载，所需积分就被平台自动叠加，感觉有点傻，无奈重新编辑上传，感觉可选的这个1-5积分就有点少，算了无所谓了你们能下载就好
Html5中canvas画布绘制线段
qq_51066068的博客
04-25 520
绘制线段 moveTo(x,y): x,y:线段的起点坐标 lineTo(x,y) x,y:线段的终点坐标 cx.stroke();//开始绘制 //fill():不能使用 lineWidth=number;//线段粗细 代码实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
Canvas beginPath()、moveTo()、 lineTo() 、stroke() 绘制直线路径，fillText() 绘制填色的文本
蚩尤后裔-汪茂雄
12-07 5857
目录 直线路径 API 方法 绘制路径编码示例 canvas fillText() 填充文本 直线路径 API 方法 beginPath() 方法 beginPath() 方法开始一条路径，或重置当前的路径。 提示：请使用这些方法来创建路径：moveTo()、lineTo()、quadricCurveTo()、bezierCurveTo()、arcTo() 以及 arc()。 提示...
HTML5中canvas的lineTo和moveTo的用法
sxj的专栏
11-20 9414
function draw2D(){ var canvas=document.getElementById("canvas-fram"); if(canvas==undefined){ return ; } canvas.width=1000; //设置画布的宽
HTML5 Canvas中绘制线段
歪脖先生的博客
04-22 2333
绘制线段调用lineTo()方法绘制线段。lineTo(x, y)方法把当前点和lineTo()方法指定的点(x, y)用线段连接起来。如果要绘制多条线段，可以重复调用该方法。第一次调用，当前点为子路径的起点，以后每次调用，都会把上一次的终点作为本次的起点。我们使用lineTo()方法绘制两条平行线，代码如下：context.lineWidth = 10;context.strokeStyle =...
h5 Canvas线段的绘制
suwu150
02-27 1607
在Canvas中，线段也是路径中的一种，被称之为线性路径。在Canvas中绘制线性路径主要用到moveTo(x,y)、lineTo(x,y)和stroke()几个方法。 通常创建线条的方法是moveTo()和lineTo()方法,但是要使线性路径出现在canvas之中,我们必须使用上面提到的stroke()方法 创建线条 const canvas = document.getElementByI...
Canvas（三）：画各种线
香蕉你个芭呐呐的博客
05-11 2272
canvas
canvas绘制线段和箭头
04-27
在HTML5中，可以使用<canvas>元素绘制线段和箭头。以下是一个简单的示例： ``` <!DOCTYPE html> <html> <body> <canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas> <script> var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); // 绘制一条线段 context.beginPath(); context.moveTo(0, 0); context.lineTo(200, 100); context.stroke(); // 绘制一个箭头 context.beginPath(); context.moveTo(50, 50); context.lineTo(150, 50); context.lineTo(150, 30); context.lineTo(200, 60); context.lineTo(150, 90); context.lineTo(150, 70); context.lineTo(50, 70); context.closePath(); context.stroke(); </script> </body> </html> ``` 在这个例子中，我们使用了Canvas的getContext方法来获取一个2D绘图上下文，并使用该上下文的方法绘制了一条线段和一个箭头。具体来说，我们使用了moveTo方法指定了线段和箭头的起点，使用了lineTo方法指定了线段和箭头的终点，使用了stroke方法实际绘制了线段和箭头。 值得注意的是，箭头的绘制是通过绘制一个由多个直线和弧形组成的封闭路径来实现的。我们使用了closePath方法来封闭这个路径，并使用stroke方法将其显示出来。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值