Web 前端怎样入门

大致分为三个阶段。
1 HTML + CSS 前端的入门门槛极低，体现在HTML和CSS上。运行环境就是浏览器，推荐Chrome。你需要的只是一个文本编辑器，推荐Sublime Text 3，有不少好插件比如Emmet，谷歌搜一下很容易了解到的。当然你非要用记事本的话，也不是不行的。刚入门查阅资料可以用 w3school 或者 MDN 。 HTML和CSS不是编程语言，前者只是结构标签，后者则是样式配置，入门是非常简单的。网上资料也有很多，推荐慕课网 HTML+CSS基础课程。 我当时是看了一本书 Head First HTML and CSS，讲得浅显易懂，不过价格比较感人，也是只翻一遍的书，没有必要买了。 迅速刷一遍慕课网，对HTML和CSS有个大致印象就好。想巩固HTML标签可以去看看16年的task1-1。 HTML5的API可以先放一放，回头再看。 接下来就是深入学习CSS了。推荐： 《CSS权威指南（第3版）》。很枯燥的一本书，但我确实不知道哪本书更适合了。花两三天硬啃下来就好了。属性细节不必记忆，以后用到肯定要再查的。着重点放在大局上，比如盒模型，浮动和定位这些，抓住重点快速过一遍。 《CSS3 专业网页开发指南》。CSS3也是需要掌握的内容。但这里还是以了解为主，知道CSS3有什么内容就好，记忆属性是枯燥且毫无意义的。 以上内容用时5天左右，下面是实践。 学了几天HTML和CSS了，应该也有点成果了。打开IFE2015 task1，写个静态页面吧。 我X，完全写不出来。 这是正常的。去看下别人的代码吧，看一小部分就开窍了。忘掉的属性就查书或者w3c，多尝试，不断踩坑才有进步。 画完第一张图后，别着急往下写。你的代码肯定会有如下问题： 胡乱的代码缩进 毫无章法的属性顺序 满页的div 不停地写id和class 重写吧，是的。重写之前先看一份代码规范 GitHub - ecomfe/spec: This repository contains the specifications。当然代码规范不是唯一的，我最早看的是这一份，所以代码风格也一直维持到现在。 再去看一下别人提交的代码，多看几份。当然自己也要判断，不能听风就是雨啊，人家写得不好你再去重写一次，等于你也有责任对不对。 开始重写了，会发现功力大增，写代码速度也快了很多的。 写到第三张页面的时候，应该比较熟练了。如果看到布局就大概知道应该怎么写了，那就可以进入JavaScript的学习了。 以上内容用时10天左右。 进阶部分可以回头再看： 掌握预处理工具Sass，自动化工具Gulp。 阅读Bootstrap源码。 《CSS揭秘》，极其惊艳的一本书，涵盖了CSS3的很多奇技巧，虽说有些地方不太实用，但让人眼前一亮，很值得看。
2 JavaScript 这是至关重要的阶段。 强烈推荐《JavaScript高级程序设计（第3版）》，俗称红宝书。前七章是重中之重，必须反复阅读，直至完全理解，期间可配合其他书一起读。DOM，事件流，表单，JSON，Ajax与最后几章也相当重要。其余章节可以略读或跳过（比如浏览器嗅探，XML以及那些列举大量API的章节，完全可以用到再查） 推荐《JavaScript语言精粹》，俗称蝴蝶书。超薄的一本，半天就可以看完。JavaScript是一门有很多坑的语言，我个人是喜欢把这些坑点全部搞清楚的，但这本书却避而不谈了，剩下的也就是所谓的“精粹”了。但清晰地过一遍知识点总是好的。 强烈推荐《你不知道的JS》。精彩至极的一本书，将JavaScript的坑一网打尽。之前搞不懂的问题，比如闭包，this之类的都可以在这里找到答案。 ES6也是必学的内容，推荐阮一峰老师的《ES6 标准入门》。但这本书以API居多，所以还是留个大概印象，以后写到类似的地方，查一查有没有ES6更简洁的写法就好，不必死记硬背。以及需要学会Webpack的使用，Babel和模块化就靠Webpack了。 不太推荐《JavaScript权威指南》，也就是犀牛书。那就是一本字典…… 进阶： 《JavaScript设计模式与开发实践》，设计模式是必须了解的内容，这本是写得不错的。 《高性能JavaScript》，红宝书作者的另一力作，讲了一些优化技巧与性能瓶颈问题，值得一读。 以上内容用时1个月左右，中途可穿插IFE2015 task2的题，比2016年的要简单。 这些书全部刷完的话，应该可以跟人谈笑风生了。 开始实践，IFE2016阶段二的题，想怎么刷就怎么刷吧。如果有编程经验的话，应该没什么压力了。
3 JavaScript框架 这部分就比较自由了，每个人点的技能树都不一样的。前端的发展是爆炸式的，换工具比翻书还快，所以还是以看文档为主了。 目前主流框架经常被提及的是React，Angular，Vue。知乎搜一搜就有相当多的优秀答案了。不过这个答案也有时效性，说不定过两年这些框架全都被淘汰了呢逃 学习至少一种框架，把IFE2016刷通关吧。耗时1个半月左右。 进阶：看各种源代码。这也是我最近打算做的事情，但是好像期末考要到了TAT 最后补充一下，计算机基础知识是很重要的。由于本人有OI的经验所以稍微占点优势。再推荐几本书，抽空还是要看看的： 《深入理解计算机系统》，CSAPP，也是我们专业这学期的课程（但是我的专业明明是EE啊）。 《计算机网络 自顶向下方法》，看名字就知道必读了吧。 *** 作系统好书挺多的，推荐一本 Operating Systems: Three Easy Pieces ，英文不够好就《现代 *** 作系统》吧。 算法和数据结构，推荐两本：《算法导论》《数据结构与算法分析》。似乎算法和数据结构与前端关系不大，但作为一个码农，不要求你写红黑树，至少快速排序和二分查找这种要会写的吧。
你好，本题已解答,如果满意
请点右下角“采纳答案”。

步骤 1: 在 HTML 中设置画布，创建一个引用，并获取上下文对象

画布在 HTML 中通过 <canvas> 标签定义。与其他标签类似，<canvas> 的属性（如宽度和高度）作为特性输入。假设你希望创建一个宽 500 像素、高 500 像素的画布，并将其命名为“can1”，稍后在 JavaScript 中引用它时将用到。

在 HTML 文档中输入 <canvas> 标签。

<canvas id="can1" width="500" height="500"></canvas>

在 JavaScript 文档中，创建一个变量，在编写脚本时该变量将代替“can1”。这里，我们将该变量命名为“myCanvas”，并使用 getElementById 将其链接到“can1”。

var myCanvas = documentgetElementById("can1");

画布的 CanvasRenderingContext2D 对象具有 *** 作画布的所有命令。 这里，在上下文对象中检索“can1”。将此变量称为“myContext”。

var myContext = myCanvasgetContext("2d");

步骤 2: 绘制矩形、直线、贝塞尔曲线、圆和形状

在画布上绘制简单的线条非常容易。使用 JavaScript 的 moveTo 方法可设置线条开始位置的坐标。然后只需使用另一方法设置终点。 第二步可以使用若干方法，每种方法专用于帮助呈现一种不同的线型，无论是直线、贝塞尔曲线还是圆弧。若要将线条合并为形状，可以闭合对 beginPath 和 closePath 方法调用中的线条。在指定所需的外观之后，可以使用 fill 方法应用颜色，并使用 stroke 方法执行线条和形状的呈现。

应用一些基本风格。这里，通过使用 fillStyle 属性绘制一个黑色矩形，将画布背景设置为黑色 (#000)。然后使用 strokeStyle 属性将线条颜色设置为白色 (#fff)，使用 fillRect 方法应用黑色背景，并使用 lineWidth 属性将线条的粗细设置为 3 个像素。

// Specify a black background, and white lines that are 3 pixels thick
myContextfillStyle   = '#000';
myContextstrokeStyle = '#fff';
myContextfillRect(0,0,500,500);
myContextlineWidth  = 3;myContextfill();

在后续步骤中，将在这个 500×500 的黑色画布上继续构建。

现在，准备在画布的黑色表面绘制一个白色线条。先从直线开始。

使用 moveTo 方法设置直线的起点，使用 lineTo 方法设置终点。

这些方法采用两个数字作为参数。第一个数字表示 x 轴坐标，或者表示此坐标定义的自画布左侧算起的像素数。第二个数字是从顶部开始测量的 y 轴坐标。

// Draw a line that starts at the upper left corner of the canvas and ends at the lower right 
myContextmoveTo(0,0);
myContextlineTo(500,500);
myContextstroke();

若要绘制二次贝塞尔曲线，请使用 quadraticCurveTo 方法，该方法采用两个坐标—曲线的一个控制点和一个端点。

// Draw a swooping curve that spans the width of the canvas
myContextmoveTo(0,0);
myContextquadraticCurveTo(0,500,500,250);
myContextstroke();

若要绘制三次贝塞尔曲线，请使用 bezierCurveTo 方法，该方法采用三个坐标—曲线的两个控制点和一个端点。

// Draw a V-shaped Bezier curve that spans the entire canvas
myContextmoveTo(0,0);
myContextbezierCurveTo(500, 820, 0, 500, 500, 0);
myContextstroke();

若要创建一个圆，请使用 arc 方法：在设置用于绘制圆形轮廓的原点时，请确保将 moveTo 方法设置在沿线条路径的位置上，否则圆上将有一条通向 moveTo坐标的“尾巴”。

// Draw a circle that spans the width of the canvas
myContextmoveTo(500,250);
myContextarc(250,250,250,0,MathPI2,true);
myContextstroke();

通过闭合对 beginPath 和 closePath 调用中的多个线条，可以从上述线条的任意组合中绘制一个 2D 形状。然后，整个形状可以使用 fill 接收一种颜色。前面设置的笔划样式将创建白色线条，在与应用于主体的红色 (#f00) 合并时，该形状将继承双色调外观。

//  Draw a red diamond that spans the entire canvas
myContextfillStyle = '#f00';
myContextbeginPath();
myContextmoveTo(250,0);
myContextlineTo(0,250);
myContextlineTo(250,500);
myContextlineTo(500,250);
myContextclosePath();
myContextfill();

步骤 3: 显示位图图像

位图图像（如 jpg、png 和 gif 文件）可以放置在画布上，甚至可以在代码中缩放和裁剪，不会触及原始文件。若要添加位图图像，请指定该图像的 URI，然后使用 drawImage 方法在画布上指定其位置。使用可选参数可将图像缩放到指定的大小，甚至仅显示图像的一个片段，这对于实现滚动背景或使用子画面表动态显示子画面等 *** 作非常有用。

若要在屏幕上绘制位图图像而不进行任何修改，请指定要用于左上角的 x 坐标和 y 坐标。

// Draw an image at the upper left corner of the canvas (0, 0)
var myImg = new Image();
myImgsrc = 'myImageFilepng';
myContextdrawImage(myImg, 0, 0)

若要缩放图像，可在末尾添加两个数字，分别代表宽度和高度。如果有帮助，不妨将后两个数字视为“右部”和“底部”，而不是“宽度”和“高度”。

// Scale the image to span the entire 500 x 500 canvas
var myImg = new Image();
myImgsrc = 'myImageFilepng';
myContextdrawImage(myImg, 0, 0, 500, 500)

若要仅使用图像的一个切片，则需要定义两个矩形区域，对 drawImage 的调用提高到 9 个参数（第一个参数是 JavaScript 图像对象）。要传入的前四个数字表示图像的切片。后四个数字表示要显示该切片的画布区域。

// Take a 20 x 20 slice from the upper left of the image and scale it to span the entire 500 x 500 canvas
var myImg = new Image();
myImgsrc = 'myImageFilepng';
myContextdrawImage(myImg, 0, 0, 20, 20, 0, 0, 500, 500);

步骤 4: 渐变

任何人只要熟悉在图形设计程序中定义渐变的常见方式，都会喜欢使用 JavaScript 代码定义渐变的简单性。在设计程序中是选择颜色，渐变中的颜色位置使用水平滑块设置。JavaScript 中的唯一区别是使用从 0 到 1 范围内的小数值代替滑块。

在设计程序中，线性渐变使用线条在图像上定位，线条的开始和结束位置确定方向和缩放级别。在 JavaScript 中，该线条使用两对 x、y 轴坐标绘制。然后将 4 个数字传递到 createLinearGradient 方法以创建 CanvasGradient 对象。在定义渐变对象的属性之后，就会得到所需的渐变，CanvasGradient 作为 fillStyle 传递到 fillRect 方法进行呈现。

// Render a white, red and black gradient diagonally across the canvas
var myGradient = myContextcreateLinearGradient(0,0, 500,500); // gradient starts at upper left and ends at lower right
myGradientaddColorStop(0,"#fff");   // white at the beginning of the gradient
myGradientaddColorStop(05,"#f00");// red in the middle of the gradient
myGradientaddColorStop(1,"#000");  // black at the end of the gradient
myContextfillStyle = myGradient;   // ensure the next call to fillRect will use the specified gradient
myContextfillRect(0,0,500,500);   // rectangle that contains the gradient spans the entire canvas

径向渐变的定义方式稍有不同。为渐变的起点和终点绘制两对 x、y 轴坐标—，这与线性渐变中一样—，但每个坐标对都有第三个与其关联的 z 轴坐标，用于定义半径。可以想像为围绕一个坐标绘制一个圆，该坐标位于中心 (250, 250)，绘制的圆的大小以像素为单位定义。这样定义两个圆之后，一个圆较小，一个圆跨整个画布，有 6 个数字传递到 createRadialGradient。在呈现时，径向渐变在两个圆之间的空间中绘制，颜色等级与圆的半径的大小成正比。

// Render a white, red and black radial gradient spanning the canvas
var myGradient = myContextcreateRadialGradient(250,250,0, 250,250,500); // gradient is centered and spans the entire canvas 
myGradientaddColorStop(0,"#fff");   // white at the beginning of the gradient
myGradientaddColorStop(05,"#f00");  // red in the middle of the gradient
myGradientaddColorStop(1,"#000");   // black at the end of the gradient
myContextfillStyle = myGradient;    // ensure the next call to fillRect will use the specified gradient
myContextfillRect(0,0,500,500);    // rectangle that contains the gradient spans the entire canvas

步骤 5: 动画

可以使用多种方法绘制动画。

对于画布内的元素，JavaScript 提供了 setInterval 方法，该方法计划一个重复调用的函数，每经过定义的时间间隔便调用一次该函数。在该函数中，需要重绘画布来反映对其上呈现的对象的更改。下面是一个示例，其中一个函数初始化该动画，将呈现频率计划为大约每秒 60 帧（每 1333 毫秒一帧），并且重复调用该函数将重绘画布。在本例中，径向渐变从一个小点逐渐增大，直到填充整个画布。

// Generate an animation of a growing gradient
// These variables must exist globally so both functions can access them
var myCanvas; 
var myContext;
var outerBoundary = 0, innerBoundary = 0;
// Start the animation
windowonload = initialize;
function initialize() {
    myCanvas = documentgetElementById("can1");
    myContext = myCanvasgetContext("2d");
    setInterval("redrawCanvas()",13);    // redraw @ approximately 60 frames per second
}                                        
                                         
// Run the animation                   
function redrawCanvas() {              
    if (outerBoundary < 500) {            
        outerBoundary++;             // grow the size of the gradient
    } else {                             
        innerBoundary++;             // grow the size of the inner white circle if red is maxed
    }                                    
    var myGradient = myContextcreateRadialGradient(250,250,innerBoundary, 250,250,outerBoundary);
    myGradientaddColorStop(0,"#fff");   // white at the beginning of the gradient
    myGradientaddColorStop(05,"#f00"); // red in the middle of the gradient
    myGradientaddColorStop(1,"#000");   // black at the end of the gradient
    myContextfillStyle = myGradient;    // ensure the next call to fillRect will use the specified gradient
    myContextfillRect(0,0,500,500);     // rectangle that contains the gradient spans the entire canvas
}

CSS3 转换和动画可用于转换画布本身和画布外部的对象。

此外，新的 WinJS 库有许多高度优化的动画，创建这些动画是为了模拟原有 Windows 动画的行为。 WinJS 动画有助于为你的应用 UI 提供一个高度集成的外观。有关详细信息，请参阅WinJSUIAnimation 命名空间。

步骤 6: 更多 HTML5 画布提示

可以使用一系列属性（shadowColor、shadowBlur、shadowOffsetX 和 shadowOffsetY）应用阴影。

可以使用 createPattern 方法作为一种模式重复画布中的元素。

可以使用 save 方法保存画布状态，然后执行更改，再使用 restore 方法还原以前的状态。该方法很好用，函数甚至不需要采用参数。

可以使用 globalCompositeOperation 属性定义两个画布元素重叠时会发生什么情况。 使用此属性始终可以定义在源或新元素级别发生的情况。可以执行的 *** 作有颜色混合、遮蔽和更改重叠优先级等。

注意  globalCompositeOperation 主题使用源表示新元素，使用目标表示以前存在的元素。

可以使用 strokeText 方法将文本添加到画布。

---