2024年html5基础入门教程之canvas运用样式与颜色，web前端面试题库有哪些

后话

---

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

对于面试，说几句个人观点。

面试，说到底是一种考试。正如我们一直批判应试教育脱离教育的本质，为了面试学习技术也脱离了技术的初心。但考试对于人才选拔的有效性是毋庸置疑的，几千年来一直如此。除非你有实力向公司证明你足够优秀，否则，还是得乖乖准备面试。这也并不妨碍你在通过面试之后按自己的方式学习。
其实在面试准备阶段，个人的收获是很大的，我也认为这是一种不错的学习方式。首先，面试问题大部分基础而且深入，这些是平时工作的基础。就好像我们之前一直不明白学习语文的意义，但它的意义就在每天的谈话间。

所谓面试造火箭，工作拧螺丝。面试往往有更高的要求，也迫使我们更专心更深入地去学习一些知识，也何尝不是一种好事。

fillStyle=color;

strokeStyle=color;

fillStyle用于设置填充的颜色，而strokeStyle用于设置图像轮廓的颜色。color可以是表示css颜色值的字符串、渐变对象或者图案对象。默认情况下，线条颜色和填充颜色都是黑色的。

fillStyle示例：

function draw(){

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

if(canvas.getContext){

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

for(var i=0; i<6; i++){

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

ctx.fillStyle=‘rgb(’+Math.floor(255-42.5i)+‘,’+Math.floor(255-42.5j)+‘,0)’;

ctx.fillRect(25+j25,25+i25,25,25);

}

}

}

}

上面fillStyle的例子，用了双层循环来绘制并填充了6*6的方格矩阵。根据变量i和j控制每个方格绘制的位置以及填充的颜色。

strokeStyle示例：

function draw(){

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

if(canvas.getContext){

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

for(var i=0; i<6; i++){

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

ctx.strokeStyle=‘rgb(0,’+Math.floor(255-42.5i)+‘,’+Math.floor(255-42.5j)+‘)’;

ctx.beginPath();

ctx.arc(40+j25,40+i25,10,0,Math.PI*2,true);

ctx.stroke();

}

}

}

}

上面strokeStyle的例子，用了双层循环来绘制并填充了6*6的圆圈矩阵。根据变量i和j控制每个圆圈绘制的位置以及描边的颜色。

透明度

除了可以绘制实色的图形外，还可以绘制半透明的图形。通过设置globalAlpha属性或者使用一个半透明颜色来作为轮廓或者填充的样式。

1.globalAlpha

globalAlpha = transparency value

这个属性会影响canvas里所有在设置透明度后绘制的图形的透明度。它的取值区间是[0.0,1.0]。其中，0.0表示完全透明，1.0表示完全不透明。默认值是1.0。

globalAlpha属性在需要绘制大量拥有相同透明度的图形时相当高效。

globalAlpha实例：

function draw(){

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

if(canvas.getContext){

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

ctx.fillStyle=‘red’;

ctx.fillRect(20,20,75,50);

ctx.globalAlpha=0.2;

ctx.fillStyle=‘blue’;

ctx.fillRect(50,50,75,50);

ctx.fillStyle=‘green’;

ctx.fillRect(80,80,75,50);

}

}

上面这个例子，红色的矩形是完全不透明的，因为在它之前并没有设置透明度。在红色矩形绘制完成后，设置了都明度为0.2，从而之后绘制的蓝色矩形和绿色矩形的透明度都受影响了。

2.rgba

由于strokeStyle和fillStyle都接受符合css3规范的颜色值，所以还可以使用另一种设置透明度的方法，那就是rgba()方法，它的灵活性更大。

rgba()示例：

function draw(){

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

if(canvas.getContext){

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

//绘制四个宽高为150*37.5的矩形，颜色分别为：黄、绿、蓝、红

ctx.fillStyle=‘rgb(255,221,0)’;

ctx.fillRect(10,0,150,37.5);

ctx.fillStyle=‘rgb(102,204,0)’;

ctx.fillRect(10,37.5,150,37.5);

ctx.fillStyle=‘rgb(0,153,255)’;

ctx.fillRect(10,75,150,37.5);

ctx.fillStyle=‘rgb(255,51,0)’;

ctx.fillRect(10,112.5,150,37.5);

//绘制上面大矩形内部的白色小矩形

for(var i=0;i<10;i++){

ctx.fillStyle=‘rgba(255,255,255,’+(i+1)/10+‘)’;

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

ctx.fillRect(15+i14,5+j37.5,14,27.5);

}

}

}

}

上面的例子，先竖向绘制了四个大小一致、颜色分别为黄、绿、蓝、红的背景矩形。然后根据变量i和j在四个矩形内部分别以一定步长来绘制背景色为白色透明度不一的白色小矩形。

线型

canvas可以通过一定属性来设置线的样式。

lineWidth = value

lineCap = type

lineJoin = type

miterLimit = value

1.lineWidth属性

lineWidth用于设置当前绘制的线的粗细。属性值必须为正数。默认值为1.0。

注意，这里的线宽是指给定路径的中心到两边的粗细。换句话说就是：在路径的两边各绘制线宽的一半。

来看一个例子：

function draw(){

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

if(canvas.getContext){

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

ctx.lineWidth=10;

ctx.strokeRect(20,20,80,100);

}

}

由上面的例子可以看出，线宽是由起始位置向两边扩展的。

2.lineCap属性

属性lineGap设置或返回了线条末端线帽的样式。

它有三个可选值，分别为：butt，这个值是默认的，表示向线条的每个末端添加平直的边缘；round，表示向线条的每个末端添加圆形线帽；square，表示向线条的每个末端添加正方形的线帽。

lineCap示例：

function draw(){

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

if(canvas.getContext){

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

var lineCap=[‘butt’,‘round’,‘square’];

//绘制上下两条水平参考线

ctx.strokeStyle=‘#09f’;

ctx.beginPath();

ctx.moveTo(10,10);

ctx.lineTo(140,10);

ctx.moveTo(10,140);

ctx.lineTo(140,140);

ctx.stroke();

//画线条

ctx.strokeStyle=‘black’;

for(var i=0; i<lineCap.length; i++){

ctx.lineWidth=15;

ctx.lineCap=lineCap[i];

ctx.beginPath();

ctx.moveTo(25+i*50,10);

ctx.lineTo(25+i*50,140);

ctx.stroke();

}

}

}

上面的例子从左到右绘制了三条竖线，它们的起点和终点都落在了蓝色辅助线上，lineCap属性分别为butt，round，square。第一条竖线，lineCap属性是默认的butt，它的端点是与辅助线齐平的；第二条竖线的lineCap属性为round，在端点处加了半径为一般线宽的半圆；第三条竖线的lineCap属性设置为square，在端点处加了等宽且高度为一半线宽的方块。

3.lineJoin属性

当一个路径包含了线段或曲线相交的交点时，lineJoin属性说明如何绘制这些交点。只有当绘制具有等宽线条的时候，这一属性的效果才能表现出来。

它的可选值有三个，分别是：round、bevel和miter。默认值是miter。

lineJoin示例：

function draw(){

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

if(canvas.getContext){

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

var lineJoin=[‘round’,‘bevel’,‘miter’];

ctx.lineWidth=10;

for(var i=0; i<lineJoin.length; i++){

ctx.lineJoin=lineJoin[i];

ctx.beginPath();

ctx.moveTo(-5,5+i*40);

ctx.lineTo(35,45+i*40);

ctx.lineTo(75,5+i*40);

ctx.lineTo(115,45+i*40);

ctx.lineTo(155,5+i*40);

ctx.stroke();

}

}

}

上面的例子，第一条折线的lineJoin属性值为round，可以看出在相交处边角被磨圆了，圆的半径等于线宽；第二条折线的lineJoin属性值为bevel，定点的外边缘和一个填充的三角形相交；第三条折线的lineJoin属性为默认的miter，两条线段的外边缘一直扩展到他们相交。当两条线段以一个锐角相交，斜角连接可能变得很长。miterLimit 属性为一个斜面的长度设置了上限。超过这一限制，斜面就变成斜角了。

4.miterLimit属性

miterLimit 属性设置或返回最大斜接长度。

斜接长度指的是在两条线交汇处内角和外角之间的距离。

注意：只有当 lineJoin 属性为 “miter” 时，miterLimit 才有效。

边角的角度越小，斜接长度就会越大。为了避免斜接长度过长，我们可以使用 miterLimit 属性。

如果斜接长度超过 miterLimit 的值，边角会以 lineJoin 的 “bevel” 类型来显示（图解 3）：

最后

一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。

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

分享一些前端面试题以及学习路线给大家

3）：

最后

一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。

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

分享一些前端面试题以及学习路线给大家

[外链图片转存中…(img-l0tM6Pei-1715342664736)]

[外链图片转存中…(img-tzv9pA0i-1715342664737)]