扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > node.js >如何绘制HTML5中的Canvas基本线条
  • 695

0
分享到

如何绘制HTML5中的Canvas基本线条

2024-04-02 19:04:59 695人浏览 安东尼
摘要

本篇文章为大家展示了如何绘制HTML5中的canvas基本线条，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。怎么画线条？和现实中画画差不多：1.移动画笔，使画笔移动

本篇文章为大家展示了如何绘制HTML5中的canvas基本线条，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

怎么画线条？和现实中画画差不多：
1.移动画笔，使画笔移动至绘画的开始处
2.确定第一笔的停止点
3.规划好之后，选择画笔（包括画笔的粗细和颜色等）
4.确定绘制

因为Canvas是基于状态的绘制（很重要，后面会解释），所以前面几步都是在确定状态，最后一步才会具体绘制。
1.移动画笔(moveTo())
之前我们获得了画笔context，所以以此为例，给出改方法的使用实例——context.moveTo(100,100)。这句代码的意思是移动画笔至(100,100)这个点（单位是px）。记住，这里是以canvas画布的左上角为笛卡尔坐标系的原点，且y轴的正方向向下，x轴的正方向向右。
2.笔画停点(lineTo())
同理，context.lineTo(600,600)。这句的意思是从上一笔的停止点绘制到(600,600)这里。不过要清楚，这里的moveTo()``lineTo()都只是状态而已，是规划，是我准备要画，还没有开始画，只是一个计划而已！
3.选择画笔
这里我们暂且只设置一下画笔的颜色和粗细。
context.lineWidth = 5，这句话的意思是设置画笔(线条)的粗细为10px。
context.strokeStyle = "#AA394C"，这句话的意思是设置画笔(线条)的颜色为玫红色。
因为Canvas是基于状态的绘制，所以我们在选择画笔粗细和颜色的同时，其实也是选择了线条的粗细和颜色。
4.确定绘制
确定绘制只有两种方法，fill()和stroke()，有点绘画基础的应该知道，前者是指填充，后者是指描边。因为我们只是绘制线条，所以只要描边就可以了。调用代码context.stroke()即可。


画一个线条
不就一条线段吗！废话了这么多！那我们就开始画吧。

javascript Code复制内容到剪贴板

  1. <!DOCTYPE html>   
<html lang="zh">   
<head>   
    <meta charset="UTF-8">   
    <title>从线条开始</title>   
</head>   
<body>   
<div id="canvas-warp">   
    <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">   
        你的浏览器居然不支持Canvas？！赶快换一个吧！！   
    </canvas>   
</div>   
  
<script>   
    window.onload = function(){   
        var canvas = document.getElementById("canvas");   
        canvas.width = 800;   
        canvas.height = 600;   
        var context = canvas.getContext("2d");   
  
        context.moveTo(100,100);   
        context.lineTo(600,600);   
        context.lineWidth = 5;   
        context.strokeStyle = "#AA394C";   
        context.stroke();   
    }   
</script>   
</body>   
</html>

运行结果：
如何绘制HTML5中的Canvas基本线条

(一直有小伙伴问我页面右下角的熊是什么鬼？哦哦，之前忘解释了，那个是我的防伪水印！)
我还标注了一个页面解析图，供大家参考。
如何绘制HTML5中的Canvas基本线条

这里我将原本<canvas>标签中的width和height去掉了，但在JavaScript代码中设置了canvas对象的width和height的属性。

小结：要设置画布的大小，只有这两种方法

1.在<canvas>标签中设置；

2.在js代码中设置canvas的属性.

怎么样，是不是非常的酷。接下来我们要加快脚步了，绘制一个多线条组成的图形。是不是感觉自己离艺术家又进了一步呢？别看这只是简简单单的一条线段，这一画只是我们的一小步，但却是人类的一大步！

绘制折线
上面我们已经成功绘制了一条线段。那么，如果我要绘制有两个笔画甚至是很多笔画的折线怎么办呢？
聪明的小伙伴肯定已经想到了，这还不简单，复用lineTo()就可以了。下面我就献丑随便画了一条优美的折线~

JavaScript Code复制内容到剪贴板

  1. <!DOCTYPE html>   
<html lang="zh">   
<head>   
    <meta charset="UTF-8">   
    <title>绘制折线</title>   
</head>   
<body>   
<div id="canvas-warp">   
    <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">   
        你的浏览器居然不支持Canvas？！赶快换一个吧！！   
    </canvas>   
</div>   
  
<script>   
    window.onload = function(){   
        var canvas = document.getElementById("canvas");   
        canvas.width = 800;   
        canvas.height = 600;   
        var context = canvas.getContext("2d");   
  
        context.moveTo(100,100);   
        context.lineTo(300,300);   
        context.lineTo(100,500);   
        context.lineWidth = 5;   
        context.strokeStyle = "#AA394C";   
        context.stroke();   
    }   
</script>   
</body>   
</html>

运行结果：
如何绘制HTML5中的Canvas基本线条


绘制多条折线
那同理，我们要绘制多条样式各不相同的折线怎么办呢？比如我们在这里画三条折线，分别是红色、蓝色、黑色。聪明的小伙伴肯定想到了，这还不简单，只需要平移一下再改下画笔颜色就行了。代码格式都一样的，复制就可以了。代码如下。

JavaScript Code复制内容到剪贴板

  1. <!DOCTYPE html>   
<html lang="zh">   
<head>   
    <meta charset="UTF-8">   
    <title>绘制折线</title>   
</head>   
<body>   
<div id="canvas-warp">   
    <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">   
        你的浏览器居然不支持Canvas？！赶快换一个吧！！   
    </canvas>   
</div>   
  
<script>   
    window.onload = function(){   
        var canvas = document.getElementById("canvas");   
        canvas.width = 800;   
        canvas.height = 600;   
        var context = canvas.getContext("2d");   
  
        context.moveTo(100,100);   
        context.lineTo(300,300);   
        context.lineTo(100,500);   
        context.lineWidth = 5;   
        context.strokeStyle = "red";   
        context.stroke();   
  
        context.moveTo(300,100);   
        context.lineTo(500,300);   
        context.lineTo(300,500);   
        context.lineWidth = 5;   
        context.strokeStyle = "blue";   
        context.stroke();   
  
        context.moveTo(500,100);   
        context.lineTo(700,300);   
        context.lineTo(500,500);   
        context.lineWidth = 5;   
        context.strokeStyle = "black";   
        context.stroke();   
    }   
</script>   
</body>   
</html>

运行结果：
如何绘制HTML5中的Canvas基本线条

咦？是不是很奇怪？说好的先红色，再蓝色，再黑色呢？怎么全是黑色了？其实，这里的原因是我之前一直强调的一点&mdash;&mdash;Canvas是基于状态的绘制。
什么意思呢？其实这段代码每次使用stroke()时，它都会把之前设置的状态再绘制一遍。第一次stroke()时，绘制一条红色的折线；第二次stroke()时，会再重新绘制之前的那条红色的折线，但是这个时候的画笔已经被更换成蓝色的了，所以画出的折线全是蓝色的。换言之，strokeStyle属性被覆盖了。同理，第三次绘制的时候，画笔颜色是最后的黑色，所以会重新绘制三条黑色的折线。所以，这里看到的三条折线，其实绘制了3次，一共绘制了6条折线。
那么，我想绘制三条折线，难道就没有办法了吗？艺术家之魂到此为止了么？没救了么？不，还有办法。
使用beginPath()开始绘制
为了让绘制方法不重复绘制，我们可以在每次绘制之前加上beginPath()，代表下次绘制的起始之处为beginPath()之后的代码。我们在三次绘制之前分别加上context.beginPath()。

JavaScript Code复制内容到剪贴板

  1. <!DOCTYPE html>   
<html lang="zh">   
<head>   
    <meta charset="UTF-8">   
    <title>绘制折线</title>   
</head>   
<body>   
<div id="canvas-warp">   
    <canvas id="canvas" style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;">   
        你的浏览器居然不支持Canvas？！赶快换一个吧！！   
    </canvas>   
</div>   
  
<script>   
    window.onload = function(){   
        var canvas = document.getElementById("canvas");   
        canvas.width = 800;   
        canvas.height = 600;   
        var context = canvas.getContext("2d");   
  
        context.beginPath();   
        context.moveTo(100,100);   
        context.lineTo(300,300);   
        context.lineTo(100,500);   
        context.lineWidth = 5;   
        context.strokeStyle = "red";   
        context.stroke();   
  
        context.beginPath();   
        context.moveTo(300,100);   
        context.lineTo(500,300);   
        context.lineTo(300,500);   
        context.lineWidth = 5;   
        context.strokeStyle = "blue";   
        context.stroke();   
  
        context.beginPath();   
        context.moveTo(500,100);   
        context.lineTo(700,300);   
        context.lineTo(500,500);   
        context.lineWidth = 5;   
        context.strokeStyle = "black";   
        context.stroke();   
    }   
</script>   
</body>   
</html>

如何绘制HTML5中的Canvas基本线条

可以看到，这里得到了我们预想的结果。因为使用了beginPath()，所以这里的绘制过程如我们所想的那样，只绘制了三次，而且每次只绘制一条折线。beginPath()是绘制设置状态的起始点，它之后代码设置的绘制状态的作用域结束于绘制方法stroke()、fill()或者closePath()，至于closePath()之后会讲到。
所以我们每次开始绘制前都务必要使用beginPath()，为了代码的完整性，建议大家在每次绘制结束后使用closePath()。

上述内容就是如何绘制HTML5中的Canvas基本线条，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注编程网node.js频道。

--结束END--

本文标题: 如何绘制HTML5中的Canvas基本线条

本文链接: https://lsjlt.com/news/81203.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 如何绘制HTML5中的Canvas基本线条
    本篇文章为大家展示了如何绘制HTML5中的Canvas基本线条，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。怎么画线条？和现实中画画差不多：1.移动画笔，使画笔移动...
    99+
    2024-04-02
  • HTML5中怎么用canvas绘制线条
    本篇内容介绍了“HTML5中怎么用canvas绘制线条”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！ &...
    99+
    2024-04-02
  • HTML5中怎么用Canvas绘制各种线条
    本篇内容介绍了“HTML5中怎么用Canvas绘制各种线条”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！ ...
    99+
    2024-04-02
  • HTML5 Canvas如何绘制文本
    这篇文章主要介绍HTML5 Canvas如何绘制文本，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！ 　　HTML5 Canvas 绘制文本 　　HTML5 Canvas 可以使用...
    99+
    2024-04-02
  • 如何使用html5 Canvas绘制基本的图形
    这篇文章主要介绍“如何使用html5 Canvas绘制基本的图形”，在日常操作中，相信很多人在如何使用html5 Canvas绘制基本的图形问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望...
    99+
    2024-04-02
  • 如何使用HTML5的Canvas绘制曲线
    这篇文章主要讲解了“如何使用HTML5的Canvas绘制曲线”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“如何使用HTML5的Canvas绘制曲线”吧！Ca...
    99+
    2024-04-02
  • 怎么用HTML5 Canvas绘制直线或折线等线条
    本篇内容介绍了“怎么用HTML5 Canvas绘制直线或折线等线条”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有...
    99+
    2024-04-02
  • HTML5中canvas绘制线段的方法
    这篇文章主要介绍HTML5中canvas绘制线段的方法，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！<canvas></canvas>是HTML5中新增的标签，用于绘制图形，实际上，这个标签和...
    99+
    2023-06-09
  • HTML5 Canvas如何绘制贝塞尔曲线
    这篇文章给大家分享的是有关HTML5 Canvas如何绘制贝塞尔曲线的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。 贝塞尔曲线 ：它可以是二次和三次方的形式，一般用于绘制复杂而...
    99+
    2024-04-02
  • 如何使用HTML5 Canvas API绘制弧线
    这篇文章主要为大家展示了“如何使用HTML5 Canvas API绘制弧线”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何使用HTML5 Canvas API...
    99+
    2024-04-02
  • HTML5中怎么用canvas绘制曲线
    本文小编为大家详细介绍“HTML5中怎么用canvas绘制曲线”，内容详细，步骤清晰，细节处理妥当，希望这篇“HTML5中怎么用canvas绘制曲线”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起...
    99+
    2024-04-02
  • 如何实现HTML5 Canvas绘制圆点虚线
    这篇文章主要介绍“如何实现HTML5 Canvas绘制圆点虚线”，在日常操作中，相信很多人在如何实现HTML5 Canvas绘制圆点虚线问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大...
    99+
    2024-04-02
  • HTML5 canvas怎么绘制酷炫能量线条效果
    这篇文章主要讲解了“HTML5 canvas怎么绘制酷炫能量线条效果”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“HTML5 canvas怎么绘制酷炫能量线...
    99+
    2024-04-02
  • HTML5怎么在canvas中绘制文本
    这篇文章主要介绍“HTML5怎么在canvas中绘制文本”，在日常操作中，相信很多人在HTML5怎么在canvas中绘制文本问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”HT...
    99+
    2024-04-02
  • HTML5 Canvas如何绘制图像
    这篇文章给大家分享的是有关HTML5 Canvas如何绘制图像的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。 canvas可以引入图像，它可以用于图片合成或者制作背景等。只要是...
    99+
    2024-04-02
  • html5中​怎么使用Canvas绘制直线
    这篇文章主要介绍“html5中怎么使用Canvas绘制直线”，在日常操作中，相信很多人在html5中怎么使用Canvas绘制直线问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”...
    99+
    2024-04-02
  • HTML5中canvas基本绘图之绘制阴影效果的示例分析
    小编给大家分享一下HTML5中canvas基本绘图之绘制阴影效果的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！<canvas></ca...
    99+
    2023-06-09
  • 怎么使用HTML5的Canvas绘制曲线
    今天小编给大家分享一下怎么使用HTML5的Canvas绘制曲线的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们...
    99+
    2024-04-02
  • 如何用html5的canvas画布绘制贝塞尔曲线
    这篇“如何用html5的canvas画布绘制贝塞尔曲线”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来...
    99+
    2024-04-02
  • HTML5中怎么用Canvas绘制圆点虚线
    本篇内容主要讲解“HTML5中怎么用Canvas绘制圆点虚线”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“HTML5中怎么用Canvas绘制圆点虚线”吧! 代...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作