学习总结之HTML5剑指前端[思维导图]

2020年4月4日20:13:01 发表评论 127 views

《HTML5与CSS3权威指南》这本书很不错,学完之后我颇有感触,觉得web的世界开明了许多。这本书是需要有一定基础的web前端开发工程师。

这本书主要学习HTML5和css3,看看这本书的书名就知道了,首先学习HTML5中新增的语法与标记方法,新增的元素和api。

读者了解内容:

学习总结之HTML5剑指前端[思维导图]

除了HTML5还有css3需要学习,css3中有各种新增的样式和属性。

学习总结之HTML5剑指前端[思维导图]

这本书也要感谢作者以及工作人员。

这本书还有实例,使用HTML5中新增结构元素来构建网页,和使用HTML5+css3来构建web应用程序。

学习总结之HTML5剑指前端[思维导图]

从2010年开始HTML5地推出,受到了世界各大浏览器的热烈支持,在业界很受欢迎。那么你需要了解一下HTML5与之前版本的大致区别吗,需要了解为啥支持HTML5吗,答案是不太需要也能工作。

但是如,一份前端你能敲出代码,但是问题你懂得什么是cookie吗?也许你懂个大概,组长或者高管问你什么是cookie?有时候大部分人都是一头晕,不过,百度查一下就能知道答案。

其实需要了解一下的,关于HTML5

学习总结之HTML5剑指前端[思维导图]

HTML5的出现就连微软也为此下一代的ie9做了标准上的改进,就是为了能够支持html5

HTML4的代码示例:

示例代码:

<form>
<p><label>用户名:<input name="search" type="text" id="search"></label></p>
<script type="text/javascript">
 document.getElementById("search").focus();
</script>
</form>
复制代码

HTML5的示例:

<form>
<p><label>Search:<input name="search" autofocus></label></p>
</form>
<div id="header">...</div>
<div id="nav">...</div>
<div class="arcticle">...</div>
<div id="side-bar">...</div>
<div id="footer">...</div>
复制代码

HTML5的目的

HTML5的出现就是为了能够建立更简单的web程序,让程序员编写更简单的HTML代码,HTML5提供了很多api,新的属性,新的元素等等,这样HTML5就有理由成为受欢迎的了。

在HTML5中代替Cookie的sessionStorage功能与globalStorage功能在ie8里获得了支持。

一个新版本的出现,很多人都会有疑问,担心它会不会产生错误等。不过呢?它还是有它火的理由。

学习总结之HTML5剑指前端[思维导图]
  1. 兼容性
  2. 实用性
  3. 非革命性的发展

HTML5的出现解决了各种问题,这是一次比较强大的版本。

学习总结之HTML5剑指前端[思维导图]

contentEditable属性,designMode属性,hidden属性,spellcheck属性,tabindex属性。

HTML5

内容类型ContentType还是text/html

DOCTYPE声明,在HTML5中的DOCTYPE声明方法如下,不区分大小写:<!DOCTYPE html>

指定字符编码,HTML5:<meta charset="UTF-8">

<meta charset="UTF-8" http-equiv="Content-Type" content="text/html;charset=UTF-8">

代码示例:

checkbox checkbox1 checkbox2 checkbox3

代码:

<input type="checkbox" checkbox>checkbox
<input type="checkbox">checkbox1
<input type="checkbox" checked="checked">checkbox2
<input type="checkbox" checked="">checkbox3
复制代码

HTML5标记示例:

<!DOCTYPE html>
<meta charset="UTF-8">
<title>html5</title>
<p>html5
<br/>html5
复制代码

新增元素

section元素,表示页面中的一个内容区块。

article元素,表示页面中的一块与上下文不相关的独立内容。

aside元素,表示article元素的内容之外的,与article元素的内容相关的辅助信息。

header元素,表示页面中一个内容区块或整个页面的标题。

hgroup元素,用于对整个页面或页面中一个内容区块的标题进行组合。

footer元素,表示整个页面或页面中一个内容区块的脚注。

nav元素,表示页面中导航链接的部分。

figure元素,表示一段独立的流内容,一般表示文档主体流内容中的一个独立单元。

效果:

web
web

代码:

<figure>
<figcaption>web</figcaption>
<p>web</p>
</figure>
复制代码

video元素,定义视频。

audio元素,定义音频。

embed元素,用来插入各种多媒体。

mark元素,用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字。

progress元素,表示运行中的进程。

time元素,表示日期或时间。

ruby元素,表示ruby注解。

rt元素,表示字符的解释或发音。

rp元素,表示在ruby注解中使用,以定义不支持ruby元素的浏览器所显示的内容。

wbr元素,表示软换行。

canvas元素,表示图形,比如图表和其他图像。

效果:

代码示例:

<canvas style="background-color: red;" id="myCanvas" width="100" height="100"></canvas>
复制代码

command元素,表示命令按钮,比如单选按钮,复选框或按钮。

代码:

<command onclick="cut()" label="cul">
复制代码

details元素,表示用户要求得到并且可以得到的细节信息。

html-详情

web

代码:

<details>
 <summary>html-详情</summary>
 web
</details>
复制代码

datalist元素,表示可选数据的列表

datagrid元素,表示可选数据的列表,它以树形的形式来显示。

keygen元素,表示生产密钥。

output元素,表示不同类型的输出,比如脚本的输出。

source元素,表示用来为媒介元素定义媒介资源。

menu元素,表示菜单列表。

效果:

  • web
  • it
  • 代码:

    <menu>
     <li><input type="checkbox"/>web</li>
     <li><input type="checkbox"/>it</li>
    </menu>
    复制代码

    input新增元素的类型

    email表示必须输入E-mail地址的文本输入框。

    url表示必须输入url地址的文本输入框。

    number表示必须输入数值的文本输入框。

    range表示必须输入一定范围内数字值的文本输入框。

    Date Pickers

    date-选取日,月,年

    month-选取月,年

    week-选取周和年

    time-选取时间,日,月,年

    datetime-选取时间,日,月,年

    datetime-local-选取时间,日,月,年

    html5已不支持frame框架,只支持iframe框架。

    表单新增属性

    multiple属性允许上传文件时一次上传多个文件。

    input元素,button元素,form元素增加了novalidate属性,该属性取消提交时进行的有关检查,表单可以被无条件地提交。

    ol元素添加reversed,表示列表倒序显示。

    meta元素增加charset属性。

    menu元素增加了两个新的属性——typelabel

    style元素增加scoped属性,用来规定样式的作用范围。

    script元素增加async属性,它定义脚本是否异步执行。

    全局属性

    contentEditable属性,功能是允许用户编辑元素中的内容,该元素是可以获得鼠标焦点的元素,而且在点击鼠标后,要向用户提供一个插入符号,提示用户该元素中的内容允许编辑。

    除了contentEditable属性外,元素还具有一个isContentEditable属性,当元素可编辑时,该属性为true,当元素不可编辑时,该属性为false

    示例:

    <ul contentEditable="true">
    <li>元素1</li>
    </ul>
    复制代码

    designMode属性,表示整个页面是否可编辑。使用JavaScript脚本来指定designMode属性的方法如下所示:document.designMode="on"

    hidden属性,所有的元素都允许使用一个hidden属性。该属性类似于input元素中的hidden元素,是用来不渲染该元素,让元素处于不可见状态。

    spellcheck属性,是对用户输入的文本内容进行拼写和语法检查。spellcheck属性是一个布尔值的属性,具有truefalse两种值。

    tabindex属性,当不断敲击tab键让窗口或页面中的控件获得焦点,对窗口或页面中的所有控件进行遍历的时候,每一个控件的tabindex表示该控件是第几个被访问到的。

    HTML5新增

    article元素,section元素,nav元素,aside元素,header元素,hgroup元素,footer元素,address元素。

    article元素代表文档,页面或应用程序中独立的,完整的,可以独自被外部引用的内容。

    article示例:

    <article>
     <header>
      <h1>web</h1>
      <p>日期</p>
     </header>
     <footer>
      <p>web</p>
     </footer>
    </article>
    复制代码

    aside元素用来表示当前页面或文章的附属信息部分。

    time元素代表24小时中的某个时刻或某个日期,表示时刻时允许带时差。

    pubdate属性是一个可选的,boolean值的属性,用于article元素中的time元素上。

    代码:

    <header><h1>页面标题</h1></header>
    复制代码

    hgroup元素是将标题以及其子标题进行分组的元素。

    footer元素可以作为其上层父级内容区块或是一个根区块的脚注。

    代码:

    <div id="footer">
    <ul>
     <li>web</li>
    </ul>
    </div>
    复制代码

    内容区块的编排,可以分“显示编排”与“隐式编排”两种方式。

    表单与文件

    form属性示例

    示例代码:

     <form id="testform">
     <input type="text">
     </form>
     <textarea form="testform"></textarea>
    复制代码

    formaction属性

    formaction,增加不同的此属性,可以使得点击不同的按钮,将表单提交到不同的页面。

    formmethod属性

    每个表单内也只有一个method属性来指统一指定提交方法。在HTML5中,可以使用formation属性来对每个表单元素分别指定不同的提交页面,同时也可以使用formmethod属性来对每个表单元素分别指定不同的提交方法。

    placeholder是指当文本框处于未输入状态时显示的输入提示,autofocus属性自动获取光标焦点。

    <input type="text" autofocus>
    复制代码

    autocomplete属性,辅助输入所用的自动完成功能。

    input元素,search用于搜索,tel用于电话,url用于输入url格式,email用于输入email格式的文字,number用于数值输入文本框,range只允许输入一段范围内数值的文本框。color颜色选择文本框。file文本选择文本框。










    代码:

    <input name="url" type="url" value="http://www.microsoft.com">
    <br/>
    <input name="email" type="email" value="2397923107@qq.com">
    <br/>
    <input name="date"  type="date" value="2020-02-02">
    <br/>
    <input name="time" type="time" value="10:00">
    <br/>
    <input name="datetime" type="datetime">
    <br/>
    <input name="datetime-local" type="datetime-local">
    <br/>
    <input name="month" type="month" value="2010-10">
    <br/>
    <input name="week" type"week" value="2010-w40">
    <br/>
    <input name="number" type="number" value="23" min="10" max="100" step="5">
    <br/>
    <input name="range" type="range" value="30" min="0" max="100" step="5">
    复制代码

    output元素的追加,定义不同类型的输出。

    代码:

    <input name="range1" type="range" min="0" max="100" step="5"/>
    <output onforminput="value=range1.value">50</output>
    复制代码

    required属性,提示用户这个元素中必须输入内容。

    pattern属性,要求输入内容符合一定的格式。

    step属性控制元素中的值增加或者减少时的步幅。

    显式验证,checkValidiity方法,调用该方法,显式地对表单内所有元素内容或单个元素内容进行有效性验证。

    cite元素表示作品的标题。

    file控件内只允许放置一个文件,multiple属性,file控件内允许一次放置多个文件。FileList对象为这些file对象的列表,代表用户选择的所有文件。

    Blob对象

    Blob对象表示二进制原始数据,它提供了一个slice方法。blob对象有两个属性,size属性表示一个blob对象的字节长度,type属性表示blob的mime类型。

    blob对象使用示例

    var file;
    // 得到用户选择的第一个文件
    file=document.getElementById("file").files[0];
    var size = document.getElementById("size");
    // 显示文件字节长度
    size.innerHTML=file.size;
    var type=document.getElementById("type");
    // 显示文件类型
    type.innerHTML=file.type;
    复制代码

    代码:

    <input type="file" id="file" accept="image/*"/>
    复制代码

    FileReader接口主要用来把文件读入内存,并且读取文件中的数据。

    if(typeof FileReader == 'undefined'){
        alert("web")
    }else{
        var reader = new FileReader();
    }
    复制代码

    支持拖动处理的mime的类型为以下几种:

    text/plain:文本文字

    text/html:HTML文字

    text/xml:xml文字

    text/uri-list:url列表,每个url为一行。

    canvas元素

    canvas元素是很重要,可以画出图形与图像。

    学习总结之HTML5剑指前端[思维导图]

    canvas元素指定idwidthheight三个属性。

    body的属性中,使用了onload="draw('canvas');"语句,调用脚本文件中的draw函数进行图形描画。

    canvas元素绘制图形时。

    1. 取得canvas元素,用document.getElementById等方法取得canvas对象。
    2. 取得上下文,进行绘制图形时,需要使用图形上下文,它是一个封装很多绘图功能的对象,需要使用canvas对象的getContext方法来获得图形上下文。
    3. 填充和绘制边框,填充为fill,绘制边框stroke。填充表示填满图形内部,绘制边框是指只绘制图形的边框。
    4. 设定绘图样式,主要是用于图形的颜色,但不限于图形的颜色。第一,设定填充图形的样式,fillStyle属性,填充的样式,在该属性中填充的颜色值。第二,设定图形边框的样式,strokeStyle属性,图形边框的样式,在该属性中填入边框的颜色值。
    5. 指定线宽,使用图形上下文对象的lineWidth属性设置图形边框的宽度。在绘制图形的时候,任何直线都可以通过lineWidth属性来指定直线的宽度。
    6. 指定颜色值,填充颜色和边框的颜色分别通过fillStyle属性和strokeStyle属性。(rgb(红,绿,蓝)或rgba(红,绿,蓝,通明度))。
    7. 绘制矩形,使用fillRect方法和strokeRect方法来填充矩形和绘制矩形边框。

    context.fillRect(x,y,width,height) context.strokeRect(x,y,width,height)

    坐标原点为canvas画布的最左上角

    代码示例:

    <script>
    function draw(id) {
        var canvas = document.getElementById(id);
        if(canvas == null){
            return false;
        }
        var context = canvas.getContext('2d');
        context.fillStyle="#EEEEFF";
        context.fillRect(0,0,400,300);
        context.fillStyle="red";
        context.strokeStyle="blue";
        context.lineWidth=1;
        context.fillRect(50,50,100,100);
        context.strokeRect(50,50,100,100);
    }
    </script>
    复制代码

    clearRect方法,该方法将擦除指定的矩形区域中的图形,让矩形区域中的颜色全部变为透明。

    context.clearRect(x,y,width,height)

    代码:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset=utf-8>
        <meta name=description content="">
        <meta name=viewport content="width=device-width, initial-scale=1">
        <title>1</title>
    </head>
    <body>
    <canvas id="canvasId"></canvas>
    <script>
        var canvas = document.getElementById('canvasId');
        if(canvas == null){
            return false;
        }
        var context = canvas.getContext('2d');
        context.fillStyle="#EEEEFF";
        context.fillRect(0,0,400,300);
        var n = 0;
        for(var i=0;i<10;i++){
            context.beginPath();
            context.arc(i*25,i*25,i*10,0,Math.PI*2,true);
            context.closePath();
            context.fillStyle = 'rgba(255,0,0,0.25)';
            context.fill();
        }
    </script>
    
    </body>
    </html>
    复制代码

    图形绘制:

    学习总结之HTML5剑指前端[思维导图]
    • 使用图形上下文对象的beginPath方法:context.beginPath(),这个方法不使用参数。调用这个方法,开始路径的创建。
    • context.arc(x,y,radius,startAngle,endAngle,anticlockwise)创建圆形路径。

    radius为原型半径,startAngle为开始角度,endAngle为结束角度,anticlockwise为是否按顺时针方向进行绘制。

    arc方法可以用来绘制圆形,和绘制圆弧,开始角度与结束角度决定了弧度,anticlockwise参数为布尔值的参数。true按顺时绘制,false按逆时针方向绘制。

    • 关闭路径,使用图形上下文对象的closePath方法将路径关闭。context.closePath(),这步操作只是路径创建完成而已,并没有绘制任何图形。
    • 绘制样式,context.fillStyle='rgba(255,0,0,0.25)';

    moveTolineTo

    moveTo方法的作用是将光标移动到指定坐标点,绘制直线的时候以这个坐标点为起点。moveTo(x,y),x为横坐标,y为纵坐标。

    lineTo方法在moveTo方法中指定的直线起点与参数中指定的直线终点绘制一条直线。

    lineTo(x,y),x表示直线终点的横坐标,y为直线终点的纵坐标。

    贝济埃曲线

    贝济埃曲线绘制使用bezierCurveTo方法

    该方法的定义:

    context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);

    拥有6个参数。绘制贝济埃曲线需要两个控制点,cp1,cp2x,y分别为曲线终点的横纵坐标。

    绘制贝济埃曲线示例:

    效果

    学习总结之HTML5剑指前端[思维导图]
    学习总结之HTML5剑指前端[思维导图]

    代码:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset=utf-8>
        <meta name=description content="">
        <meta name=viewport content="width=device-width, initial-scale=1">
        <title>1</title>
    </head>
    <body>
    
    
    <button onclick="draw()">
        点击
    </button>
    
    <canvas id="can"> </canvas>
    
    <script>
    
    function draw(){
        var canvas = document.getElementById('can')
        if(canvas == null){
            return false;
        }
        var context = canvas.getContext('2d');
        context.fillStyle = '#EEEFF';
        context.fillRect(0,0,400,300);
        var n = 0;
        var dx = 150;
        var dy = 150;
        var s = 100;
        context.beginPath();
        context.globalCompositeOperation = 'and';
        context.fillStyle = 'rgb(100,255,100)';
        var x = Math.sin(0);
        var y = Math.cos(0);
        var dig = Math.PI / 15 * 11;
        context.moveTo(dx,dy);
        for(var i=0; i<30; i++) {
            var x = Math.sin(i * dig);
            var y = Math.cos(i * dig);
            context.bezierCurveTo(dx+x+s,dy+y*s-100,dx+x*s+100,dy+y*s,dx+x*s,dy+y*s);
        }
        context.closePath();
        context.fill();
        context.stroke();
    }
    
    </script>
    
    </body>
    </html>
    复制代码

    使用quadraticCureTo方法绘制二次样条曲线。

    context.quadraticCurveTo(in float cpx, in float cpy,in float x,in float y)

    二次样条曲线比绘制贝济埃曲线容易绘制,二次样条曲线需要两个控制点,贝济埃曲线只需要一个控制点。

    绘制渐变图形

    绘制线性渐变

    fillStyle方法可以填充颜色外,还可以指定填充的对象。

    渐变:指填充时从一种是颜色慢慢过渡到另外一种颜色。

    两点之间的线性渐变

    context.createLinearGradient(xStart, yStart, xEnd, yEnd);

    使用四个参数。

    使用这个方法创建了一个使用两个坐标点的LinearGradient对象。使用addColorStop方法进行设定渐变的颜色。

    context.addColorStop(offset, color);

    offset的值是一个范围在0到1之间的浮点值,渐变起始点的偏移量为0,结束点为1。它为所设定的颜色离开渐变起始点的偏移量。

    渐变,需要至少使用两次addColorStop方法以追加两个颜色。

    HTML5 canvas fillRect() 方法

    绘制 150*100 像素的已填充矩形:

    学习总结之HTML5剑指前端[思维导图]

    fillRect() 方法绘制“已填色”的矩形。默认的填充颜色是黑色。

    JavaScript:

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.fillRect(20,20,150,100);
    复制代码

    JavaScript 语法:

    context.fillRect(x,y,width,height);

    参数值

    参数描述
    x矩形左上角的 x 坐标
    y矩形左上角的 y 坐标
    width矩形的宽度,以像素计
    height矩形的高度,以像素计

    HTML5 canvas createLinearGradient() 方法

    定义从黑到白的渐变(从左向右),作为矩形的填充样式:

    学习总结之HTML5剑指前端[思维导图]

    JavaScript:

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    
    var grd=ctx.createLinearGradient(0,0,170,0);
    grd.addColorStop(0,"black");
    grd.addColorStop(1,"white");
    
    ctx.fillStyle=grd;
    ctx.fillRect(20,20,150,100);
    复制代码

    createLinearGradient() 方法创建线性的渐变对象。

    JavaScript 语法:

    context.createLinearGradient(x0,y0,x1,y1);

    参数值

    参数描述
    x0渐变开始点的 x 坐标
    y0渐变开始点的 y 坐标
    x1渐变结束点的 x 坐标
    y1渐变结束点的 y 坐标

    定义用蓝色填充的矩形:

    学习总结之HTML5剑指前端[思维导图]

    JavaScript:

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.fillStyle="#0000ff";
    ctx.fillRect(20,20,150,100);
    复制代码

    渐变效果:

    学习总结之HTML5剑指前端[思维导图]

    代码:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset=utf-8>
        <meta name=description content="">
        <meta name=viewport content="width=device-width, initial-scale=1">
        <title>1</title>
    </head>
    <body>
    
    
    <button onclick="draw()">
        点击
    </button>
    
    <canvas id="can"> </canvas>
    
    <script>
    
    function draw(){
        var canvas = document.getElementById('can')
        if(canvas == null){
            return false;
        }
        var context = canvas.getContext('2d');
        var g1 = context.createLinearGradient(0,0,0,300);
        g1.addColorStop(0,'rgb(255,255,0)');
        g1.addColorStop(1,'rgb(0,255,255)');
        context.fillStyle=g1;
        context.fillRect(0,0,400,300);
        var n = 0;
        var g2 = context.createLinearGradient(0,0,300,0);
        g2.addColorStop(0, 'rgba(0,0,255,0.5)');
        g2.addColorStop(1, 'rgba(255,0,0,0.5)');
        for(var i=0; i<10; i++){
            context.beginPath();
            context.fillStyle = g2;
            context.arc(i*25,i*25,i*10,0,Math.PI*2,true);
            context.closePath();
            context.fill();
        }
    
    }
    
    </script>
    
    </body>
    </html>
    复制代码

    绘制径向渐变

    径向渐变:指沿着圆形的半径向外进行扩散的渐变方式。

    使用图形上下文对象的createRadiaGradient方法绘制。

    context.createRadiaGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd);

    需要使用6个参数。

    参数描述
    xStart渐变开始圆的圆心横坐标
    yStart渐变开始圆的圆心纵坐标
    radiusStart开始圆的半径
    xEnd渐变结束圆的圆心横坐标
    yEnd渐变结束原型纵坐标
    radiusEnd结束圆的半径

    设定颜色也是使用addColorStop方法。同理的0到1之间的浮点数作为渐变转折点的偏移量。

    绘制径向渐变效果:

    使用createRadialGradient方法,使用addColorStop方法:

    HTML5 canvas beginPath() 方法

    在画布上绘制两条路径;红色和蓝色:

    学习总结之HTML5剑指前端[思维导图]

    定义和用法

    beginPath() 方法开始一条路径,或重置当前的路径。

    开始一条路径,移动到位置 0,0。创建到达位置 300,150 的一条线:

    学习总结之HTML5剑指前端[思维导图]

    JavaScript:

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.beginPath();
    ctx.moveTo(0,0);
    ctx.lineTo(300,150);
    ctx.stroke();
    复制代码

    JavaScript:

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    
    ctx.beginPath();
    ctx.lineWidth="5";//设置线段厚度的属性
    ctx.strokeStyle="red"; // 红色路径
    ctx.moveTo(0,75);
    ctx.lineTo(250,75);
    ctx.stroke(); // 进行绘制
    
    ctx.beginPath();
    ctx.strokeStyle="blue"; // 蓝色路径
    ctx.moveTo(50,0);
    ctx.lineTo(150,130);
    ctx.stroke(); // 进行绘制
    复制代码

    绘制径向渐变效果:

    学习总结之HTML5剑指前端[思维导图]

    代码:(注意单词拼写)

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset=utf-8>
        <meta name=description content="">
        <meta name=viewport content="width=device-width, initial-scale=1">
        <title>1</title>
    </head>
    <body>
    
    
    <button onclick="draw()">
        点击
    </button>
    
    <canvas id="can"> </canvas>
    
    <script>
    
    function draw(){
        var canvas = document.getElementById('can')
        if(canvas == null){
            return false;
        }
        var context = canvas.getContext('2d');
        var g1 = context.createRadialGradient(400,0,0,400,0,400);
        g1.addColorStop(0.1,'rgb(255,255,0)');
        g1.addColorStop(0.3,'rgb(255,0,255)');
        g1.addColorStop(1,'rgb(0,255,255)');
        context.fillStyle=g1;
        context.fillRect(0,0,400,300);
        var n = 0;
        var g2 = context.createRadialGradient(250,250,0,250,250,300);
        g2.addColorStop(0.1,'rgba(255,0,0,0.5)');
        g2.addColorStop(0.7,'rgba(255,255,0,0.5)');
        g2.addColorStop(1,'rgba(0,0,255,0.5)');
        for(var i=0; i<10; i++){
            context.beginPath();
            context.fillStyle = g2;
            context.arc(i*25,i*25,i*10,0,Math.PI*2,true);
            context.closePath();
            context.fill();
        }
    }
    
    </script>
    
    </body>
    </html>
    复制代码

    绘制变形图形

    坐标变换

    变形:使用Canvas API的坐标轴变换处理功能可以实现。

    绘制图形,默认情况下,Canvas画布的最左上角对应的是坐标轴的原点。即为(0,0)

    对坐标进行处理,就可以实现图形的变形。

    三种方式:

    1. 平移
    2. 扩大
    3. 旋转

    平移:使用图形上下文对象的translate方法移动坐标轴原点。

    方法:context.translate(x,y)x,y为移动多少个单位。

    扩大:使用图形上下文对象的scale方法将图形放大。

    方法:context.scale(x,y)x,y为该方向上放大倍数。

    旋转:使用图形上下文对象的rotate方法将图形进行旋转。

    方法:context.rotate(angle)angle为旋转的角度,旋转为顺时针方向,逆时针需要将参数设置为负数。

    坐标变换示例:

    学习总结之HTML5剑指前端[思维导图]

    代码:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset=utf-8>
        <meta name=description content="">
        <meta name=viewport content="width=device-width, initial-scale=1">
        <title>1</title>
    </head>
    <body>
    
    
    <button onclick="draw()">
        点击
    </button>
    
    <canvas id="can"> </canvas>
    
    <script>
    
    function draw(){
        var canvas = document.getElementById('can')
        if(canvas == null){
            return false;
        }
        var context = canvas.getContext('2d');
        context.fillStyle = '#EEEEFF';
        context.fillRect(0,0,400,300);
        // 图形绘制
        context.translate(200,50);
        context.fillStyle='rgba(255,0,0,0.25)';
        for(var i=0; i<50; i++){
            context.translate(25,50);
            context.scale(0.95,0.95);
            context.rotate(Math.PI/10);
            context.fillRect(0,0,100,50);   
        }
        
    }
    
    </script>
    
    </body>
    </html>
    复制代码

    对使用路径绘制出来的图像进行变形

    学习translate,scale,rotate方法。

    效果:将坐标变换和路径结合使用

    学习总结之HTML5剑指前端[思维导图]

    代码:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset=utf-8>
        <meta name=description content="">
        <meta name=viewport content="width=device-width, initial-scale=1">
        <title>1</title>
    </head>
    <body>
    
    
    <button onclick="draw()">
        点击
    </button>
    
    <canvas id="can"> </canvas>
    
    <script>
    
    function draw(){
        var canvas = document.getElementById('can')
        if(canvas == null){
            return false;
        }
        var context = canvas.getContext('2d');
        context.fillStyle = '#EEEEFF';
        context.fillRect(0,0,400,300);
        // 图形绘制
        context.translate(200,50);
        for(var i=0; i<50; i++){
            context.translate(25,50);
            context.scale(0.95,0.95);
            context.rotate(Math.PI/10);
            create5Star(context);
            context.fill();
        }
        
    }
    function create5Star(context){
        var n = 0;
        var dx=100;
        var dy=0;
        var s=50;
        context.beginPath();
        context.fillStyle='rgba(255,0,0,0.5)';
        var x = Math.sin(0);
        var y = Math.cos(0);
        var dig =Math.PI/5*4;
        for(var i=0;i<5;i++){
            var x =Math.sin(i*dig);
            var y =Math.cos(i*dig);
            context.lineTo(dx+x*s,dy+y*s);
        }
        context.closePath();
    }
    
    </script>
    
    </body>
    </html>
    复制代码

    矩阵变换

    利用矩阵变换实现的变形技术

    使用图形上下文对象的transforms方法修改变换矩阵

    context.transform(m11, m12, m21, m22, dx, dy)

    参数描述
    dx将坐标原点在x轴上向右移动x个单位
    dy将坐标原点在y轴上向下移动y个单位

    矩阵方法需要重新找文档进行深入学习。之前的图形变形提到的三个方法,实际上是隐式地修改了变换矩阵。

    下面可以使用transform方法进行代替:translate(x,y),scale(x,y),rotate(angle)

    transform方法实现变形的示例

    学习总结之HTML5剑指前端[思维导图]

    代码:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset=utf-8>
        <meta name=description content="">
        <meta name=viewport content="width=device-width, initial-scale=1">
        <title>1</title>
    </head>
    <body>
    
    
    <button onclick="draw()">
        点击
    </button>
    
    <canvas id="can"> </canvas>
    
    <script>
    
    function draw(){
        var canvas = document.getElementById('can')
        if(canvas == null){
            return false;
        }
        var context = canvas.getContext('2d');
        var colors = ["red","orange","yellow","green","blue","navy","purple"];
        context.lineWidth = 10;
        context.transform(1,0,0,1,100,0)
        for(var i=0;i<colors.length;i++){
            context.transform(1,0,0,1,0,10);
            context.strokeStyle=colors[i];
            context.beginPath();
            context.arc(50,100,100,0,Math.PI,true);
            context.stroke();
        }
    }
    
    
    </script>
    
    </body>
    </html>
    复制代码

    使用setTransform方法:

    context.setTransform(m11, m12, m21, m22, dx, dy)

    绘制变形图形的示例:

    HTML 5 canvas strokeStyle 属性

    绘制一个矩形。请用蓝色的笔触颜色:

    学习总结之HTML5剑指前端[思维导图]

    strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式。

    JavaScript:

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.strokeStyle="#0000ff";
    ctx.strokeRect(20,20,150,100);
    复制代码

    绘制一个矩形。使用渐变笔触:

    学习总结之HTML5剑指前端[思维导图]

    JavaScript:

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    
    var gradient=ctx.createLinearGradient(0,0,170,0);
    gradient.addColorStop("0","magenta");
    gradient.addColorStop("0.5","blue");
    gradient.addColorStop("1.0","red");
    
    // 用渐变进行填充
    ctx.strokeStyle=gradient;
    ctx.lineWidth=5;
    ctx.strokeRect(20,20,150,100);
    复制代码

    HTML5 canvas strokeRect() 方法

    绘制 150*100 像素的矩形:

    学习总结之HTML5剑指前端[思维导图]

    JavaScript:

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.strokeRect(20,20,150,100);
    复制代码

    效果:

    学习总结之HTML5剑指前端[思维导图]

    代码:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset=utf-8>
        <meta name=description content="">
        <meta name=viewport content="width=device-width, initial-scale=1">
        <title>1</title>
    </head>
    <body>
    
    
    <button onclick="draw()">
        点击
    </button>
    
    <canvas id="can"> </canvas>
    
    <script>
    
    function draw(){
        var canvas = document.getElementById('can')
        if(canvas == null){
            return false;
        }
        var context = canvas.getContext('2d');
        context.strokeStyle = "red";
        context.strokeRect(30,10,60,20);
        var rad = 45*Math.PI/180;
        context.setTransform(Math.cos(rad),Math.sin(rad),-Math.sin(rad),Math.cos(rad),0,0);
        context.strokeStyle = "blue";
        context.strokeRect(30,10,60,20);
        context.setTransform(2.5,0,0,2.5,0,0);
        context.strokeStyle = "green";
        context.strokeRect(30,10,60,20);
        context.setTransform(1,0,0,1,40,80);
        context.strokeStyle = 'gray';
        context.strokeRect(30,10,60,20);
    }
    
    
    </script>
    
    </body>
    </html>
    复制代码

    在h5中,只要使用图形上下文对象的globalCompositeOperation属性就能决定图形的组合方式:

    context.globalCompositeOperation=type

    type的值:

    1. source-over默认值,表示新图形覆盖在原有的图形之上。
    2. destination-over,表示在原有图形之下绘制新图形。
    3. source-in新图形与原有图形作in运算,只显示新图形中与原有图形相重叠的部分,新图形与原有图形的其他部分均变成透明。
    4. destination-in,原有图形与新图形作in运算,只显示原有图形中与新图形重叠的部分,新图形与原有图形的其他部分均变成透明。
    5. source-out新图形与原有图形作out运算,只显示新图形中与原有图形不重叠的部分,新图形与原有图形的其他部分均变成透明。
    6. destination-out原有图形与新图形作out运算,只显示原有图形中与新图形不重叠的部分,新图形与原有图形的其他部分均变成透明。
    7. source-atop只绘制新图形中与原有图形重叠的部分与未重叠覆盖的原有图形,新图形的其他部分变成透明。
    8. destination-atop只绘制原有图形中被新图形重叠覆盖的部分与新图形的其他部分,原有图形中的其他部分变成透明,不绘制新图形中与原有图形相重叠的部分。
    9. lighter原有图形与新图形均绘制,重叠部分做加色处理。
    10. xor只绘制新图形中与原有图形不重叠的部分,重叠部分变成透明。
    11. copy只绘制新图形,原有图形中未与新图形重叠的部分变成透明。

    图形组合示例效果:

    学习总结之HTML5剑指前端[思维导图]

    代码:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset=utf-8>
        <meta name=description content="">
        <meta name=viewport content="width=device-width, initial-scale=1">
        <title>1</title>
    </head>
    <body>
    
    
    <button onclick="draw()">
        点击
    </button>
    
    <canvas id="can"> </canvas>
    
    <script>
    
    function draw(){
        var canvas = document.getElementById('can')
        if(canvas == null){
            return false;
        }
        var context = canvas.getContext('2d');
        var oprtns = new Array(
            "source-atop",
            "source-in",
            "source-out",
            "source-over",
            "destination-atop",
            "destination-in",
            "destination-out",
            "destination-over",
            "lighter",
            "copy",
            "xor"
        );
        i=8;
        context.fillStyle = "blue";
        context.fillRect(10,10,60,60);
        context.globalCompositeOperation = oprtns[i];
        context.beginPath();
        context.fillStyle = "red";
        context.arc(60,60,30,0,Math.PI*2,false);
        context.fill();
    }
    
    
    </script>
    
    </body>
    </html>
    复制代码

    给图形绘制阴影

    利用图形上下文对象的属性:

    1. shadowOffsetX-阴影的横向位移量
    2. shadowOffsetY-阴影的纵向位移量
    3. shadowColor阴影的颜色
    4. shadowBlur阴影的模糊范围

    绘制图像

    使用drawImage方法,绘制图像:

    • context.drawImage(image,x,y)
    • context.drawImage(image,x,y,w,h);
    • context.drawImage(image,sx,sy,sh,dx,dy,dw,dh)

    平铺效果

    createPattern方法:

    context.createPattern(image,type)

    参数描述
    image要平铺的图像
    type参数的值no-repeatrepeat-xrepeat-yrepeat
    1. no-repeat不平铺
    2. repeat-x橫方向平铺
    3. repeat-y纵方向平铺
    4. repeat全方向平铺

    像素处理

    使用图形上下文对象的getImageData方法来获取图像中的像素:

    var imagedata = context.getImageData(sx,sy,sw,sh)

    在HTML5中:绘制文字

    绘制文字

    使用fillText方法或者strokeText方法:

    fillText方法用来填充方式绘制字符串:

    void fillText(text,x,y,[maxWidth]);

    strokeText方法用轮廓方式绘制字符串:

    void stroke Text(text, x, y, [maxWidth]);

    使用measureText方法来得到文字的宽度:

    metrics = context.measureText(text)

    保存与恢复状态

    使用Canvas API中的saverestore两个方法。

    保存文件,在Canvas API中保存文件的原理实际上是把当前的绘画状态输出到一个data URL地址所指向的数据中的过程。为data URL,是目前大多数浏览器能够识别的一种base64位编码的URL

    主要用于小型的,可以在网页中嵌入的,不需要从外部文件嵌入的数据。

    使用toDataURL方法把绘画状态输出到一个data URL中,然后重新装载。

    toDataURL的使用方法:

    canvas.toDataURL(type)

    作者:魔王哪吒
    链接:https://juejin.im/post/5e5bc764518825494466ad66
    来源:掘金
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

    发表评论

    :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: