H5系列之canvas

淡淡的烟草味﹌ 2023-08-17 15:23 158阅读 0赞

what is canvas？(什么是canvas)

其实他只是H5里面的一个标签而已，那么他作为一个标签，肯定有他的用途，他就像是一幅画布，等待着你来作画。可以说，他只是一个容器而已，需要配合着JavaScript来进行绘制。

那么他能做些什么东西呢？

例如这个：[http://www.yyyweb.com/demo/tearable-cloth/index.html][http_www.yyyweb.com_demo_tearable-cloth_index.html]

![1609428-20190819222043469-116518853.gif][]

还有这个：[http://canvasrider.com/tracks/409068][http_canvasrider.com_tracks_409068]

![1609428-20190819222244805-2145258493.gif][]

用处很多，但是用的最多的还是，简单的画个图形啊，图形移动 什么的。

画三角形

画矩形

画圆

画圆角矩形

填充颜色

图形缩放，平移与旋转

填充图片

那么开始介绍它的怎么使用的：

创建标签，那么画布的大小设置，在标签上面设置，如果在css设置，设置的是这个标签的大小，而不是画布的大小，这点要注意。

加上边框，以便于我们知道他在哪里，下面的框框，就是画布的区域了

![1609428-20190819223409441-693671098.png][]

开始准备工作 ↓

<body>
    　　<canvas id="can" width="500px" height="500px" style="border: 1px solid"></canvas>
    <script>
    　　var can = document.getElementById('can'); //选择canvas标签
    　　var ctx = can.getContext('2d'); //选择画布的绘制的类型，只能填2d
    </script>
    </body>

开始画出我们的第一条线。

![1609428-20190819224809970-52708197.png][]

效果图如下：

![1609428-20190820124956893-927490331.png][]

接下来，闭合他形成一个三角形

效果图如下： 一个三角形的形状就出来了。

![1609428-20190820125330476-1071418587.png][]

上面是画直线，下面画曲线。画曲线呢，需要用到二次贝赛尔曲线，和三次贝赛尔曲线。

二次贝塞尔曲线呢，有三个点。起始点，控制点，和终点。首先，现象一个常见。 有一条绳子，头尾固定，在中间再绑一条绳子，往上拉。 就像下面这样

![1609428-20190820193308142-936494769.gif][]

![1609428-20190820195413125-1149799636.png][]

![1609428-20190820195810241-653860081.png][]

所以 中间那个点，如果越高，那么 就会越弯曲。

那么还有个三次贝塞尔曲线，听名字就知道，比二次贝赛尔曲线多了 一个点。bezierCurveTo()

![1609428-20190820200853882-1012334790.png][]

接下来画个矩形吧。

画矩形呢，不需要一步一步的画，有方法，直接可以画 cxt.rect(x,y,width,height)

效果如下：

![1609428-20190820130023344-992171553.png][]

不过，不止有一个方法而已， 还有另外两个方法：

![1609428-20190820130239482-890141180.png][]

这个方法的，虽然也是画矩形，只不过他会填充颜色。

![1609428-20190820130417952-467129042.png][]

接下来，画圆。arc(100，100，50，0，Math.PI \*2, 0), 第一二个参数，还是起始点的位置X，和Y。 只不过起始点是在圆心。第三个参数是，圆的半径，第四五个参数，是起始弧度的位置，和结束的位置， 最后一个参数，是以顺时针，还是逆时针画 0为顺时针，1为逆时针。

![1609428-20190820133314926-1529880890.png][]

那我们设置， 第四个参数，为0， 第五个参数为360度，也就是 Math.PI \* 2。 是不是就是一个圆啦。

![1609428-20190820133429714-1311959867.png][]

还有一个注意点，顺时针的，90度，和逆时针的90度，是不一样的呢。

ctx.arc(100, 100, 50, 0, Math.PI *0.5, 0);
    ctx.arc(300, 100, 50, 0, Math.PI *0.5, 1);

![1609428-20190820133753971-1122736124.png][]

![1609428-20190820134044484-350548386.png][]

再画个圆角矩形。需要用到arcTo()方法，首先，我们需要知道几个点的位置 ↓

![1609428-20190820135213569-195957916.png][]

arcTo(150, 20, 150, 30, 50)呢，有5个参数, 第一二个参数，是决定了 B点的位置，第三个四个参数呢，是决定了 怎么弯，往上弯，还是往下弯。 第五个参数呢，是圆角的像素，像border-radius 属性一样。

第一步，决定A点，使用moveTo(20, 20)。

ctx.moveTo(20, 20);

第二步，决定B点的位置。

ctx.arcTo(150, 20, , , ,);

第三步，往上弯，还是往下弯(这个属性怎么决定呢？ 第三个参数，可以理解为X，B点的X为150，你如果要往上下弯的话，那么第三个参数，就要跟B点的X 一样。 也就是150，

关键在第四个值，第四个参数，是Y，如果要往下弯的话，那么Y的值，就要大于 B点的Y值， 如果要往上弯的话，就要小于B点的Y值。 大多少小多少无所谓，只要大过就行)

ctx.arcTo(150, 20, 150, 30, );

第四步，决定角度的程度

ctx.arcTo(150, 20, 150, 30, 50);

第五步，画出来

ctx.stroke();

效果图：

![1609428-20190820140442107-1933518417.png][]

如果要往上弯呢，第四个参数要小于 B点的Y 对吧。那么我们把代码改成 ctx.arcTo(150, 20, 150, 10, 50); 第四个参数 10， 比B点的Y 20 小。所以会变成往上弯。

记住一点就行。(如果要往上下弯，改变Y，往左右弯，改变X)

![1609428-20190820140721586-759086544.png][]

那么接下来，画个完整的圆角矩形。

![1609428-20190820141228890-372621970.png][]

这是我们上面教的。 到这里应该怎么办了呢。 计算出 A点的 X 和 Y等于200，80

![1609428-20190820141620186-924722531.png][]

![1609428-20190820142729343-833626454.png][]

![1609428-20190820143416888-1195916199.png][]

最后一个点。

![1609428-20190820143733821-1096007723.png][]

最后，会发现，出了一条线。 我们只需要把起始点的X +20 即可。为啥+20？ 因为 弯曲的值为 20。

![1609428-20190820143954630-1665828988.png][]

给画好的图形填充颜色。

![1609428-20190820150317158-550498664.png][]

![1609428-20190820150357389-942229325.png][]

其实他还不止可以填充单色。还可以填充线性渐变，径向渐变。

线性渐变：

![1609428-20190820152646284-75641361.png][]

createLinearGradient() 怎么理解呢。 你可以把它理解为，这个要填充的矩形。

![1609428-20190820153018326-1458326675.png][]

因为，渐变开始的点，是X0，Y0， 并不是图形的 左上角那个点，而是画布的左上角 (原点) 所以，你把图形的位置移动一下。你就会发现 问题了。

![1609428-20190820153518014-106833352.png][]

![1609428-20190820153813742-1685083929.png][]

![1609428-20190820163643797-266955177.png][]

![1609428-20190820165831739-1915127057.png][]

有没有想过一个问题，如果内圈的圆，超过外面的圆会成什么样子？

![1609428-20190820170140033-512317658.png][]

![1609428-20190820171037509-836989674.png][]

如果两个圈，相等且相离呢？

![1609428-20190820172518635-1216494581.png][]

话说，为什么会出现这种情况呢？ 其实最主要的一点还是，他的原理，下面是一张原理示意图：

![1609428-20190820173156523-1377559987.png][]

![1609428-20190820173333643-2059570405.png][]

现在，我们会画单个图形了，如果要画多个图形，或者，多条线，不相连呢？因为我们知道，我们的每一笔操作，都是连在一起的。

有个方法。ctx.beginPath()。 可以把它理解为，我把笔拿起来。具体下个位置在哪里。需要再次 重新定起始点。

![1609428-20190820144527118-375421979.png][]

如果不把笔拿起来会怎么样呢？ ↓ 像写连笔字一样，不会中断的。

![1609428-20190820174758628-1774548544.png][]

如果要画两个图形，或者 不连在一起的话，需要使用beginPath() 方法。可以重新 设置起始点。

![1609428-20190820174730946-1629167728.png][]

缩放，平移，旋转

缩放ctx,scale(1, 1); 1是默认值，正常大小。 小于1 也就是 0~0.99 都是缩小， 大于1呢 2是2倍， 3是3倍。如此类推

![1609428-20190820201801911-1302760556.png][]

平移。ctx.translate(100, 100);

![1609428-20190820202121853-1883551490.png][]

旋转。ctx.rotate(Math.PI) 一个PI 等于180度，以画布原点旋转，而不是以自身的左上角旋转。

![1609428-20190820203152559-2060446241.png][]

如果要把旋转点，在图形上面，是用translate 进行平移原点即可。

那么 缩放，平移，旋转，都是按照原点进行的，后续的操作，都会受到 原点的移动，而发生错位，什么的。 所以canvas 还有一个方法，就是用来存储数据的。

![1609428-20190820213141328-852781708.png][]

那么，如何不受到影响呢？ 使用ctx.save() 方法进行存储 画布原点的位置。

![1609428-20190820213536073-157294638.png][]

那么 save 能存储什么呢？ 他能存储 translate rotate scale 的值。 因为这些改变，都是全局的。

接下来，把图片放进canvas 画布里面。

![1609428-20190820215423570-537877203.png][]

![1609428-20190820215617707-1527085921.png][]

还有另外一种填充图片的方法：

![1609428-20190821205738177-1980437965.png][]

drawImage方法，可选参数：

![1609428-20190821205816743-227980079.png][]

填充文字

![1609428-20190821121639866-1679874974.png][]

阴影效果

![1609428-20190821200917162-1640687284.png][]

![1609428-20190821201133431-201453700.png][]

最后，补充：

改变线的粗细

![1609428-20190821202401565-2068585691.png][]

改变线的颜色

![1609428-20190821202635016-896825768.png][]

改变线起始与结尾的样式

![1609428-20190821203306057-808173463.png][]

改变线于线之间的连接点样式

![1609428-20190821204835521-177786828.png][]

![1609428-20190821205039580-1277029322.png][]

转载于:https://www.cnblogs.com/yanggeng/p/11379940.html

[http_www.yyyweb.com_demo_tearable-cloth_index.html]: http://www.yyyweb.com/demo/tearable-cloth/index.html
[1609428-20190819222043469-116518853.gif]: /images/20230810/f8339330058442ea9f1bfeefc0ec0f24.png
[http_canvasrider.com_tracks_409068]: http://canvasrider.com/tracks/409068
[1609428-20190819222244805-2145258493.gif]: /images/20230810/44c361912c0c4ccea4bb47e2affcf492.png
[1609428-20190819223409441-693671098.png]: /images/20230810/5bdee45f2cb944e5af5153a0e1e3d6a6.png
[1609428-20190819224809970-52708197.png]: /images/20230810/d822ab826cb9453d871f0b1d219e4bd6.png
[1609428-20190820124956893-927490331.png]: /images/20230810/9413ebf3528948b9b874808d49e15d80.png
[1609428-20190820125330476-1071418587.png]: /images/20230810/ec99eebb919d40be8f93aecf5e91d6ad.png
[1609428-20190820193308142-936494769.gif]: /images/20230810/4c4ef5138a03482da8d7276226f02b76.png
[1609428-20190820195413125-1149799636.png]: /images/20230810/19d2e55d778540c59ea8a6b3ae21186d.png
[1609428-20190820195810241-653860081.png]: /images/20230810/6e2015644d7b4e5e9543515ce011c06c.png
[1609428-20190820200853882-1012334790.png]: /images/20230810/3a6a7e06c72b441a8bdf70a814a0423b.png
[1609428-20190820130023344-992171553.png]: /images/20230810/f9129ee6f2724b02ae2b380eddde1bb4.png
[1609428-20190820130239482-890141180.png]: /images/20230810/7fcf240055aa44ce877d4a958280f5f9.png
[1609428-20190820130417952-467129042.png]: /images/20230810/6ef2eb7937bb4f7f837695e5ec04d1ca.png
[1609428-20190820133314926-1529880890.png]: /images/20230810/c34feca0911c40ea81944739ac60ba65.png
[1609428-20190820133429714-1311959867.png]: /images/20230810/8c3d440a8fc740a287ae529c533bce79.png
[1609428-20190820133753971-1122736124.png]: /images/20230810/9cca0c7276d64b98b1398079fd4e5ef0.png
[1609428-20190820134044484-350548386.png]: /images/20230810/6b00d74661644fe394e531ec387a4894.png
[1609428-20190820135213569-195957916.png]: /images/20230810/c6d6a6a65331441ebe21cbd125e7f78e.png
[1609428-20190820140442107-1933518417.png]: /images/20230810/f766798830c748a59fdf347dc30aec4e.png
[1609428-20190820140721586-759086544.png]: /images/20230810/b3cdfbe0fcc1433e994d700623722267.png
[1609428-20190820141228890-372621970.png]: /images/20230810/ad048419bc2844afadb36dfed6d8e888.png
[1609428-20190820141620186-924722531.png]: /images/20230810/3822b441039f460db5ce029a4cd8cc31.png
[1609428-20190820142729343-833626454.png]: /images/20230810/16aed3ad14cf4ca2bbe4bbc79be94b94.png
[1609428-20190820143416888-1195916199.png]: /images/20230810/8a85d56d26aa4ee28f8fec419294ea99.png
[1609428-20190820143733821-1096007723.png]: /images/20230810/108897eaba444f11a96b8fc238fa3da6.png
[1609428-20190820143954630-1665828988.png]: /images/20230810/afe43e100aaf4c1d8bd806e330eb0cb3.png
[1609428-20190820150317158-550498664.png]: /images/20230810/e27a1a5b21844b4baed0a470c2829152.png
[1609428-20190820150357389-942229325.png]: /images/20230810/e81730ef59e946459e10a985b99e1c8c.png
[1609428-20190820152646284-75641361.png]: /images/20230810/2ae6f936122442e99c9bb3f4636944cb.png
[1609428-20190820153018326-1458326675.png]: /images/20230810/811969bb22e14bb88dea7b0391ffe643.png
[1609428-20190820153518014-106833352.png]: /images/20230810/955c86ace6ec4ffca270892ff11ff33b.png
[1609428-20190820153813742-1685083929.png]: /images/20230810/2861e0ab49824762a124f683a4e34737.png
[1609428-20190820163643797-266955177.png]: /images/20230810/a33a91778fd4453fab3353336dd0a9d5.png
[1609428-20190820165831739-1915127057.png]: /images/20230810/baf065829b374d3ba861be4af483188e.png
[1609428-20190820170140033-512317658.png]: /images/20230810/5d172a76d2c64d588523115fc751990a.png
[1609428-20190820171037509-836989674.png]: /images/20230810/6ea7bcfb84d94e52873b652ba82d92ea.png
[1609428-20190820172518635-1216494581.png]: /images/20230810/3c8b5d0b3f3d4ddd8a9341f6b08d5a14.png
[1609428-20190820173156523-1377559987.png]: /images/20230810/2ebfe5bfca0b428cb307da693dcc0d5f.png
[1609428-20190820173333643-2059570405.png]: /images/20230810/9f88a59e7cad41479f3bb97b94f28ffa.png
[1609428-20190820144527118-375421979.png]: /images/20230810/825850bcd3af4f1b8c19f2a2d1a5797e.png
[1609428-20190820174758628-1774548544.png]: /images/20230810/587255b6220a4900b200b753ae182324.png
[1609428-20190820174730946-1629167728.png]: /images/20230810/d7b47145a65042e0b75a678350fdf5d7.png
[1609428-20190820201801911-1302760556.png]: /images/20230810/97d8a2c8557b448cabf8720bd28c0517.png
[1609428-20190820202121853-1883551490.png]: /images/20230810/d526e1f270bf4bc89ab5be7cd90852d3.png
[1609428-20190820203152559-2060446241.png]: /images/20230810/d2c11b546a8741dba1aa5388b52325cf.png
[1609428-20190820213141328-852781708.png]: /images/20230810/e284536b788248458d7809f90ea8adf8.png
[1609428-20190820213536073-157294638.png]: /images/20230810/70bfb779253f4112a9d241ba6f9e5ed8.png
[1609428-20190820215423570-537877203.png]: /images/20230810/96b5dd97ddd04d148fe9b1496abebe05.png
[1609428-20190820215617707-1527085921.png]: /images/20230810/c1e57c8cf031401e88261b5a47346e6e.png
[1609428-20190821205738177-1980437965.png]: /images/20230810/3772211c86d54320abe5121e037e1fe4.png
[1609428-20190821205816743-227980079.png]: /images/20230810/6da7843979c040ada6175c93f7f053b9.png
[1609428-20190821121639866-1679874974.png]: /images/20230810/df4e2b395808421f822a4ba1034a9e94.png
[1609428-20190821200917162-1640687284.png]: /images/20230810/4452c784b4fb44cbb142164743ec8a28.png
[1609428-20190821201133431-201453700.png]: /images/20230810/e8c5ead3aee949b990e8dc05a07350c5.png
[1609428-20190821202401565-2068585691.png]: /images/20230810/bcd1d5224aad4b3aaaa27267cd642c31.png
[1609428-20190821202635016-896825768.png]: /images/20230810/7cadb0fd3f804adab5eb901b1eccf125.png
[1609428-20190821203306057-808173463.png]: /images/20230810/64f78fd8f8754ced83decf6bc5504ca8.png
[1609428-20190821204835521-177786828.png]: /images/20230810/fe896f56a7244549b11e358be36fcb00.png
[1609428-20190821205039580-1277029322.png]: /images/20230810/4cf20295cd9845d5aaa81e39225b03c3.png