canvas系列教程02-直线和曲线

最新推荐文章于 2021-05-30 19:59:20 发布
最新推荐文章于 2021-05-30 19:59:20 发布
阅读量281 收藏
点赞数
分类专栏： 前端 文章标签： 前端 canvas javascript 开发人员
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dabinge666/article/details/78866214
版权
上一篇文章我们搭建了基础环境，然后画了个矩形玩了玩，至于如何画矩形线框之类的，这些看看手册就行了，没啥复杂的，参数搞对单词别拼错就OK.


这篇文章说下常见的坑和我们常用资料又比那些基础的线框实用些的曲线。


啥也不说，先上一梭子代码。


```
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    canvas{
      width:800px;
      height: 600px;
      margin: 0 auto;
      border: 1px solid #000;
      display: block;
    }
  </style>
  <script type="text/javascript">
      window.onload = function(){
        var oC = document.querySelector('#c1');
        var gd = oC.getContext('2d');
        gd.beginPath();//忽略以前的画的的东西从新开始
        gd.moveTo(30,30);
        gd.lineTo(30,100);
        gd.lineWidth = 10;//注意不加px
        gd.strokeStyle = 'aqua';//神一样的颜色
        gd.stroke();


      };
  </script>


</head>
<body>
    <canvas id="c1" width="300" height="300"></canvas>
</body>
</html>


```


moveTo ,lineTo，设个宽度颜色一stroke（描边），完事儿。


好了，我告诉上面的例子是坑爹玩意，直接上坑。


```
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    canvas{
      width:800px;
      height: 600px;
      margin: 0 auto;
      border: 1px solid #000;
      display: block;
    }
  </style>
  <script type="text/javascript">
      window.onload = function(){
        var oC = document.querySelector('#c1');
        var gd = oC.getContext('2d');
        gd.beginPath();//忽略以前的画的的东西从新开始
        gd.moveTo(30,30);
        gd.lineTo(200,200);
        gd.lineWidth = 10;//注意不加px
        gd.strokeStyle = 'aqua';//神一样的颜色
        gd.stroke();


      };
  </script>


</head>
<body>
    <canvas id="c1" width="300" height="300"></canvas>


</body>
</html>


```


是不是发现图形变形了，我不想解释太多为什么，记住就好了，还是那句话，你先会用canvas画写简单的东西，比如饼图，比如画个棋盘，比如做个ps里面的去色之类的，基础东西不会之前扯理论和名词都是装13.


只说结果，不要在样式里面定义canvas的宽高，直接 标签里面定义，解决方案上，


```
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    canvas{
      margin: 0 auto;
      border: 1px solid #000;
      display: block;
    }
  </style>
  <script type="text/javascript">
      window.onload = function(){
        var oC = document.querySelector('#c1');
        var gd = oC.getContext('2d');
        gd.beginPath();//忽略以前的画的的东西从新开始
        gd.moveTo(30,30);
        gd.lineTo(200,200);
        gd.lineWidth = 10;//注意不加px
        gd.strokeStyle = 'aqua';//神一样的颜色
        gd.stroke();


      };
  </script>


</head>
<body>
    <canvas id="c1" width="300" height="300"></canvas>
</body>
</html>


```


我知道有些人会说这样结构表现不分离啊（说这句话的50%以上都是装B狗），满足你要求。


```
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    canvas{
      margin: 0 auto;
      border: 1px solid #000;
      display: block;
    }
  </style>
  <script type="text/javascript">
      window.onload = function(){
        var oC = document.querySelector('#c1');
        oC.width = '300';
        oC.height = '300';
        var gd = oC.getContext('2d');
        gd.beginPath();//忽略以前的画的的东西从新开始
        gd.moveTo(30,30);
        gd.lineTo(200,200);
        gd.lineWidth = 10;//注意不加px
        gd.strokeStyle = 'aqua';//神一样的颜色
        gd.stroke();


      };
  </script>
</head>
<body>
    <canvas id="c1"></canvas>


</body>
</html>


```


感觉天都亮了，吼吼，注意样式比属性的优先级高，千万别因为我这句话去研究优先级，因为实际工作中用的很少，面试考这些的都是……先把我给你的例子敲会了，学不好的大部分不是脑子笨，是特么的脑子太好使，闲的蛋疼想得太多了。


第二个坑，没有一个项目只画一个图形的，多图形画的时候，这么玩。


```
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    canvas{
      margin: 0 auto;
      border: 1px solid #000;
      display: block;
    }
  </style>
  <script type="text/javascript">
      window.onload = function(){
        var oC = document.querySelector('#c1');
        var gd = oC.getContext('2d');
        gd.beginPath();//忽略以前的画的的东西从新开始
        gd.moveTo(449,220);
        gd.lineTo(584,220);
        gd.lineTo(625,87);
        gd.lineTo(667,220);
        gd.lineTo(793,220);
        gd.lineTo(693,301);
        gd.lineTo(735,435);
        gd.lineTo(626,301);
        gd.lineTo(520,435);
        gd.lineTo(555,301);
        gd.closePath();


        gd.lineWidth = 10;//注意不加px
        gd.strokeStyle = 'red';//神一样的颜色
        gd.stroke();
        gd.beginPath();//忽略以前的画的的东西从新开始
        gd.moveTo(147,387);
        gd.lineTo(249,207);
        gd.lineTo(349,387);
        gd.lineTo(154,387);
        gd.closePath();
        gd.lineWidth = 10;//注意不加px
        gd.strokeStyle = 'red';//神一样的颜色
        gd.stroke();


      };
  </script>


</head>
<body>
    <canvas id="c1" width="800" height="600"></canvas>
</body>
</html>


```


好，我们开始玩曲线，你懂的，曲线是最美的，比如，
![曲线美.jpg](http://upload-images.jianshu.io/upload_images/745192-6a79ba020c2d62a0.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


好，回到技术，生活这么美好，我们先画个笑脸再说。
![笑脸.png](http://upload-images.jianshu.io/upload_images/745192-a5a67a236d738c41.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


```
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    canvas{
      margin: 0 auto;
      border: 1px solid #000;
      display: block;
    }
  </style>
  <script type="text/javascript">
      window.onload = function(){
        function d2a(n){
          return n*Math.PI/180;
        }
        var oC = document.querySelector('#c1');
        var gd = oC.getContext('2d');
        gd.beginPath();//
        gd.moveTo(200,200);
        gd.quadraticCurveTo(300,100,400,200);
        gd.lineWidth = 10;//注意不加px
        gd.strokeStyle = 'red';//神一样的颜色
        gd.stroke();
      };
  </script>


</head>
<body>
    <canvas id="c1" width="800" height="600"></canvas>


</body>
</html>
```


说一点，arc用的是弧度，d2a不明白也没事，会用就行了。


最后说下最迷人的两个曲线，名字我就不说了，我拼音学的不好。


```
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    canvas{
      margin: 0 auto;
      border: 1px solid #000;
      display: block;
    }
  </style>
  <script type="text/javascript">
      window.onload = function(){
        function d2a(n){
          return n*Math.PI/180;
        }
        var oC = document.querySelector('#c1');
        var gd = oC.getContext('2d');
        gd.beginPath();//
        gd.moveTo(200,200);
        gd.quadraticCurveTo(300,100,400,200);
        gd.lineWidth = 10;//注意不加px
        gd.strokeStyle = 'red';//神一样的颜色
        gd.stroke();
      };
  </script>


</head>
<body>
    <canvas id="c1" width="800" height="600"></canvas>
</body>
</html>


```


这个也很简单吧，最后给大家上两个例子，这个有点小复杂，不过你忍得住，因为太美了。


```
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    canvas{
      margin: 0 auto;
      border: 1px solid #000;
      display: block;
    }
  </style>
  <script type="text/javascript">
      window.onload = function(){
        function d2a(n){
          return n*Math.PI/180;
        }
        var oC = document.querySelector('#c1');
        var gd = oC.getContext('2d');
        gd.beginPath();//
        gd.moveTo(200,200);
        gd.quadraticCurveTo(300,300,400,200);
        gd.lineWidth = 10;//注意不加px
        gd.strokeStyle = 'red';//神一样的颜色
        gd.stroke();




      };
  </script>


</head>
<body>
    <canvas id="c1" width="800" height="600"></canvas>


</body>
</html>


```


很多人都搞不明白那些点怎么来的，多说一句其实计算的是两点中线（quadraticCurveTo），三次我就不解释了，因为算两次中线，你不知道数据没事，直接找设计师要就OK.


最后，帮你理解点，我把所有的点都画出来，


```
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    canvas{
      margin: 0 auto;
      border: 1px solid #000;
      display: block;
    }
  </style>
  <script type="text/javascript">
      window.onload = function(){
        function d2a(n){
          return n*Math.PI/180;
        }
        var oC = document.querySelector('#c1');
        var gd = oC.getContext('2d');
        gd.beginPath();//
        gd.moveTo(200,200);
        gd.bezierCurveTo(300,400,400,200,500,200);
        gd.lineWidth = 10;//注意不加px
        gd.strokeStyle = 'red';//神一样的颜色
        gd.stroke();




      };
  </script>


</head>
<body>
    <canvas id="c1" width="800" height="600"></canvas>
</body>
</html>


```


真棒，最后感谢我们家太白陪我敲代码。
![太白.jpg](http://upload-images.jianshu.io/upload_images/745192-f8f951e04b0e0482.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)




```
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    canvas{
      margin: 0 auto;
      border: 1px solid #000;
      display: block;
    }
  </style>
  <script type="text/javascript">
      window.onload = function(){
        function d2a(n){
          return n*Math.PI/180;
        }
        var oC = document.querySelector('#c1');
        var gd = oC.getContext('2d');
        drawBezierCurve(200,200,300,400,400,200,500,200);


        function drawBezierCurve(startX, startY, controlX1, controlY1, controlX2, controlY2, endX, endY, curveColor, curveWidth) {
          var radian = Math.PI / 180;
          gd.beginPath();
          gd.strokeStyle = curveColor || "red";
          gd.lineWidth = curveWidth || 2;
          gd.moveTo(startX, startY);
          gd.bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endX, endY);
          gd.stroke();


          gd.beginPath();
          gd.strokeStyle = "black";
          gd.lineWidth = 10;
          gd.arc(controlX1, controlY1, 5, 0 * radian, 360 * radian, false);
          gd.stroke();


          gd.beginPath();
          gd.strokeStyle = "black";
          gd.lineWidth = 10;
          gd.arc(controlX2, controlY2, 5, 0 * radian, 360 * radian, false);
          gd.stroke();


          gd.beginPath();
          gd.lineWidth = 1;
          gd.moveTo(startX, startY);
          gd.lineTo(controlX1, controlY1);
          gd.lineTo(controlX2, controlY2);
          gd.lineTo(endX, endY);
          gd.stroke();
        }


      };
  </script>


</head>
<body>
    <canvas id="c1" width="800" height="600"></canvas>
</body>
</html>


```

会点儿前端的大彬哥
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
说说如何使用 Canvas 绘制弧线与曲线
读万卷书，行万里路
08-02 4031
绘制弧线前，我们需要先了解角度与弧度的概念。 1 角度与弧度 （1）角度 两条射线从圆心向圆周射出，形成一个夹角和夹角正对的一段弧。当弧长正好等于圆周长的 360 分之一时，两条射线的夹角的大小为1度 。( 单位 :º ） （2）弧度 两条射线从圆心向圆周射出，形成一个夹角和夹角正对的一段弧。当这段弧长正好等于圆的半径时，两条射线的夹角大小为1弧度（单位：rad)。具体计算公式为： rad 即弧度单词 radian 的缩写。 角度转换为弧度，推导与计算公式为： 2 弧线 弧线可以是圆，也可以是圆的
canvas基础1 - 画直线（通俗易懂）
许小叮当的博客
06-10 3622
本文开始是canvas，通俗易懂，小白也没烦恼，
QMl自定义绘制图形(一)
qq_42809438的博客
04-26 2724
Qml绘制图形——矩形逻辑的代码Qml的代码 之前写过几种qml画矩形的方法，都是通过对QQuick 里面Rectangle进行属性的绑定才画出来的，这篇文章主要是以另外一种方法去绘制矩形，优点是逻辑用C++实现，逻辑跟界面分离，在逻辑里可以增加绘制更多图形，更容易封装。 创建一个Qt Quick Application -Empty 项目 添加一个C++类 并且继承自 QQuickPainted...
canvas绘制直线
编程界明世隐的博客
01-14 3675
说明： 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、svg画直线或者带弧度的弯道直线，渐变线
12-25
可根据需求自定义参数 可根据需求自定义参数 可根据需求自定义参数 可根据需求自定义参数 可根据需求自定义参数 可根据需求自定义参数
node-canvas-webgl:node-canvas 和 headless-gl 的集成
07-23
节点画布-webgl 和集成。演示：与三个js const fs = require ( 'fs' ) ;const THREE = require ( 'three' ) ;const GIFEncoder = require ( 'gifencoder' ) ;const { createCanvas } = require ( '../lib' ) ;const ...
canvas-text-editor-tutorial:使用html5 canvas的简单文本编辑器
05-25
我将尝试通过创建一系列教程来解决此问题，以说明文本编辑器的所有重要方面，同时使用HTML5 canvas和许多JavaScript代码创建可用的应用程序。 以下是按优先级排列的编辑器功能要求列表： 键盘光标导航和选择； ...
Leaflet.Canvas-Markers-0.2.0
04-22
Leaflet.Canvas-Markers-0.2.0 https://github.com/corg/Leaflet.Canvas-Markers
ec-canvas 实现echart图表显示
最新发布
05-19
ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-canvas 实现echart图表显示ec-...
canvas-basic-graphics.zip
03-24
canvas绘制基础图形（canvas 气泡框 网格线 三角形 圆角矩形 箭头）1.初始化画布 initCanvas * 2.绘制网格线 drawGridlines * 3.绘制圆点 drawDot * 4.绘制圆环 drawRing
使用HTML5 Canvas绘制直线或折线等线条的方法讲解
09-28
主要介绍了使用HTML5 Canvas绘制直线或折线等线条的方法讲解,通过Canvas API我们便可以轻松地使用JavaScript来操作图形的位置坐标,需要的朋友可以参考下
QML--Canvas画布实现矩形圆形等圈定
01-10
QML--Canvas画布实现矩形圆形等圈定
canvas实现按轨迹运动（我们的回忆）功能
Silyeclan的博客
08-13 6809
canvas实现按轨迹运动（我们的回忆）功能 效果图如下： 实现功能：根据后台数据按轨迹点亮心形，点亮字母，并添加点亮日期，两个人的头像跟随轨迹平行移动， （移动到第几个字母、日期、头像均通过后台获取，测试时需要自定义才能显示出来） 附加功能：移动端播放声音，H5移动端交互方法 直接上代码，附赠移动端交互方法（以后再详细解说） <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &
QML绘制矩形
IT1995的博客
04-11 6047
运行截图如下：代码如下：main.qmlimport QtQuick 2.5 import QtQuick.Window 2.2 Window { visible: true width: 640 height: 480 title: qsTr("Hello World") MainForm { anchors.fill: parent ...
canvas绘制连续的二次贝塞尔曲线，并生成绘制区域大小的图片
阿勇的博客
03-27 301
import CanvasDraw from “@/model/CanvasDraw”; this.draw = new CanvasDraw(“drawCanvas”,this.mainWidth,this.mainHieght); this.draw.draw((imgData,position) => { this.$store.dispatch(‘dataContainer/isShapeFreeDraw’,false) this.creatImageElement(imgData,posit
html期末考试绘制直线,html5教程 （二）（canvas绘制简单的直线）
weixin_35662670的博客
05-30 206
Html5_convasvar elem = document.getElementById("myConvas");if (elem && elem.getContext) {var myContext = elem.getContext("2d");/*通过 fillStyle和 strokeStyle 属性可以轻松的设置矩形的填充和线条。颜色值使用方法和 CSS 一样：十六进...
bezierMaker.js——N阶贝塞尔曲线生成器
weixin_34184561的博客
12-28 1659
写在最前 由于原生的Canvas最高只支持到三阶贝塞尔曲线，那么我想添加多个控制点怎么办呢？（即便大部分复杂曲线都可以用3阶贝塞尔来模拟）与此同时，关于贝塞尔控制点的位置我们很难非常直观的清楚到底将控制点设置为多少可以形成我们想要的曲线。本着解决以上两个痛点同时社区内好像并没有N阶的解决方案（js版）故这次作者非常认真的开源了bezierMaker.js！ bezierMaker.js理论上支持N...
canvas绘制曲线
xtingjie的博客
02-18 387
效果图（是动图，但是博客里面怎么放动图呢，望不吝赐教）： <!DOCTYPE html> <html> <head> <title>画曲线在canvas上</title> </head> <body> <canvas id="mycanvas" width="1000px" height="550px" style="border:1px solid;
小程序canvas曲线和直线
04-29
小程序的canvas API可以绘制曲线和直线，具体可以参考以下示例代码： 绘制曲线： ```javascript // 获取canvas绘图上下文 const ctx = wx.createCanvasContext('myCanvas') // 设置起点 ctx.moveTo(50, 200) // ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值