2021.5.13 HTML5学习第三天-CSDN博客

本文链接：https://blog.csdn.net/JINGMaNong/article/details/116765802

HTML5 Canvas

1、什么是 canvas?

<canvas> 标签定义图形，比如图表和其他图像，您必须使用javascript脚本来绘制图形。
在画布上（Canvas）画一个红色矩形，渐变矩形，彩色矩形，和一些彩色的文字。

HTML5 <canvas>元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.

<canvas>标签只是图形容器，您必须使用脚本来绘制图形。
你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。

就是一块画布，可以通过javascript脚本语言在这一块画布上绘制出自己想要的图形。

2.创建一个画布（Canvas）

一个画布在网页中是一个矩形框，通过 <canvas>元素来绘制.
注意: 默认情况下<canvas> 元素没有边框和内容。

<canvas>简单实例如下:
<canvas id="myCanvas" width="200" height="100"></canvas>

注意: 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小.

提示:你可以在HTML页面中使用多个 <canvas>元素.
可以使用 style 属性来添加边框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>创建一个画布（Canvas）</title>
		<style>
			#mycanvas{
				width: 300px;
				height: 300px;
				border: 2px solid black;
			}
		</style>
	</head>
	<body>
		<canvas id="mycanvas"></canvas>
	</body>
</html>

下面是使用javascript绘制一个矩形【canvas 的宽度和高度是由css属性设置的】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>创建一个画布（Canvas）</title>
	</head>
	<style>
		#mycanvas{
			width: 300px;
			height: 300px;
			border: 2px solid black;
		}
	</style>
	<script>
		window.onload=function(){
			var mycanvas=document.getElementById("mycanvas");
			//创建 context 对象
			 var mycanvasContext=mycanvas.getContext("2d");
			 //fillStyle属性--CSS颜色
			 mycanvasContext.fillStyle="aqua";
			 //fillRect(x,y,width,height)--绘制矩形
			 //x--水平距离  
			 //y--垂直距离【x*2】
			 //(x,y)--起始点
			 //width--宽度【不变】
			 //height-高度【初始值*2】
			 mycanvasContext.fillRect(50,50,200,100);
			 
		}
	</script>
	<body>
		<!-- 下面是使用javascript绘制一个矩形【canvas 的宽度和高度是由css属性设置的】 -->
		<canvas id="mycanvas"></canvas>
	</body>
</html>

在这里插入图片描述
下面是使用javascript绘制一个矩形【canvas 的宽度和高度是由canvas 属性设置的】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>创建一个画布（Canvas）</title>
		<style>
			#mycanvas{
				border: 2px solid black;
			}
		</style>
		<script>
			window.onload=function(){
				var mycanvas=document.getElementById("mycanvas");
				//创建 context 对象
				var mycanvascontext=mycanvas.getContext("2d");
				//fillStyle属性--CSS颜色
				mycanvascontext.fillStyle="red";
				//fillRect(x,y,width,height)--绘制矩形
				//x--水平距离  
				//y--垂直距离
				//(x,y)--起始点
				//width--宽度
				//height-高度
				mycanvascontext.fillRect(50,50,200,500);
				
			}
		</script>
	</head>
	<body>
		<canvas id="mycanvas" width:"400px" height:"400px"></canvas>
	</body>
</html>

在这里插入图片描述

3.Canvas 坐标

canvas 是一个二维网格。

canvas 的左上角坐标为 (0,0)

上面的 fillRect 方法拥有参数 (0,0,150,75)。
意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。

4.Canvas - 画线

在Canvas上画线，我们将使用以下两种方法：

moveTo(x,y) 定义线条开始坐标

lineTo(x,y) 定义线条结束坐标

绘制线条我们必须使用到 stroke()的方法。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Canvas - 画线</title>
		<style>
			#mycanvas{
				border: 2px solid black;
			}
		</style>
		<script>
			window.onload=function(){
				var mycanvas=document.getElementById("mycanvas");
				//创建 Context 对象
				var mycanvascontext=mycanvas.getContext("2d");
				//设置起始点坐标
				mycanvascontext.moveTo(0,0)
				//设置结束点坐标
				mycanvascontext.lineTo(300,300);
				//开始划线
				mycanvascontext.stroke();
				
			}
		</script>
	</head>
	<body>
		<canvas id="mycanvas" width="300px" height="300px"></canvas>
	</body>
</html>

在这里插入图片描述

5.Canvas - 画圆形

在canvas中绘制圆形, 我们将使用以下方法:

arc(x,y,r,start,stop)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Canvas - 画圆形</title>
		<style>
			#mycanvas{
				border: 2px solid black;
			}
		</style>
		<script>
			window.onload=function(){
				var mycanvas=document.getElementById("mycanvas");
				//创建 context 对象
				var mycanvascontext=mycanvas.getContext("2d");
				//arc(x,y,r,start,stop)
				 //x--水平距离
				 //y--垂直距离
				//(x,y)--圆心点
				//r--半径
				//start--起笔点【0】
				//stop---落笔点【圆-{2*Math.PI} 半圆{Math.PI}】
				mycanvascontext.arc(150,150,50,0,2*Math.PI)
				mycanvascontext.stroke();
			}
			
		</script>
	</head>
	<body>
		<canvas id="mycanvas" width="300px" height="300px"></canvas>
	</body>
</html>

在这里插入图片描述

6. canvas设置矩形的颜色

设置矩形的填充色
mycanvascontext.fillStyle=“red”;

设置画笔的颜色
mycanvascontext.strokeStyle=“red”;

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>canvas设置矩形的颜色</title>
		<style>
			#mycanvas{
				border: 2px solid black;
			}
		</style>
		<script>
			window.onload=function(){
				var mycanvas=document.getElementById("mycanvas");
				//创建 context 对象
				var mycanvasContext=mycanvas.getContext("2d");
				//设置矩形的填充色
				mycanvasContext.fillStyle="red";
				mycanvasContext.fillRect(50,100,100,100);
				//设置画笔的颜色
				mycanvasContext.strokeStyle="red";
				mycanvasContext.strokeRect(50,100,100,100);
			}
		</script>
	</head>
	<body>
		<canvas id="mycanvas" width="300px" height="300px"></canvas>
	</body>
</html>

在这里插入图片描述

7.Canvas - 编辑文字

使用 canvas 绘制文本，重要的属性和方法如下：

font - 定义字体

fillText(text,x,y) - 在 canvas 上绘制实心的文本
strokeText(text,x,y) - 在 canvas 上绘制空心的文本

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Canvas - 编辑文字</title>
		<style>
		#mycanvas{
			border: 1px solid  black;
		}
		</style>
		<script>
			window.onload=function(){
				var mycanvas=document.getElementById("mycanvas");
				//创建 context 对象
				var mycanvasContext=mycanvas.getContext("2d");
				//设置实体字
				mycanvasContext.fillStyle="red";
				mycanvasContext.font="30px 黑体";
				mycanvasContext.fillText("hello",100,100);
				//设置空心字
				mycanvasContext.strokeStyle="biue";
				mycanvasContext.font="30px 黑体";
				mycanvasContext.strokeText("hello",100,100);
				
			}
		</script>
	</head>
	<body>
		<canvas id="mycanvas" width="300px" height="300px"></canvas>
	</body>
</html>

在这里插入图片描述

8.Canvas - 渐变

渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。

以下有两种不同的方式来设置Canvas渐变：

createLinearGradient(x,y,x1,y1) - 创建线条渐变

createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变

当我们使用渐变对象，必须使用两种或两种以上的停止颜色。

addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.

使用渐变，设置fillStyle或strokeStyle的值为渐变，然后绘制形状，如矩形，文本，或一条线。
使用 createLinearGradient():

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Canvas - 渐变</title>
		<script>
			//使用 createLinearGradient():
			window.onload=function(){
				var mycanvas=document.getElementById("mycanvas");
				//创建 context 对象
				var mycanvascontext = mycanvas.getContext("2d");
				//设置线性渐变
				//createLinearGradient(x,y,x1,y1) - 创建线条渐变
				//x,y--起始点坐标
				//x1,y1--结束点坐标
				var linearGradient=mycanvascontext.createLinearGradient(50,50,250,250);
				//设置线性渐变起始颜色和结束颜色
				linearGradient.addColorStop(0,"red");
				linearGradient.addColorStop(1,"blue");
				//设置渐变色
				mycanvascontext.fillStyle=linearGradient;
				mycanvascontext.fillRect(50,50,200,100);
				
			}
		</script>
	</head>
	<body>
		<canvas id="mycanvas" width="300px" height="300px"></canvas>
	</body>
</html>

在这里插入图片描述

使用 createRadialGradient():

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Canvas - 渐变</title>
		<script>
			//使用 createRadialGradient():
			window.onload=function(){
				var mycanvas=document.getElementById("mycanvas");
				//创建 context 对象
				var mycanvasContext=mycanvas.getContext("2d");
				//设置径向渐变
				//createRadialGradient(x,y,r,x1,y1,r1) 
				//x,y--起始点
				//r--起始半径
				//x1,y1--结束点
				//r1--结束半径
				var  radialGradient=mycanvasContext.createRadialGradient(75,50,5,90,60,100);
				radialGradient.addColorStop(0,"red");
				radialGradient.addColorStop(1,"yellow");
				mycanvasContext.fillStyle=radialGradient;
				mycanvasContext.fillRect(10,10,150,80);
			}
		</script>
	</head>
	<body>
		
		<canvas id="mycanvas" width="300px" height="300px"></canvas>
	</body> 
</html>

在这里插入图片描述

9.Canvas - 图像

把一幅图像放置到画布上, 使用以下方法:

drawImage(image,x,y)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Canvas - 图像</title>
		
		
		<script>
			window.onload=function(){
				var c=document.getElementById("mycanvas");
				var ect=c.getContext("2d");
				var img=document.getElementById("girls");
				//drawImage(img,50,50);
				//img--被放置在画布上的图片元素
				//x,y--放置的起始点
				ect.drawImage(img,0,0);
			}
		</script>
	</head>
	<body>
		<img src="girls.jpg" id="girls"  width="250" height="250"/>
		<canvas id="mycanvas" width="300px" height="300px" style="border: 2PX solid
		black;"></canvas>
	</body>
</html>

在这里插入图片描述