【HTML5】记录一下学习HTML5的一些新元素------（1）

最新推荐文章于 2024-09-13 11:02:21 发布

菜鸟M

最新推荐文章于 2024-09-13 11:02:21 发布

阅读量802

点赞数

分类专栏： # html 文章标签： html5

本文链接：https://blog.csdn.net/weixin_43592907/article/details/108869626

版权

html 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、Canvas

（canvas 解决了与静态图片交互的问题，可以动态创建和操作图形图像） —这句话目前还不明白什么意思，放在这里
<canvas> 标签只是图形容器，本身没有绘图能力，必须使用脚本来绘制图形。

默认情况下元素没有边框和内容。
一个画布 Canvas 在网页中是一个矩形框，通过 <canvas> 元素来绘制.
标签通常需要指定一个id属性 (脚本中经常引用)，width 和 height 属性定义的画布的大小。
canvas 标签中的属性节点 width 默认为300px ，height 默认为150px；
如果CSS的尺寸与初始画布的比例不一致，它会出现扭曲。（我测试了一下，没有发生扭曲，现在不太明白是如何扭曲的）
在支持 canvas的浏览器中， canvas标签节点内的内容都不会显示出来
【一定要把样式放在图像绘制之前定义！！！】

1、使用JS 来绘制图像：

getContext("2d")：内建的 HTML5 对象，这个方法是用来获得渲染上下文和它的绘画功能。
fillStyle=“”：填充矩形的样式。默认设置是黑色；【是属性，不是方法(函数)！！】
fillRect(x,y,width,height)：填充矩形的大小和方式；从（x，y）开始，绘制 width* height 大小的矩形；默认黑色【是方法（属性）】

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

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
</script>

在这里插入图片描述

2、Canvas - 坐标

canvas 是一个二维网格。
canvas 的左上角坐标为 (0,0)
上面的 fillRect 方法拥有参数 (0,0,150,75)。
意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。

3、Canvas - 路径

在Canvas 上画线需要用到：
moveTo(x,y) ：将笔触移动到指定的坐标x以及y上。【方法】
lineTo(x,y) ：定义线条结束坐标【方法（函数）】
rect(x,y,width,height)：绘制矩形，这种矩形涵盖了strokeRect 和 fillRect；
-直接创建的rect 既可以通过stroke() 来画出矩形框（边框），用strokeStyle来绘制边框颜色
-也可以通过fill() 来填充创建的矩形，用fillStyle 来填充样式；
stroke() ：绘制出 moveTo() 到 lineTo() 方法之间的路径。默认颜色是黑色。相当于墨水【无参方法】
strokeStyle=“”：设置或返回用于笔触的颜色、渐变或模式。【是属性】
strokeRect(x,y, width,height)：方法绘制矩形（无填充）。笔触的默认颜色是黑色。【方法】
clearRect() ：方法清空给定矩形内的指定像素（不论线条还是填充）【在clearRect之后画的图不会被清除】。
lineWidth=5：设置笔触的宽度；【属性】
beginPath()：开始一条路径，或重置当前的路径。就比如在画完一条路径，需要再另外画一条样式不一样的路径时，就需要用到；如果不用，新路径的样式就会覆盖掉旧路径的样式。

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>

var c = document.getElementById("mycanvas");
			var ctx = c.getContext("2d");
			//红色的两条线
			ctx.beginPath();
			ctx.moveTo(0,0);    		1号线
			ctx.strokeStyle = "red";
			ctx.lineTo(23,37);
			ctx.lineTo(2,105);
			//另起一条线
			ctx.moveTo(125,130);		2号线
			ctx.lineTo(65,96);
			ctx.stroke();
			
			//蓝色粗线
			ctx.strokeStyle = "blue";
			ctx.lineWidth = 5;
			ctx.beginPath();   		
			ctx.moveTo(32,40);			3号线
			ctx.lineTo(45,49);
			ctx.stroke();

在这里插入图片描述

======================================
但是：如何我把蓝色粗线的 beginPath（）去掉，那么三条线的样式会一样！！！

在这里插入图片描述

============================

-3.1、strokeRect(x,y, width,height) 用法：

绘制矩形（无填充），从（x,y）开始绘制一个width*height的空心矩形
（如果在 strokeRect之后，设置矩形框的样式，是不会有任何变化的）
（一定要在strokeRect之前设置矩形的样式；fillStyle也是一样；尽可能把样式都放在画之前；）
如下实例：

<canvas id="mycanvas_101" width="" height="" style="border: 1px  solid ">
			您的浏览器不支持canvas
		</canvas>
		<script>
			var c = document.getElementById("mycanvas_101");
			ctx = c.getContext("2d");
			ctx.strokeRect(20,20,50,82);
			ctx.strokeStyle = "red";   strokeStye在后面，是不会改变矩形的样式
</script>

可以看到矩形的样式没有发生变化！！！！！！！！！！！！！
在这里插入图片描述
把ctx.strokeStyle 移到ctx.strokeRect之前，矩形的样式才会发生变化！！

-3.2、clearRect（）用法：

我把canvas的背景颜色换成黑色了，这样容易看清；
可以看到在clearRect之后画的图不会被清除掉；

 <canvas id="mycanvas_101" width="" height="" style="border: 1px  solid; background-color: #000000;">
			您的浏览器不支持canvas
		</canvas>
		<script>
			var c = document.getElementById("mycanvas_101");
			ctx = c.getContext("2d");
			ctx.strokeStyle = "red";
			ctx.strokeRect(20,20,50,82);
			
		
			ctx.fillStyle = "yellow";
			ctx.fillRect(45,56,70,70);
			ctx.clearRect(45,45,30,30);
			
			ctx.rect(32,32,30,30);
			ctx.strokeStyle = "aqua"
			ctx.stroke();
		</script>

在这里插入图片描述

-3.3、在canvas中绘制圆形需要用到：

arc() 方法创建弧/曲线（用于创建圆或部分圆）。
arc(x,y,r,start,stop，counterclockwise)：（x，y）是圆心；r：半径；start：起始角；stop：结束角；counterclockwise：可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。【默认顺时针】
通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为 2*Math.PI。
创建的arc 需要用stroke() 或 fill() 来绘制（填充）；

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI,false);	//顺时针
ctx.stroke();

在这里插入图片描述

在我们画圆时，会发现路径会连在一起。如下：

 <canvas id="mycanvas_102" width="300px" height="150px" style="border: #99CCCC solid 0.125rem;">
			您的浏览器不支持canvas
		</canvas>
		<script>
			var c = document.getElementById("mycanvas_102");
			var ctx = c.getContext("2d");
			ctx.beginPath();
			//大圆
			ctx.arc(150,75,70,0,2*Math.PI,true);  //逆时针
			ctx.stroke();
			//小圆
			ctx.arc(150,75,30,0,2*Math.PI,false); //顺时针
			ctx.stroke();
			ctx.arc(40,40,30,0,2*Math.PI);
			ctx.stroke();
			ctx.arc(250,40,30,0,2*Math.PI);
			ctx.stroke();

可以看到，路径始终连在一起！！！

在这里插入图片描述

有两种解决方法：
-1）利用beginPath（），当需要另起一个图形时调用，如下所示：

 var ctx = c.getContext("2d");
				ctx.beginPath();
			    ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // 绘制
				ctx.stroke();
		
				ctx.beginPath();
			    ctx.arc(75, 75, 35, 0, Math.PI, false);   // 口(顺时针)
			    ctx.stroke();
	
				ctx.beginPath();
			    ctx.arc(60, 65, 5, 0, Math.PI * 2, true);  // 左眼
			    ctx.stroke();
	
				ctx.beginPath();
			    ctx.arc(90, 65, 5, 0, Math.PI * 2, true);  // 右眼
			    ctx.stroke();

在这里插入图片描述

-2）利用moveTo（），将笔触移动到指定的坐标上，如下所示：
【就相当于把当前钢笔移动到另一个图形的路径上，就不会出现连续】

var ctx = c.getContext("2d");
			ctx.beginPath();
			    ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // 绘制
			    ctx.moveTo(110, 75);   //把当前笔触移动到下一个圆的路径中
			
			    ctx.arc(75, 75, 35, 0, Math.PI, false);   // 口(顺时针)
				ctx.moveTo(65, 65);
				
			    ctx.arc(60, 65, 5, 0, Math.PI * 2, true);  // 左眼
				ctx.moveTo(95, 65);
				
			    ctx.arc(90, 65, 5, 0, Math.PI * 2, true);  // 右眼
			    ctx.stroke();

在这里插入图片描述

4、Canvas - 文本

使用 canvas 绘制文本：
font=“” ：定义字体样式和大小，与css中的font一样【是属性】【注意：！如果只设置font 的大小，则文本内容不发生任何变化，这个我试了一下，需要在设定字体的基础上才能更改大小】
fillText(text,x,y) ：在 canvas 上绘制实心的文本（相当于填充）；text：填充的文本内容；（x，y）：文本在画布中开始的位置；fillStyle更改其样式【方法】
strokeText(text,x,y) ：在canvas 上绘制空心的文本（相当于用笔触画的）；strokeStyle更改其样式【方法】

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。</canvas>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="20px Arial";
ctx.fillText("Hello World",10,50);

//空心的文本内容
ctx.strokeText("Hello World",10,50);

在这里插入图片描述

5、Canvas - 渐变

渐变可以填充在矩形, 圆形, 线条, 文本等等，有两种不同的方式来设置Canvas渐变：
createLinearGradient(x0,y0,x1,y1) ：创建线条渐变【方法】
createRadialGradient(x0,y0,r0,x1,y1,r1) ：创建一个放射状 / 圆形渐变对象【方法】
当我们使用渐变对象，必须使用两种或两种以上的停止颜色：
addColorStop(stop，color)： stop：0.0~ 1.0之间；渐变结束的位置。color：颜色值【方法】

createLinearGradient(x0,y0,x1,y1)、线条渐变

x0 渐变开始点的 x 坐标
y0 渐变开始点的 y 坐标
x1 渐变结束点的 x 坐标
y1 渐变结束点的 y 坐标
！！！使用该对象作为 strokeStyle 或 fillStyle 属性的值。
！！！使用 addColorStop() 方法规定不同的颜色，以及在 gradient 对象中的何处定位颜色
例子：createLinearGradient(0, 0, 0, 150)：指的是发送在垂直方向的渐变
例子：createLinearGradient(0, 0, 20, 0)：发送在水平方向的渐变
（要注意渐变的范围和填充的矩形的范围，超过渐变部分的矩形是不发生渐变的）

 <canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your </canvas>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createLinearGradient(0,0,150,0);  //水平方向的渐变
grd.addColorStop(0,"black");
grd.addColorStop(0.4,"yellow");
grd.addColorStop(0.8,"blue");
grd.addColorStop(1,"red");

// Fill with gradient
ctx.fillStyle=grd;		//或 strokeStyle的属性
ctx.fillRect(0,0,150,100);

在这里插入图片描述

createRadialGradient(x0,y0,r0,x1,y1,r1)、放射状/圆形渐变对象

x0 渐变的开始圆的 x 坐标
y0 渐变的开始圆的 y 坐标
r0 开始圆的半径
x1 渐变的结束圆的 x 坐标
y1 渐变的结束圆的 y 坐标
r1 结束圆的半径
！！这里说明一下：不太理解这个渐变（简单画了个图），查了一下没有介绍很详细的，望告知，感谢！！！！

<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">
Your </canvas>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var grd=ctx.createRadialGradient(150,150,50,150,150,120);	//放射状 / 圆形渐变
grd.addColorStop(0,"red");
grd.addColorStop(0.4,"yellow");
grd.addColorStop(1,"black");
ctx.fillStyle=grd;
ctx.fillRect(0,0,300,300);

在这里插入图片描述

6、Canvas - 图像

drawImage() 方法在画布上绘制图像、画布或视频。
-也能够绘制图像的某些部分，以及/或者增加或减少图像的尺寸。
如果是通过createElement 创建的img 元素节点，要注意该结点的位置！
在原始的img 图像中，就算你改变了图像的大小；当你通过drawImage 绘制的时候，在画布中显示的仍然是原始大小的图像【如下 4）所示：】

1）.drawImage(img, sx, sy, swidth, sheight, x, y, width, height);

1）context.drawImage(img, x, y)：在画布上的（x，y）位置处开始放置图像；
》
2）context.drawImage(img, x, y, width, height)：在画布上定位图像，并规定放置在画布上的图像的宽度和高度（只是改变大小，不剪切）；
3）context.drawImage(img, sx, sy, swidth, sheight, x, y, width, height)：剪切图像，并在画布上定位（放置）被剪切的部分；

img 规定要使用的图像、画布或视频。
sx 可选。开始剪切的 x 坐标位置。
sy 可选。开始剪切的 y 坐标位置。
swidth 可选。被剪切图像的宽度。
sheight 可选。被剪切图像的高度。
x 在画布上放置图像的 x 坐标位置。
y 在画布上放置图像的 y 坐标位置。
width 可选。要使用的图像的宽度（伸展或缩小图像）。
height 可选。要使用的图像的高度（伸展或缩小图像）。

2）ctx.drawImage(img, x, y, width, height)

<p>要使用的图片:</p>
<img id="scream" src="img_the_scream.jpg">
<p>画布:</p>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>

<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img_id=document.getElementById("scream");   //获取图像的id
img_id.onload = function()						//当图像加载时就把图像画在画布上
{
    ctx.drawImage(img_id,10,10,150,180);	//从（10,10）开始定位；图像的大小为150*180
}
</script>

原始图像：

画布上的：
在这里插入图片描述

3）ctx.drawImage(img, sx, sy, swidth, sheight, x, y, width, height)

<p>图片应用:</p>
<img id="scream" src="img_the_scream.jpg">
<p>画布:</p>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>

document.getElementById("scream").onload=function()   //图像加载时就开始执行：
{
	var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    var img_id=document.getElementById("scream");
    ctx.drawImage(img_id,90,130,50,60,10,10,50,60);	  //把剪切后的图像定位在画布上
};

剪切后的图像：
在这里插入图片描述

4）当你drawImage() 之前，对原始图像大小做了改变，但当你绘制时，图像仍为原始尺寸：

<canvas width="300" height="300" style="border:solid brown;">您的浏览器不支持该操作 </canvas>
		
		<!-- <img src="../images/come.jpg"  width="200" height="200"/> -->
		<script>
			// var c = document.getElementsByTagName("canvas");
			var c = document.getElementsByTagName("canvas");
			var img_tag  = document.createElement("img");
			img_tag.setAttribute("src","../images/come.jpg");
			img_tag.setAttribute("width","200");  	//这里对img中图片大小作了改变
			img_tag.setAttribute("height","200");
			c[0].parentNode.insertBefore(img_tag,c[0]);
			
			var ctx = c[0].getContext("2d");
			img_tag.onload = function(){
				ctx.drawImage(img_tag,0,0);
			}	 
</script>