前端学习笔记一：html（8）html5前瞻+canvas画布

本文链接：https://blog.csdn.net/Reiuji_Utsuho/article/details/107390025

HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。HTML5的设计目的是为了在移动设备上支持多媒体。HTML5 中的一些新特性：用于绘画的 canvas 元素用于媒介回放的 video 和 audio 元素对本地离线存储的更好的支持新的特殊内容元素，比如 article、footer、header、nav、section新的表单控件，比如 calendar、date、time、email、url、search然后就是HTML5的新内容讲解，这次讲的是

摘要由CSDN通过智能技术生成

HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。
HTML5的设计目的是为了在移动设备上支持多媒体。

HTML5 中的一些新特性：

用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search

然后就是HTML5的新内容讲解，这次讲的是canvas画布：
依照HTML笔记的管理还是先上代码，同时为了排版分成了两部分：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>canvas画布</title>
	</head>
	<style type="text/css">
		#myCanvas{
			border: #000000 solid 2px ;
		}
	</style>
	<body>
		<canvas id="myCanvas" width="800px" height="900px" >这个落后的浏览器不能</canvas>
		
		<script type="text/javascript">
			var c = document.getElementById("myCanvas"); // 获取画布元素
			var ctx = c.getContext("2d");				// 创建context对象
			// getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法
			ctx.fillStyle = "#00BFFF";				// 设置填充颜色，
			ctx.fillRect(200, 61.25, 200, 200);		// 建立一个填充的矩形
			// 参数依次为原点（矩形左上角）x坐标，y坐标，宽，高
			ctx.strokeStyle = "#47ba98";			// 设置描边颜色
			ctx.strokeRect(500, 111.25, 100, 100);	// 建立一个未填充的矩形
			/* 
				在canvas标签里默认形状只有矩形，若是要画出一个线条或者任意其它图形，则需要使用“路径”元素：
				路径是图形的基本元素。路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。
				一个路径，甚至一个子路径，都是闭合的。
				使用路径绘制图形需要一些额外的步骤：
				创建路径起始点
				调用绘制方法去绘制出路径
				把路径封闭
				一旦路径生成，通过描边或填充路径区域来渲染图形。
			*/
			ctx.strokeStyle = "#4169E1";	
			ctx.beginPath();	// 新建路径
			ctx.moveTo(280, 700);			// 把画笔移动到指定的坐标(x, y)。相当于设置路径的起始点坐标。
			ctx.lineTo(700, 320);			// 绘制一条直线
			ctx.closePath();				// 闭合路径之后，图形绘制命令又重新指向到上下文中
			ctx.stroke();					// 通过线条通过的路径来绘制图形轮廓
			ctx.strokeStyle = "#008000";	
			ctx.beginPath();						
			ctx.arc(400, 500, 150, 0, 2*Math.PI);	// 绘制圆弧，参数分别为圆心的x，y坐标，半径，开始弧度，结束弧度
			ctx.closePath();
			ctx.stroke();							
			ctx.fillStyle = "#2D9CE1";				
			ctx.strokeStyle = "#8DE34B";
			// 要绘制文字或者文本时，要使用到其它的属性和方法：
			ctx.font = "40px Arial"		// 定义一个字体，属性为大小和样式
			ctx.fillText("你好h5！", 50, 350, 300);	// 在 canvas 上绘制实心的文本
			ctx.strokeText("你好h5！", 50, 400, 300);// 在 canvas 上绘制空心的文本
			
		   
		</script>
	</body>
</html>

运行结果：
在这里插入图片描述

第二部分：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
	</head>
	<body>
		<canvas id="myCanvas" width="800" height="900"">这个老掉牙的浏览器不支持canvas</canvas>
		<img src="../../img/img_the_scream.jpg" id="scream" >
		<script>
			/* Canvas - 渐变
				渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。
				以下有两种不同的方式来设置Canvas渐变：
				createLinearGradient(x,y,x1,y1) - 创建线条渐变
				createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
			*/
		   // 以下演示用线性渐变来填充矩形
			var c = document.getElementById("myCanvas");
			var ctx = c.getContext("2d");
			
			// 创建渐变
			var grd = ctx.createLinearGradient(100,100,300,300); // 创建线性渐变
			//参数依次为起点和终点的(x, y)坐标
			grd.addColorStop(1,"crimson"); // 设置渲染，参数分别为：范围为0~1的渲染中心位置、颜色
			grd.addColorStop(0.5, "skyblue")
			grd.addColorStop(0,"white");
			
			// 填充渐变
			ctx.fillStyle = grd;			// 填充样式为渐变
			ctx.fillRect(100,100,200,200);
		
			// 以下演示径向/圆渐变来填充
			var ctx1 = c.getContext("2d");
			
			var grd = ctx.createRadialGradient(300, 600, 150, 300, 600, 5); // 创建径向/圆渐变
			// 参数依次为两个圆的圆心坐标及半径
			grd.addColorStop(0, "aliceblue");
			grd.addColorStop(0.5, "aqua")
			grd.addColorStop(1, "orange");
			
			ctx1.fillStyle = grd;
			ctx1.fillRect(150, 450, 300, 300);
			
			// 甚至还可以在画布里放图片
			var ctx2 = c.getContext("2d");
			var img = document.getElementById("scream");
			
			img.onload = function(){
				ctx2.drawImage(img, 400, 150);
			}
		</script>
	</body>
</html>