首页 前端知识 2024年最全html5基础入门教程之canvas运用样式与颜色,五面阿里拿下飞猪事业部offer

2024年最全html5基础入门教程之canvas运用样式与颜色,五面阿里拿下飞猪事业部offer

2024-05-10 22:05:57 前端知识 前端哥 672 104 我要收藏

总结

为了帮助大家更好温习重点知识、更高效的准备面试,特别整理了《前端工程师面试手册》电子稿文件。

内容包括html,css,JavaScript,ES6,计算机网络,浏览器,工程化,模块化,Node.js,框架,数据结构,性能优化,项目等等。

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目,涵盖了初中级前端技术点。

前端面试题汇总

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

JavaScript

性能

linux

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

2.lineCap属性

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

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

lineCap示例:

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 属性设置或返回最大斜接长度。

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

miterlimit

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

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

如果斜接长度超过 miterLimit 的值,边角会以 lineJoin 的 “bevel” 类型来显示(图解 3):

miterlimit_bevel

语法:miterLimit=number;

内容层的展现是最主要的,无论背景层和贴图层有多少花哨,在设计师设计过程中,内容层对用户的展示是最优先的。

渐变

我们可以使用径向渐变或者线性渐变来填充或描边所绘制的图形。

1.线性渐变

createLinearGradient(xStart, yStart, xEnd, yEnd)

线性渐变有四个参数,其中xStart,yStart为渐变起始点的坐标;xEnd,yEnd为渐变结束点的坐标。

这个方法创建并返回了一个新的canvasGradient对象,它在指定的起始点和结束点之间线性的内插颜色值。

2.径向渐变

createRadialGradient(xStart, yStart, radiusStart, xEnd, yEnd, radiusEnd)

径向渐变有六个参数,其中xStart,yStart为开始圆的圆心坐标;radiusStart为开始圆的半径;xEnd, yEnd为结束圆的圆心坐标;radiusEnd为结束圆的半径。

这个方法创建并返回一个新的CanvasGradient对象,该对象在两个指定的圆周直接放射性的插值颜色。

注意,以上两个方法都没有为渐变指定任何颜色。使用返回对象的addColorStop()来设置颜色。要使用一个渐变来勾勒线条或填充区域,只需要把CanvasGradient对象赋给strokeStyle属性或fillStyle属性即可。

3.addColorStop()方法

上面提到了,addColorStop()方法在渐变中的抹一点添加一个颜色变化。语法格式如下:

addColorStop(offset,color)

offset是一个范围在0.0到1.0之间的浮点值,表示渐变开始点和结束点直接的一部分。offset值为0对应开始点,offset值为1对应结束点。

color以一个css颜色字符串的方式,表示在指定offset显示的颜色。

createLinearGradient示例:

createlinergradient

function draw(){

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

if(canvas.getContext){

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

var linergradient=ctx.createLinearGradient(0,0,0,150);

linergradient.addColorStop(0,‘#00abeb’); //起始点颜色值

linergradient.addColorStop(0.5,‘#fff’); //中间位置颜色值

linergradient.addColorStop(0.5,‘#26c000’); //中间位置颜色值

linergradient.addColorStop(1,‘#fff’); //结束点颜色值

ctx.fillStyle=linergradient; //填充颜色

ctx.fillRect(35,10,130,130);

}

}

上面这个例子,绘制了一个130*130的正方形,并且用线性渐变填充了颜色。设置了四个点的颜色值,形成了从蓝到白又从绿到白的渐变色。

createRadialGradient示例:

createradialgradient

function draw(){

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

if(canvas.getContext){

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

var radialgradient=ctx.createRadialGradient(45,45,10,52,50,30);

radialgradient.addColorStop(0,‘#a7d30c’);

radialgradient.addColorStop(0.9,‘#019f62’);

radialgradient.addColorStop(1,‘rgba(1,159,98,0)’);

ctx.fillStyle=radialgradient;

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

}

}

上面的例子中,在一个150*150方形上,填充了一个径向渐变。

图案

createPattern() 方法为贴图图像创建一个模式。其语法格式如下:

createPattern(image, repetitionStyle)

该方法接受两个参数,其中image为需要的图像。这个参数通常是一个Image对象,也可以使用一个canvas元素。repetitionStyle说明如何使用贴图。这个参数有四个取值,分别为:repeat,表示在各个方向上都对图像贴图;repeat-x,只在x方向上贴图;repeat-y,只在y方向上贴图;no-repeat,不贴图,只使用它一次。

creatPattern()方法创建并返回一个CanvasPattern对象,该对象表示一个贴图图像所定义的模式。要使用一个模式来勾勒线条或填充区域,可以把一个CanvasPattern对象用作strokeStyle属性或fillStyle属性。

注意,与drawImage不同,createPattern需要确认image对象已经加载完全,否则图案可能效果不对。

Firefox 目前只支持属性值repeat 。如果赋其它值,什么效果都没有的。

createPattern示例:

createPattern

function draw(){

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

if(canvas.getContext){

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

var img=new Image();

img.src=‘http://cat7.cn/wp-content/pic/2014/0210/createlinergradient.jpg’;

img.οnlοad=function(){

var pattern=ctx.createPattern(img,‘repeat’);

ctx.fillStyle=pattern;

ctx.fillRect(0,0,200,200);

}

}

}

这个例子创建了一个200*200的方形,并用名为createlinergradient的图片完全填充了方形。

阴影

canvas中与阴影相关的属性有四个,如下:

shadowOffsetX = float

shadowOffsetY = float

shadowBlur = float

shadowColor = color

shadowOffsetX和shadowOffsetY用来设定阴影在x和y轴的延伸距离。负值表示阴影会往上或左延伸,正值则表示会往下或右延伸。默认值都是0。

新建一个前端学习qun438905713,在群里大多数都是零基础学习者,大家相互帮助,相互解答,并且还准备很多学习资料,欢迎零基础的小伙伴来一起交流。

shadowBlur用于设定阴影的模糊程度,默认值为0。

shadowColor用于设定阴影颜色,值可以是标准的css颜色值,默认是全透明的黑色。

文字阴影示例:

shadow

function draw(){

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

if(canvas.getContext){

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

ctx.shadowOffsetX=2;

ctx.shadowOffsetY=2;

ctx.shadowBlur=2;

最后

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

给大家分享一些关于HTML的面试题。


HR0cDovL3d3dy5hc2VvZS5jb20vc3BlY2lhbC93ZWJzdGFydC9jYW52YXMvaW1hZ2VzL3NoYWRvdy5qcGc?x-oss-process=image/format,png)

function draw(){

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

if(canvas.getContext){

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

ctx.shadowOffsetX=2;

ctx.shadowOffsetY=2;

ctx.shadowBlur=2;

最后

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

给大家分享一些关于HTML的面试题。

[外链图片转存中…(img-plccpQpE-1715038202996)]
[外链图片转存中…(img-8aVdVY2h-1715038202997)]

转载请注明出处或者链接地址:https://www.qianduange.cn//article/7964.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!