6.2 HTML5笔记

最新推荐文章于 2024-07-09 22:45:00 发布

Shelysure

最新推荐文章于 2024-07-09 22:45:00 发布

阅读量164

点赞数

文章标签： html js

本文链接：https://blog.csdn.net/Shelysure/article/details/106504203

版权

1.dl

dl 标签定义了定义列表

dl 标签用于结合 dt （定义列表中的项目）和 dd （描述列表中的项目）。

<dl>
   <dt>计算机</dt>
   <dd>用来计算的仪器 ... ...</dd>
   <dt>显示器</dt>
   <dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>

2.canvas

canvas 标签定义图形，比如图表和其他图像。

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


简单的长方形

<!DOCTYPE HTML>
<html>
<body>

<canvas id="myCanvas">your browser does not support the canvas tag </canvas>

<script type="text/javascript">

var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);

</script>

</body>
</html>

创建 Canvas 元素
需要向 HTML5 页面添加 canvas 元素。

规定元素的 id、宽度和高度：

<body onload="draw('canvas')">

    <canvas id="canvas" width="400" height="300"></canvas>
</body>
</html>

而图形通过 JavaScript 来绘制

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

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>
JavaScript 使用 id 来寻找 canvas 元素：

var c=document.getElementById("myCanvas");
然后，创建 context 对象：d'l

var cxt=c.getContext("2d");

getContext(“2d”) 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

下面的两行代码绘制一个红色的矩形：

cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。

实例 1- 线条

通过指定从何处开始，在何处结束，来绘制一条线：

Canvas 实例：线条
在这里插入图片描述
JavaScript 代码：

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();

</script>
canvas 元素：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

实例2 - 圆形

通过规定尺寸、颜色和位置，来绘制一个圆：

Canvas 实例：圆形
JavaScript 代码：

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();

</script>
canvas 元素：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

在这里插入图片描述

实例3 - 渐变

使用您指定的颜色来绘制渐变背景：

Canvas 实例：渐变
在这里插入图片描述

JavaScript 代码：

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var grd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);

</script>
canvas 元素：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

实例4 - 图像

把一幅图像放置到画布上：

Canvas 实例：图像

在这里插入图片描述
JavaScript 代码：

<script type="text/javascript">

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
var img=new Image()
img.src="flower.png"
cxt.drawImage(img,0,0);

</script>
canvas 元素：

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>

Drawing text

A fillText example

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  ctx.font = '48px serif';
  ctx.fillText('Hello world', 10, 50);
}

在这里插入图片描述

A strokeText example

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');
  ctx.font = '48px serif';
  ctx.strokeText('Hello world', 10, 50);
}

在这里插入图片描述

A textBaseline example

ctx.font = '48px serif';
ctx.textBaseline = 'hanging';
ctx.strokeText('Hello world', 0, 100);

在这里插入图片描述

textalign

在这里插入图片描述

Shelysure

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
6.2 HTML5笔记

1.dldl 标签定义了定义列表dl 标签用于结合 dt （定义列表中的项目）和 dd （描述列表中的项目）。<dl> <dt>计算机</dt> <dd>用来计算的仪器 ... ...</dd> <dt>显示器</dt> <dd>以视觉方式显示信息的装置 ... ...</dd></dl>2.canvascanvas 标签定义图形，比如图表和
复制链接

扫一扫