前端提高篇(六十七)：HTML进阶8：canvas画布基本知识，最新精心整理前端面试题

顺时针画整个圆：

myCtx.arc(200,200,100,0,Math.PI*2);

myCtx.stroke();

顺时针画扇形

myCtx.moveTo(200,200);

myCtx.lineTo(300,200);

myCtx.arc(200,200,100,0,Math.PI*0.25);

myCtx.closePath();

myCtx.stroke();

上面那个案例如果改成逆时针(arc最后一个参数设为true)：

绘制曲线：介于两个切线之间的弧

myCtx.arcTo(x1,y1,x2,y2,半径);

画这个弧线需要指定起点(x,y)

myCtx.moveTo(200,200);// 创建开始点

myCtx.arcTo(300,200,300,300,50);// 创建弧

myCtx.stroke();//绘制

官网链接

一般我们要画的是有弧度的角，像border-radius那样，所以会加上水平线和垂直线：

两次方、三次方曲线方程

quadraticCurveTo(cpx, cpy, x, y);//遵循二次贝塞尔曲线规律

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y);//遵循三次被三二曲线规律

官网解释：链接

在这位大佬的文章中，用动态图辅助解释了贝塞尔曲线，相当详细，感谢分享

(OS:太牛了！)

二次贝塞尔曲线动图如下：

三次贝塞尔曲线动图：

二次贝塞尔使用如下：起始点P0在(100,200)，控制点P1在(200,0)，结束点P2为(300,200)

myCtx.moveTo(100,200);

myCtx.quadraticCurveTo(200, 0, 300, 200)

myCtx.stroke();

设置图形样式

---

线样式

线两头样式：lineCap

上一篇说到设置线宽时，是从中心线向上下边扩展的，两头由线的长度决定，这是默认情况，butt

可以设置两头多出线宽的一半，或者多出线宽一半，并为半圆形

myCtx.lineWidth = 20;

myCtx.moveTo(100,150);

myCtx.lineTo(200,150);

myCtx.stroke();//默认

myCtx.beginPath();

myCtx.lineWidth = 20;

myCtx.moveTo(100,200);

myCtx.lineTo(200,200);

myCtx.lineCap = ‘round’//两头多出线宽的1/2，并呈半圆

myCtx.stroke();

myCtx.beginPath();

myCtx.lineWidth = 20;

myCtx.moveTo(100,250);

myCtx.lineTo(200,250);

myCtx.lineCap = ‘square’//两头多出线宽的1/2，并呈半圆

myCtx.stroke();

lineJoin两线拐角处：miter/round/bevel

当两条线相交时，线宽不变，相交的角度如果很小，尾线就会拖得很长，用lineJoin来设置尾线的处理方式，默认miter，不处理；或者round，变圆；或者bevel，折断

myCtx.lineWidth = 20;

myCtx.moveTo(100,50);

myCtx.lineTo(300,50);

myCtx.lineTo(300,100);//默认lineJoin：miter，不处理尾线

myCtx.closePath();

myCtx.stroke();

myCtx.beginPath();

myCtx.lineWidth = 20;

myCtx.moveTo(100,130);

myCtx.lineTo(300,130);

myCtx.lineTo(300,180);

myCtx.closePath();

myCtx.lineJoin = ‘round’;//交线处为圆弧

// myCtx.lineCap = ‘round’

myCtx.stroke();

myCtx.beginPath();

myCtx.lineWidth = 20;

myCtx.moveTo(100,250);

myCtx.lineTo(300,250);

myCtx.lineTo(300,300);

myCtx.closePath();

myCtx.lineJoin = ‘bevel’;//交线处折断

myCtx.stroke();

miterLimit: 绘制交点的方式

这个是针对lineJoin两线拐角处：miter设置的，当尾线长度超过miterLimit值时，折断，否则不处理

一般用round比较多

渐变

官网地址

线性渐变：

createLinearGradient() 方法创建线性的渐变对象。

var bg = myCtx.createLinearGradient(0,100,400,100);//创建线性渐变

//预设颜色

bg.addColorStop(0, ‘red’);

bg.addColorStop(0.5, ‘orange’);

bg.addColorStop(1, ‘green’);

myCtx.fillStyle = bg;//应用样式

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）

到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**

[外链图片转存中…(img-5SKYZxe1-1710918951324)]
[外链图片转存中…(img-yoyjcAtZ-1710918951325)]
[外链图片转存中…(img-kSJIoJhI-1710918951325)]
[外链图片转存中…(img-uE9EhAkA-1710918951326)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）
[外链图片转存中…(img-kmM6ex43-1710918951326)]