html-02

2019-08-08-HTML2

简单介绍 HTML5

结构

新元素

一、Canvas

<canvas> 元素用于图形的绘制, <canvas> 标签只是图形容器, 通过脚本 (通常是JavaScript)来完成

如下是一些例子:

1.绘制矩形

1
2
3
4
5
6
7
8
<canvas id="canvas" width="200" height="100" style="border: 1px solid #c3c3c3;">您的浏览器不支持 HTML5 canvas 标签。</canvas>

<script>
   var c=document.getElemnetById("canvas");  //找到 <canvas>
   var ctx=c.getContent("2d"); // 创建 context 对象
   ctx.fillStyle="#FF0000"; 
   ctx.fillRect(0,0,150,75); // fillRect(x,y,width,height) 
</script>

2.绘制路径 

1
2
3
4
5
6
7
<script>
   var c=document.getElementById("canvas");
   var ctx=c.getContext("2d");
   ctx.moveTo(0,0); // moveTo(x,y) 定义线条开始坐标
   ctx.lineTo(200,100); // lineTo(x,y) 定义线条结束坐标
   ctx.stroke(); // stroke() 方法来绘制线条
</script>

3.绘制圆形 

1
2
3
4
5
6
7
<script>
   var c=document.getElementById("canvas");
   var ctx=c.getContext("2d");
   ctx.beginPath();
   ctx.arc(95,50,40,0,2*Math.PI); // arc(x,y,r,start,stop)
   ctx.stroke();
</script>

4.渲染文本 

1
2
3
4
5
6
<script>
   var c=document.getElementById("canvas");
   var ctx=c.getContext("2d");
   ctx.font="30px Arial";
   ctx.fillText("Hello World",10,50); // 实心 fillText(text,x,y)方法, 空心 storkeText()方法
</script>

5.渐变 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
   var c=document.getElementById("canvas");
   var ctx=c.getContext("2d");
 
   // createLinearGradient(x,y,x1,y1) - 创建线条渐变
   // createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
   var grd=ctx.createLinearGradient(0,0,200,0);
   grd.addColorStop(0,"red");
   grd.addColorStop(1,"white");
 
   // 填充渐变
   ctx.fillStyle=grd;
   ctx.fillRect(10,10,150,80);
</script>

6.渲染图像 

1
2
3
4
5
6
<script>
   var c=document.getElementById("canvas");
   var ctx=c.getContext("2d");
   var img=document.getElementById("scream");
   ctx.drawImage(img,10,10);
</script>

二、SVG

SVG 指可伸缩矢量图形 (Scalable Vector Graphics), 用于定义用于网络的基于矢量的图形, 使用 XML 格式定义图形, SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失

五角星 

1
2
3
4
<svg xmlns="http://www.w3.org/2000/svg" width="190" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime; stroke:purple; stroke-width:5; fill-rule:evenodd;">
</svg>

三、Video 与 Audio

1
2
3
4
5
6
7
8
9
10
11
<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持 HTML5 video 标签。
</video>

<audio controls="controls">
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>

四、拖放

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
   #box{ width:100px; height:100px; border:1px solid #000;}
</style>
<script>
   function allowDrop(ev){
      ev.preventDefault();
   }
   // 拖动
   function drag(ev){
      ev.dataTransfer.setData("Text", ev.target.id);
   }
   // 放置
   function drop(ev){
      ev.preventDefault();
      var data = ev.dataTransfer.getData("Text");
      ev.target.appendChild(document.getElementById(data));
   }
</script>
<body>
   <div id="box" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
   <img id="drag" src="images/1.png" draggable="true ondragstart=" drag(event)"/>
</body>

待续…

HTML
#HTML #Web
html-02
https://anyu967.github.io/posts/82d0dbac.html
作者
anyu967
发布于
2019年8月8日
许可协议