Web前端最新html5基础入门教程之canvas绘制图形(1)，2024年最新最新Web前端高级面试题汇

web浏览器中的javascript

• 客户端javascript
• 在html里嵌入javascript
• javascript程序的执行
• 兼容性和互用性
• 可访问性
• 安全性
• 客户端框架
• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

window对象

• 计时器

• 浏览器定位和导航

• 浏览历史

• 浏览器和屏幕信息

• 对话框

• 错误处理

• 作为window对象属性的文档元素

与绘制路径相关的函数有：

beginPath()

closePath()

stroke()

fill()

beginPath()丢弃任何当前定义的路径并且开始一条新的路径。它把当前的点设置为(0,0)。当一个画布的环境第一次创建时，beginPath()方法会被显示地调用。

closePath()创建从当前点到开始点的路径。

stroke()方法绘制当前路径的边框。它意味着画轮廓，但是线条的可视化取决于strokeStyle、lineWidth、lineJoin、lineCap和miterLimit等属性。

fill()方法用于填充路径，默认是黑色。fill()方法使用fillStyle属性所指定的颜色、渐变和模式来填充当前路径。当调用该方法时，开放的路径会自动闭合。

绘制路径需要经过下面四个步骤：

第一步：用beginPath创建一条路径。

第二步：实际绘制路径的部分。

第三步：调用closePath方法关闭路径。如果图形已闭合或者它只是一个点，那么这个方法将什么也不会做。这一步不是必须的

第四步：调用stroke或fill方法，绘制边框或者填充路径。

绘制路径示例：

function draw(){

var canvas=document.getElementById(‘testPath’);

if(canvas.getContext){

var cxt=canvas.getContext(‘2d’);

cxt.beginPath();

cxt.moveTo(75,50);

cxt.lineTo(100,75);

cxt.lineTo(100,25);

cxt.fill();

}

}

上面这个例子，绘制了一个三角形。首先，利用beginPath()方法创建一条路径；moveTo()方法将点移动到坐标(75,50)（moveTo()方法接下来就会讲到）；lineTo()方法画了两条直线；最后调用fill()方法填充路径，调用了这个方法后，路径就自然闭合了，所以不必再调用closePath()方法来闭合路径。

moveTo()方法

上面的例子有用到moveTo()这个方法，这边就来说说moveTo()方法。语法如下：

moveTo(x,y)

moveTo()方法用于定位绘画的位置，即将点移动到参数x,y所指定的坐标位置。

canvas初始化或者调用了beginPath()方法时，绘画开始的位置即原点(0,0)，使用moveTo()方法，我们可以将起始位置移动到任何我们想要的地方。

moveTo()的使用实例：

function draw(){

var canvas=document.getElementById(‘test_moveTo’);

if(canvas.getContext){

var cxt=canvas.getContext(‘2d’);

cxt.beginPath();

cxt.arc(75,75,50,0,Math.PI*2,true);

cxt.moveTo(100,75);

cxt.arc(75,75,35,0,Math.PI,false);

cxt.moveTo(65,65);

cxt.arc(60,65,5,0,Math.PI*2,true);

cxt.moveTo(95,65);

cxt.arc(90,65,5,0,Math.PI*2,true);

cxt.stroke();

}

}

绘制各种线条

用lineTo()方法来画直线。

lineTo()方法接受终点的坐标(x,y)作为参数。起始坐标取决于前一路径的终点坐标。当然，起始坐标也可以通过前面介绍的moveTo()方法来设置。

绘制线条示例：

function draw(){

var canvas=document.getElementById(‘test_lineTo’);

if(canvas.getContext){

var cxt=canvas.getContext(‘2d’);

cxt.beginPath();

cxt.moveTo(25,25);

cxt.lineTo(105,25);

cxt.lineTo(25,105);

cxt.fill(); //fill填充路径，会自动闭合路径。

cxt.beginPath();

cxt.moveTo(125,125);

cxt.lineTo(125,45);

cxt.lineTo(45,125);

cxt.closePath();

cxt.stroke(); //stroke不会闭合路径，所以再描边先要先闭合路径

}

}

上面的例子利用lineTo()方法绘制了两个三角形。从这个例子也可以看出fill和stroke的区别。

绘制弧线

用arc方法来绘制弧线或圆。

arc(x, y, radius, startAngle, endAngle, anticlockwise)

该方法接受五个参数。其中，x,y是圆心坐标；radius是圆的半径；startAngle和endAngle分别是起末弧度（以x轴为基准）；anticlockwise为true表示逆时针，反之为顺时针。

这边有一点是需要注意的，就是arc方法里的角度是以弧度为计算单位的，不是度。这么说吧，通常我们说的180度，就等价于PI。两者的计算公式是这样的：radians=(Math.PI/180)*degrees.(其中，radians代表弧度，degrees代表度)

绘制圆弧示例：

function draw(){

var canvas=document.getElementById(‘test_arc’);

if(canvas.getContext){

var ctx=canvas.getContext(‘2d’);

for(var i=0; i<4; i++){ //输出4行4列的矩阵

for(var j=0; j<4; j++){

ctx.beginPath();

var x=25+j*50; //圆心x坐标

var y=25+i*50; //圆心y坐标

var radius=20; //半径

var startAngle=0; //起始弧度

var endAngle=Math.PI/2+(Math.PI*j)/2; //结束弧度

var anticlockwise=i%2==0?false:true; //奇数行顺时针；偶数行逆时针。

ctx.arc(x,y,radius,startAngle,endAngle,anticlockwise); //循环绘制圆/圆弧

if(i>1){

ctx.fill(); //3,4行填充图案

}else{

ctx.stroke(); //1,2行仅勾勒路径

}

}

}

}

}

上面这个例子，用双层循环输出了4*4的圆弧矩阵。

贝塞尔和二次方曲线

最后，要说的是贝赛尔曲线，它可以是二次和三次的形式，一般用于绘制复杂而有规律的形状。

二次贝赛尔曲线：

js基础

1)对js的理解？
2)请说出以下代码输出的值？
3)把以下代码，改写成依次输出0-9
4)如何区分数组对象，普通对象，函数对象
5)面向对象、面向过程
6)面向对象的三大基本特性
7)XML和JSON的区别？
8)Web Worker 和webSocket？
9)Javascript垃圾回收方法？
10)new操作符具体干了什么呢？
11)js延迟加载的方式有哪些？
12)WEB应用从服务器主动推送Data到客户端有那些方式？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

4)如何区分数组对象，普通对象，函数对象
5)面向对象、面向过程
6)面向对象的三大基本特性
7)XML和JSON的区别？
8)Web Worker 和webSocket？
9)Javascript垃圾回收方法？
10)new操作符具体干了什么呢？
11)js延迟加载的方式有哪些？
12)WEB应用从服务器主动推送Data到客户端有那些方式？

[外链图片转存中…(img-AOtutXu1-1715904226885)]

[外链图片转存中…(img-A9d83l0X-1715904226886)]

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】