SVG是构建XML树的方式来达到绘制图形的,canvas是通过调用相关的方法来绘制图形的。
区别:SVG绘制图形,通过移除或者更改DOM方式来而使用canvas需要把图片从新擦除。
绘制的API在绘制上下文中定义。而不在画布中定义。
需要获得上下文对象的时候,需要调用画布的getContext方法,获得绘画的上下文。
画布元素和上下文,属于两个不同的对象,其中画布元素为canvas画布,而上下文对象为绘制需要的上下文。
关于3D图形,即,webGL 为封装了基本的OPENGL,当调用webGL的时候,其浏览器会调用OpenGL相关的API
<!DOCTYPE html> <html lang="zh_CN" xmlns="http://www.w3.org/1999/html"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div>第一个园</br> <canvas id="square" width="10" height="100"> </canvas> </div> <div> 第二个园 <canvas id="circle" width="10" height="10"> </canvas> </div> <script src="./js/index.js" charset="UTF-8"></script> </body> </html> // 获取画布元素 let canvas=document.getElementById("square"); // 获取绘制2D元素上下文 let context=canvas.getContext("2d"); // 设置填充颜色为红色 context.fillStyle="#f00"; // 填充一个正方形 context.fillRect(10,0,10,10);
// 获取画布元素
let canvas=document.getElementById("square");
// 获取绘制2D元素上下文
let context=canvas.getContext("2d");
// 开始一条路径
context.beginPath();
// 从100,100 开始定义一条新的子路径
context.moveTo(100,100);
// 从100 100 到 200 200 绘制一条线段
context.lineTo(200,200);
// 从200 200 到 100 200 绘制一条线段
context.lineTo(100,200);
// 从100 200 到 100 100 绘制一条路径
context.lineTo(100,100);
// 绘制边
context.stroke();
// 进行填充
context.fill();
以五边形为例子,
var canvas=document.getElementById("square"); var context=canvas.getContext("2d"); // 绘制一个以100,100为中心,半径为20的柜子N变形,每个定点均匀分布在圆角上,第一个定点放置在最上下 // 偏转角度为0 // 开始定义一条子路径 context.moveTo(100 + 20 * Math.sin(0), 100 - 20 * Math.cos(0)); // 计算两个顶点之间夹角 // 其中2π为一个园,除以边数,得到需要旋转的角度 var delta=2 * Math.PI/5; console.log(delta); // 循环剩余每个顶点 var angle=0; for(var i=1; i < 5; i++){ // 角度累加 angle +=delta; // 通过旋转绘制下一个顶点,不断的旋转绘制 context.lineTo(100 + 20 * Math.sin(angle), 100 - 20*Math.cos(angle)); } // 最后一个顶点和起点进行连接 context.closePath(); // 从新开始一条新路径 context.stroke(); context.fill();
同理,画圆
var canvas=document.getElementById("square"); var context=canvas.getContext("2d"); // 绘制一个以100,100为中心,半径为20的柜子N变形,每个定点均匀分布在圆角上,第一个定点放置在最上下 // 偏转角度为0 // 开始定义一条子路径 context.moveTo(100 + 20 * Math.sin(0), 100 - 20 * Math.cos(0)); // 计算两个顶点之间夹角 // 其中2π为一个园,除以边数,得到需要旋转的角度 var delta=2 * Math.PI/500000; console.log(delta); // 循环剩余每个顶点 var angle=0; for(var i=1; i < 500000; i++){ // 角度累加 angle +=delta; // 通过旋转绘制下一个顶点,不断的旋转绘制 context.lineTo(100 + 20 * Math.sin(angle), 100 - 20*Math.cos(angle)); } // 最后一个顶点和起点进行连接 context.closePath(); // 从新开始一条新路径 context.stroke(); context.fill();
非零绕数原则
要检测一个点p是否在路径内部,使用非零绕数原则,即,一条从点p出发沿着任意方向无限延伸,或者一直延伸到路径所在的区域外某点的射线,现在从0开始初始化一个计数器,对穿过这条射线的路径进行枚举,每当一条路径顺时针方向穿过射线的时候,计数器加1,逆时针减1,最后,枚举完所有路径以后,如果计时器的值不是0,那么就认为p在路径内,反过来,计数器的值为0,p在路径外。
js根据非零绕数原则确定那个在路径内,那个在路径外,用于进行填充。
可以通过设置画布上下文的fillStyle等属性,设置图形的属性,例如对画布上下文的fillStyle的属性进行设置,即,可以设置出填充时的颜色,渐变,图案等样式。
对于canvas来说,每次获取上下文对象的时候,都会返回同一个上下文对象,即,上下文对象为单例的。
还可以使用save方法,把当前的状态,压入已经保存的栈中,调用restore方法,把状态进行恢复,即弹栈。
画布的默认的坐标系为左上角的坐标原点(0,0),右边数值大,下数值大,使用浮点数指定坐标,但不会自动转换为整数,会用反锯齿的方式,模拟填充部分元素。
画布尺寸不能随意改变,对任意属性进行操作,都会清空整个画布。
每一个点的坐标都会映射到css像素上,css像素会映射到一个或多个设备像素。
画布中的特定操作,属性使用默认坐标系。
画布还有当前变换矩阵。
画布还有当前变换矩阵,当前变换矩阵作为图形状态的一部分。矩阵定义了当前画布的坐标系。
画布的操作会把该点映射到当前的坐标系中。
坐标变换
当调用c.translate(dx,dy)方法的时候,会进行如下变换
translate会进行坐标的上下移动
x'=x + dy; y'=y + dy;
缩放
如要进行缩放,进行的是如下的变换
x'=sx * x; y'=sy * y;
进行旋转操作,进行的是如下变换
x'=x * cos(a) - y * sin(a); y'=y * cos(a) - x * sin(a);
如果要先变换再伸缩,进行如下变换
需要先把现有坐标系映射成为坐标系中的点x’, y’ 然后再变换到x‘’ , y‘’
x''=sx*x + dx; y''=sy*y + dy;
如果变换顺序相反进行如下变换
x''=sx*(x + dx); y''=sy*(y + dy);
这种变换称为仿射变换,并且仿射变换会修改点的距离和线段间的夹角。对于平行线来说,仿射变换也会保持平行。仿射变换用6个参数描述成为如下表述
x'=ax + cy + e; y'=bx + dy + f;
通过传入参数实现仿射变换
对于坐标变换来说,除非进行刷新,否则,已经绘制的图形,不会进行消失,所有的变换,都不能对已经绘制的图形进行更改。栗子如下
var canvas=document.getElementById("square"); var context=canvas.getContext("2d"); // 通过坐标变换实现科赫雪花 // 开始一条路径 context.beginPath(); // 开始绘制子路径 context.moveTo(100,100); // 继续绘制 context.lineTo(200,200); // 继续绘制 context.lineTo(200,200); // 进行绘制边 context.stroke(); context.translate(200,200); // 开始一条路径 context.beginPath(); // 开始绘制子路径 context.moveTo(100,100); // 继续绘制 context.lineTo(200,200); // 继续绘制 context.lineTo(200,200); // 进行绘制边 context.stroke();
已经绘制的图形不会进行改变,改变的是已经绘制的图形
var canvas=document.getElementById("square");
var context=canvas.getContext("2d");
// 通过坐标变换实现科赫雪花
// 当前状态入栈
function leg(n) {
// 保存状态
context.save();
// 递归画
if(n==0){
context.lineTo(50, 0);
}else{
// 定义为v字型
context.scale(1/2,1/2);
// 递归第一条
context.rotate(60 * (Math.PI / 180));
leg(n - 1);
context.rotate(-120 * (Math.PI / 180));
leg(n - 1);
}
// 坐标恢复变换
context.restore();
// 恢复下一个坐标为0,0
context.translate(50, 0);
}
context.save();
context.moveTo(50, 50);
// 绘制第一条
leg(1);
context.stroke();
绘制一些常见的图形
var canvas=document.getElementById("square"); var context=canvas.getContext("2d"); // 工具函数,角度转弧度 function rads(x) { return Math.PI * x / 180; } // 绘制园 context.beginPath(); context.arc(100,100,40, 0, rads(360), false); context.stroke(); context.fill();
同理绘制贝塞尔曲线也是同理。
绘制一个渐变
需要使用createLinearGradient获取一个进行渐变的上下文,对这个上下文进行处理。然后其颜色设置为这个渐变的上下文,即,fillStyle属性。
封顶
对于线段,有三种封顶方式,即,butt,square,round
在绘制图形以后,会参数尖角,圆角,平角,三种。
lineCap属性
和css类似,基线问题。
直接调动clip即可,当前路径也会被裁剪进入,路径外的统统不会显示。
设置shadow属性即可
画布API支持位图图片,同时也支持canvas导出成为图片。
// 创建一个img元素 let img=document.createElement("img"); // 设置src属性 img.src=canvas.toDataURL(); // 追加到文档后面 document.body.appendChild(img);
一些api不在阐述
调用getImageDate方法返回ImageDate对象
使用createImageDate()可以创建像素容器
进行动态模糊先获取像素的ImageDate对象,然后再获取该对象的data属性,该data为一个数组。为一个维数组。每四个元素代表红色分量,绿色分量,蓝色分量,透明度分量。(Alpha分量)
其色素直为0-1,即,数组元素中保存的数组为色素值。
每四个每四个元素遍历。然后把其色素值的1/ n + 上一个色块的m/n 然后赋值给新的色块,代码如下
// row为行数 for(var row=0; row < height; row++){ // 获得每行第二个元素的偏移量,其中width为行的色素块。 var i=row * width * 4; // 每4个的色素值进行处理 for(var col=1; col < width; col++, i+=4){ // 对红色分量处理 data[i]=(data[i] + data[i - 4] * m) / n; // 对绿色分量处理 data[i + 1]=(data[i + 1] + data[i + 1 - 4] * m) / n; // 对蓝色分量处理 data[i + 2]=(data[i + 2] + data[i + 2 - 4] * m) / n; // 对透明度分量处理 data[i + 3]=(data[i + 3] + data[i + 3 - 4] * m) / n; } }
然后把其色素块进行复制回去即可。
其中每个像素占据一个字节,一个四个字节。
isPointInPath方法用来确定一个点是否落在当前路径中。
即命中检测。
命中检测可以和鼠标事件相互转化
但是坐标需要进行转换。
TML5引入了十三种新的表单输入,大大增加了Web设计人员和开发人员可以添加到表单中的不同字段的数量。这些新类型都需要浏览器来支持它们,并且吸收速度比我们所希望的要慢。2019年我们可能使用这些特性功能更为广泛的有哪些呢?
对于许多设计人员和开发人员来说,HTML5的一个突出的标题功能是添加了许多可以使用的新类型的表单输入。多年来,我们一直局限于使用单行文本输入(type="text")并使用JavaScript和用户指令来尝试通过一个简单的字段准确地捕获不同类型的有效数据。
HTML5带来了type属性的新值,使我们能够更加具体地了解我们需要通过该字段捕获的数据类型,并承诺浏览器将提供强制用户进入所需的接口和验证。准确地完成该领域。
从URL到电子邮件,从搜索字段到日期,希望不是需要编写繁琐的JavaScript来尝试验证这些字段,我们可以将它留给浏览器为我们做哪些艰苦的工作。更重要的是,通过添加它对用户上下文(设备类型,交互类型,时区等)的了解,浏览器可以更好地定制界面以满足用户的需求。
1.搜索字段
该type="search"输入旨在用于搜索字段。在功能上,这些与基本文本字段非常相似,但具有专用类型使浏览器能够应用不同的样式。如果用户的操作系统具有搜索字段的设置样式,则此功能特别有用,因为这使浏览器可以设置网页上的搜索字段的样式以匹配。规范说search和之间的差异text纯粹是风格的,所以如果你打算用CSS重新设置字段,最好避免这种情况。它的使用似乎没有语义上的优势。
2.电话号码字段
该type="tel"输入用于输入电话号码。这些就像Whatsapp使用的唯一用户名。如果你不确定,请问你的祖父母。在国际上,出于技术和本地化原因,电话号码采用了许多不同的格式。因此,tel输入不会尝试验证电话号码的格式。可以使用关联的验证工具(如pattern标记上的属性)或setCustomValidity() JavaScript方法来强制执行格式。
在桌面浏览器上,电话领域的使用似乎影响不大,但是,在具有虚拟键盘的设备上,它们非常有用。例如,在iOS上,在电话领域上的聚焦输入会打开一个数字小键盘,准备用于键入数字。此外,设备的自动完成机制启动并建议可以通过单击自动填充的电话号码。
3. URL字段
该type="url"字段可用于捕获URL。例如,当要求用户输入其商业目录的网站地址时,您可以使用此方法。关于URL字段的奇怪之处在于它只需要完整的绝对URL。例如,没有选项只能捕获域名或路径,这确实限制了它在某些方面的实用性,因为CMS和Web应用程序开发人员会发现许多用于接受和验证相对路径的字段。
4.电子邮件字段
可能最常用的新选项之一是type="email"电子邮件地址,就像我们看到的电话号码和URL一样,带有虚拟键盘的设备可以自定义键(包括@按钮之类的东西)并从其联系人数据库启用自动填充功能。
电子邮件地址通常看起来像是一种非常简单的格式,但这些变化实际上使它们非常复杂。验证电子邮件地址的天真尝试可能会导致将完美的地址标记为无效,因此能够依靠浏览器更复杂且经过良好测试的验证方法来检查格式是非常棒的。有用的是,multiple可以将该属性添加到电子邮件字段以收集电子邮件地址列表。在这种情况下,列表中的每个电子邮件地址都是单独验证的。
5.数字字段
该type="number"字段是专为数值,浏览器支持很广泛,虚拟键盘通常默认为数字输入模式以键入值。
使用type="number"任何浮点数,因为它的广泛的支持,可以帮助防止意外输入。
6.范围字段
type="range"可以被认为是type="number"用户不关心确切值的替代方案的范围字段取,会经常使用,同样的min,max和step属性作为多个字段,和浏览器几乎普遍地展示本作为图形滑块,用户不一定能够看到他们设置的确切值。type="range"用途可能有点小,但支持很好,滑块提供了一个用户友好的输入方法。
7.色域
该type="color"字段设计用于以十六进制表示法捕获RGB颜色,例如#aabbcc。HTML规范将其称为“颜色控制”,其目的是浏览器应提供某种用户友好的颜色选择器。
有些浏览器确实提供了这一功能,特别是Chrome和Firefox都提供了通过小色块访问系统颜色选择器的功能。
8.日期字段
HTML5引入了许多不同的type值来创建日期和时间的输入。这些措施包括date,time,datetime-local,month和week。
Firefox有一个非常出色的日期选择器,Chrome和Edge也有相当不错的界面。然而,在旧的IE中没有支持,在Safari中没有支持。
自HTML5规范成为推荐以来的四年中,浏览器领域发生了很大变化。对新型输入的支持相当强劲 - 特别是在具有平板电脑和手机等虚拟键盘的移动设备中。在大多数情况下,这些输入可以安全使用,并为用户提供一些额外的实用程序。
有一些值得注意的例外,其中最糟糕的是日期和时间字段,他们不仅缺乏实用性,而且还有更多不完整浏览器支持功能。当支持不可用时,这些字段的后备模式很差。在这些情况下,最好坚持使用基于JavaScript的解决方案来逐步增强基本type="text"输入字段。
?
端开发工程师实际上是负责IT系统工程的,实际上就是负责信息化系统的设计、建设,包括设备、系统、数据库、应用系统的建设的。说白了,你前期就是个做网页的,但是后期会慢慢变得越来越厉害,自己写网站,做各种动画游戏不再话下,喜欢哪个女生,分分钟在网页上给你画出来花。会了这些害怕追不到妹子么?是不是很流弊?
等你进入公司后,一般来说都是这么分工的:
1.产品需求:
由产品经理给出需求文档
2.项目设计:
视觉设计师-->PSD 设计图
交互设计师-->对网站交互进行设计
3.前端开发:
HTML
iOS
Android
Unity-3D
4.后台开发:
后台人员配合
5.上线运营
需要注意,很多公司实际上把网站规划这个工作也直接交给产品去做了,这实际上是不对的。而且像网站的交互设计师,很多公司都直接被省略了,而且最后的上线运营一般来说,跟咱们也没什么关系。
那我接下来都要学习什么呢?
首先就是要学习各种开发工具的使用,例如各种浏览器的使用,熟悉各种浏览器的插件,明确各种浏览器之间的差异,并且还要掌握使用传说中的《亚洲四大邪术》中的 中国PS 术。还需要掌握各种语言,例如 HTML ,CSS ,JS ,DOM ,BOM ,PHP ,Ajax ,Node.js等。
今天我们先来讲讲前端开发的核心语言。
前端开发的核心语言:
HTML : 超文本标记语言结构
CSS : 层叠样式表表现
JS : 脚本语言行为
要是还是不懂,可以给大家举个例子。
看见没有,HTML , CSS 和 JS 三者实际上相互配合的,HTML 负责结构,CSS 负责样式,JS 负责行为,例如我点击了一下,这个色块就变长了。
对了,刚才说这个里面用了这三者,那么什么是 HTML 呀?”
HTML其实就是超文本标记语言。
超越文本,可以包含图片,链接,和一些其他的资源;
标记,是指特定的位置写特定的内容(都写过信吧,信封上让你写邮编的框框就是标记呦);
如何做标记?
<> </> 双标记
</>单标记
标记语言,是给标记里面书写"特定的"英文单词,给这个标记赋予了特殊的意义,就是标记语言.
我们知道了什么是HTML之后,那我们如何去写 HTML 呢?这个先不急,我们首先来认识一下,HTML 的基本结构。
大家也看到了,这样写出来的内容一点都不好看呀,那我们该如何去把这个东西变得更美观一点呢?这当然要用到我们强大的 CSS 了,也就是层叠样式表。
那我们该如何去把CSS应用到页面中呢?直接写么?当然不是,引入CSS的方式分为三种:内联样式表、内部样式表、外部样式表。像我们刚才使用的方式,就是“内联样式表”。
内联样式表的写法:写在标签内部
优点:优先级最高
缺点:冗余代码太多,不利于维护
使用场景:个别特殊效果的设置,平时不推荐使用
“内部样式表”和“外部样式表”他们都是需要写在 <head> 标签内部的。”
接下来我还需要给大家说说CSS选择器了,你想要某一个东西发生改变,首先就需要让它知道它自己需要改变。
CSS选择器有三种选择方式:
1.标签名选择器
2.类选择器
3.ID 选择器
现在大家应该明白该如何使用css选择器了吧。
接下来我们再来学一下如何控制一些基本的样式。首先是背景。
学习了背景设置之后再来学习边框的设置。
之后我们还需要学习内边距----padding。
有内自然有外,外边距----margin。
学会了 padding,border,margin 就可以组成我们前端开发无往不利的《盒模型》啦。有没有很开心啊.
盒模型
盒子占地的空间面积
宽: width + border-left + border-right + padding-left + padding-right;
高: height + border-top + border-bottom + padding-top + padding-bottom;
控制文字样式的各种方法。”
本文链接:http://hn.lanou3g.com/lozx/2872.html
*请认真填写需求信息,我们会在24小时内与您取得联系。