HTML5 Canvas

最新推荐文章于 2023-08-03 08:24:58 发布

周超&.

最新推荐文章于 2023-08-03 08:24:58 发布

阅读量120

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/z12345zc/article/details/116765839

版权

HTML5 Canvas
1、什么是 canvas?
标签定义图形，比如图表和其他图像，您必须使用javascript脚本来绘制图形。
在画布上（Canvas）画一个红色矩形，渐变矩形，彩色矩形，和一些彩色的文字。
HTML5 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成.
标签只是图形容器，您必须使用脚本来绘制图形。
你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。

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

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

注意: 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小.
提示:你可以在HTML页面中使用多个元素.
可以使用 style 属性来添加边框:

</html><!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#mycanvas{
				width: 300px;
				height: 300px;
				border: 1px solid  black;
			}
		</style>
	</head>
	<body>
		<canvas id="mycanvas"></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></title>
		<style>
			#mycanvas{
				border: 1px 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>
使用javascript绘制一个矩形【canvas 的宽度和高度是由css属性设置的】

`` ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210513204542274.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3oxMjM0NXpj,size_16,color_FFFFFF,t_70)

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#mycanvas{
				border: 1px 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,25,200,50);
			}
		</script>
	</head>
	<body>
		<canvas id="mycanvas" width="300px" height="300px"></canvas>
	</body>
</html>

```![在这里插入图片描述](https://img-blog.csdnimg.cn/202105132048451.PNG?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3oxMjM0NXpj,size_16,color_FFFFFF,t_70)
**3.Canvas 坐标**
canvas 是一个二维网格。
canvas 的左上角坐标为 (0,0)
上面的 fillRect 方法拥有参数 (0,0,150,75)。
意思是：在画布上绘制 150x75 的矩形，从左上角开始 (0,0)。
**4.Canvas - 画线**
在Canvas上画线，我们将使用以下两种方法：
moveTo(x,y) 定义线条开始坐标
lineTo(x,y) 定义线条结束坐标
绘制线条我们必须使用到 stroke()的方法。

//开始划线
mycanvascontext.stroke();
}

``` **Canvas - 画圆形**

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#mycanvas{
				border: 1px 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>

**```Canvas - 渐变**
渐变可以填充在矩形, 圆形, 线条, 文本等等, 各种形状可以自己定义不同的颜色。
以下有两种不同的方式来设置Canvas渐变：
createLinearGradient(x,y,x1,y1) - 创建线条渐变
createRadialGradient(x,y,r,x1,y1,r1) - 创建一个径向/圆渐变
当我们使用渐变对象，必须使用两种或两种以上的停止颜色。
addColorStop()方法指定颜色停止，参数使用坐标来描述，可以是0至1.
使用渐变，设置fillStyle或strokeStyle的值为渐变，然后绘制形状，如矩形，文本，或一条线。

周超&.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 Canvas

HTML5 Canvas1、什么是 canvas? 标签定义图形，比如图表和其他图像，您必须使用javascript脚本来绘制图形。在画布上（Canvas）画一个红色矩形，渐变矩形，彩色矩形，和一些彩色的文字。HTML5 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成. 标签只是图形容器，您必须使用脚本来绘制图形。你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。2.创建一个画布（Canvas）一个画布在网页中是一个矩形框，通过元素来绘制.
复制链接

扫一扫