HTML5（2）

最新推荐文章于 2023-02-05 23:48:33 发布

晚风yY

最新推荐文章于 2023-02-05 23:48:33 发布

阅读量149

点赞数

分类专栏： HTML5

本文链接：https://blog.csdn.net/m0_55689351/article/details/115663380

版权

HTML5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

canvas元素

HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.

<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。

你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。

一个画布在网页中是一个矩形框，通过 <canvas> 元素来绘制.

注意: 默认情况下 <canvas> 元素没有边框和内容。 <canvas id=“canvas" width="200" height="100" style="border:1px solid #000000;"></canvas>

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成

矩形：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="canvas" width="500px" height="500px" style="border: 1px solid #333;"></canvas>
</body>
<script>
    // 获取canvas的dom对象
    var canvas = document.getElementById('canvas')
    // 获取canvas的上下文对象
    var ctx = canvas.getContext('2d')
    // 画笔的样式
    ctx.fillStyle = '#ff0000'
    // 开始绘制 参数一:水平方向的起点，垂直方向的起点，水平方向的终点，垂直方向的终点
    ctx.fillRect(0,0,200,100)
</script>
</html>

画线：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="canvas" width="500px" height="500px" style="border: 1px solid #333;"></canvas>
</body>
<script>
    // 获取canvas的dom对象
    var canvas = document.getElementById('canvas')
    // 获取canvas的上下文对象
    var ctx = canvas.getContext('2d')
    // 画笔的样式
    ctx.fillStyle = '#ff0000'
    // 起始位置
    ctx.moveTo(50,50)
    // 终点位置
    ctx.lineTo(200,100)
    // 开始绘制
    ctx.stroke()
</script>
</html>

画圆：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="canvas" width="500px" height="500px" style="border: 1px solid #333;"></canvas>
</body>
<script>
    // 获取canvas的dom对象
    var canvas = document.getElementById('canvas')
    // 获取canvas的上下文对象
    var ctx = canvas.getContext('2d')
    // 画笔的样式
    ctx.fillStyle = '#ff0000'
    // 标志是圆的方式进行绘制
    ctx.beginPath()
    // ctx.arc(x，y,半径，起点角度，终点角度，[时针])
    ctx.arc(50,50,40,0,1.5*Math.PI)
    // 开始绘制
    ctx.stroke();
</script>
</html>

文本：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="canvas" width="500px" height="500px" style="border: 1px solid #333;"></canvas>
</body>
<script>
    // 获取canvas的dom对象
    var canvas = document.getElementById('canvas')
    // 获取canvas的上下文对象
    var ctx = canvas.getContext('2d')
    // 字体样式
    ctx.font = "30px Arial"
    //  绘制实心文字
    ctx.fillText("Hello Word", 30, 50)
    ctx.strokeText("Hello Word", 80, 100)
</script>

</html>

线性渐变：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="canvas" width="500px" height="500px" style="border: 1px solid #333;"></canvas>
</body>
<script>
    // 获取canvas的dom对象
    var canvas = document.getElementById('canvas')
    // 获取canvas的上下文对象
    var ctx = canvas.getContext('2d')
    // 创建渐变 线性渐变
    var grd=ctx.createLinearGradient(0,0,200,0); 
    grd.addColorStop(0,'red')
    grd.addColorStop(0.5,'white')
    grd.addColorStop(0.8,'#0883D8')
    grd.addColorStop(1,'#43D4A7')
    ctx.fillStyle = grd
    ctx.fillRect(0,0,200,100)

</script>

</html>

径向渐变：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas id="canvas" width="500px" height="500px" style="border: 1px solid #333;"></canvas>
</body>
<script>
    // 获取canvas的dom对象
    var canvas = document.getElementById('canvas')
    // 获取canvas的上下文对象
    var ctx = canvas.getContext('2d')
    // 创建渐变 径向渐变
    // x1, y1, r1, x2, y2, r2
    var grd=ctx.createRadialGradient(75,50,5,90,60,100); 
    grd.addColorStop(0,'red')
    grd.addColorStop(0.5,'white')
    grd.addColorStop(0.8,'#0883D8')
    grd.addColorStop(1,'#43D4A7')
    ctx.fillStyle = grd
    ctx.fillRect(0,0,200,150)
</script>

</html>

图片：


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <img id="scream" src="./img/img_pulpit.jpg" alt="The Scream" width="220" height="277">
    <canvas id="canvas" width="500px" height="500px" style="border: 1px solid #333;"></canvas>
</body>
<script>
    // 获取canvas的dom对象
    var canvas = document.getElementById('canvas')
    // 获取canvas的上下文对象
    var ctx = canvas.getContext('2d')
    var img = document.getElementById('scream')
    img.onload = function () {
        ctx.drawImage(img, 10, 10);
    }
</script>

</html>

HTML5的代码规范：

使用正确的文档类型

文档类型声明位于HTML文档的第一行（如果你想跟其他标签一样使用小写，可以使用小写）

使用小写元素名

HTML5 元素名可以使用大写和小写字母。

推荐使用小写字母：

混合了大小写的风格是非常糟糕的。

开发人员通常使用小写 (类似 XHTML)。

小写风格看起来更加清爽。

小写字母容易编写。

关闭所有 HTML 元素

在 HTML5 中, 你不一定要关闭所有元素 (例如 <p> 元素)，但我们建议每个元素都要添加关闭标签。

关闭空的 HTML 元素

在 HTML5 中, 空的 HTML 元素也不一定要关闭

在 XHTML 和 XML 中斜线 (/) 是必须的。

如果你期望 XML 软件使用你的页面，使用这种风格是非常好的。

使用小写属性名

HTML5 属性名允许使用大写和小写字母。

同时使用大小写是非常不好的习惯。

属性值

HTML5 属性值可以不用引号。

属性值我们推荐使用引号:

如果属性值含有空格需要使用引号。

混合风格不推荐的，建议统一风格。

属性值使用引号易于阅读。

图片属性

图片通常使用 alt 属性。在图片不能显示时，它能替代图片显示。

定义好图片的尺寸，在加载时可以预留指定空间，减少闪烁。

空格和等号

等号前后可以使用空格。

但我们推荐少用空格:

避免一行代码过长

空行和缩进

不要无缘无故添加空行。

为每个逻辑功能块添加空行，这样更易于阅读。

缩进使用两个空格，不建议使用 TAB。

比较短的代码间不要使用不必要的空行和缩进。

HTML 注释

注释可以写在  中

比较长的注释可以在  中分行写

长注释第一个字符缩进两个空格，更易于阅读。

样式表

样式表使用简洁的语法格式 ( type 属性不是必须的)

短的样式可以写成一行，长的样式可以写成多行:

将左花括号与选择器放在同一行。

左花括号与选择器间添加一个空格。

使用两个空格来缩进。

冒号与属性值之间添加一个空格。

逗号和符号之后使用一个空格。

每个属性与值结尾都要使用分号。

只有属性值包含空格时才使用引号。

右花括号放在新的一行。

每行最多 80 个字符。

在 HTML 中载入 JavaScript

使用简洁的语法来载入外部的脚本文件 ( type 属性不是必须的 ):

.htm 和 .html 的区别

.htm 和 .html 的扩展名文件本质上是没有区别的。浏览器和 Web 服务器都会把它们当作 HTML 文件来处理。

区别在于：

.htm 应用在早期 DOS 系统，后缀名只能有三个字符。

在 Unix 系统中后缀没有特别限制，一般用 .html。

晚风yY

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5（2）

canvas元素HTML5 <canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。一个画布在网页中是一个矩形框，通过 <canvas> 元素来绘制.注意: 默认情况下 <canvas> 元素没有边框和内容。 <canvas id=“canvas" wid...
复制链接

扫一扫