夜光带你走进前端工程师（十七）

夜光序言：

也许，有一天，她会忘记这伤痛。

也许，有一天，她会回来。

也许，有一天……

不会有这一天，我知道，永远也不会有这一天。

所以我告诉她，我不会等你。

我说，我不会等。

夜光带你走进前端工程师（十七）

正文：

figure元素

一个figure元素只允许一个figcaption元素

夜光带你走进前端工程师（十七）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<figure>
    <img src="新潮02.jpg" title="布料">
    <img src="新潮02.jpg" title="布料">
    <img src="新潮02.jpg" title="布料">
    <figcaption>布料</figcaption>
</figure>
</body>
</html>

//这三张图片都使用布料这个名字

details+summary元素

Detail:具有布尔类型的open元素，true展开显示

Summary:从属于detail

目前只有谷歌浏览器支持

夜光带你走进前端工程师（十七）

目前只有谷歌浏览器支持：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<details>
    <summary>
        光灵
    </summary>
    <P>
        创客学院首席CEO
    </P>
</details>
</body>
</html>

夜光带你走进前端工程师（十七）

mark元素

主要是为了吸引注意力

高亮度显示~~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h2>创客学院<mark>首席CEO</mark>光灵</h2>
<section>
    <article>
        <p>为了不断提升实力，成为<mark>特级程序员</mark></p>
    </article>
</section>
</body>
</html>

夜光带你走进前端工程师（十七）

meter元素

1:value

2:min:默认为0

3:max

4:low

5:high

6：optimum：必须在min和max之间，可以打鱼high属性值

canvas创建画布

1:创建一个canvas 画布

指定ID，width(画布宽度)，height（画布高度）

2: 引入脚本的方法：

引入一个名为canvas的js脚本，语言编码是utf-8

3:在body:使用οnlοad=”draw(`canvas`)”语句

进行图形绘画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="canvas.js"></script>
</head>
<body>     //不够完整还需要改一下，看下面
<canvas id="canvas" width="500" height="350"></canvas>
</body>
</html>

夜光带你走进前端工程师（十七）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="canvas.js"></script>
</head>
<body οnlοad="draw(`canvas`);">
<canvas id="canvas" width="500" height="350"></canvas>
</body>
</html>

//空白的图片。可以另存为

绘制一个矩形：

1：获取canvas元素

Getelementbyld方法获取到canvas对象

2:获取上下文

Canvas对象为context() 参数设置为2d

3：填充

Fill:将图形内部填满

Stroke:只是绘制图形的外框

4:设置绘制样式

Fillstyle

Strokestyle

5：指定画笔宽度

上下文对象（context）的linewidth属性设置图形边框的宽度，任何直线的宽度都可以通过linewidth来设置直线的宽度

6：设置颜色值

7：绘制矩形

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

Context.stokerect(x,y,width.height)

(x:矩形的起点横坐标

,y矩形的纵坐标

坐标的要点：画布最左上角

,width矩形长度

Height矩形高度

)

创客学院：光灵-夜光

夜光带你走进 前端工程师（十七）

夜光序言：

也许，有一天，她会忘记这伤痛。

也许，有一天，她会回来。

也许，有一天……

不会有这一天，我知道，永远也不会有这一天。

所以我告诉她，我不会等你。

我说，我不会等。

正文：

相关推荐

夜光带你走进前端工程师（十七）