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 | |
四、拖放
1 | |