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

最新推荐文章于 2019-06-01 18:15:57 发布

GeniusTeam-夜光

最新推荐文章于 2019-06-01 18:15:57 发布

阅读量210

点赞数

分类专栏： My thoughts 前端工程师

本文链接：https://blog.csdn.net/weixin_41987706/article/details/90676196

版权

My thoughts 同时被 2 个专栏收录

911 篇文章 25 订阅

订阅专栏

前端工程师

48 篇文章 0 订阅

订阅专栏

夜光序言：

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

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

也许，有一天……

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

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

我说，我不会等。

正文：

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矩形高度

)

创客学院：光灵-夜光

GeniusTeam-夜光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
夜光带你走进前端工程师（十七）

夜光序言：也许，有一天，她会忘记这伤痛。也许，有一天，她会回来。也许，有一天…… 不会有这一天，我知道，永远也不会有这一天。所以我告诉她，我不会等你。我说，我不会等。正文：figure元素一个figure元素只允许一个figcaption元素<!D...
复制链接

扫一扫