HTML 中的画布标签

WBOY原创: 2024-09-04 16:27:39569浏览

Canvas 是指在浏览器页面上绘制图像。 HTML 中的 Canvas 标签就是这样一种元素，它为 HTML 提供位图表面，就像由像素图组成的空白画布，可能包含两种以上的颜色供使用。元素用于借助脚本语言（例如 JavaScript）在网页上创建图形图像。元素创建一个空画布来使用，就像图形容器一样，但您需要使用 javascript 进行实际创建、绘制图形、图像等。

最初，HTML不支持canvas，但是后来HTML5引入了这个canvas功能。这个<画布> HTML5 中的标签用于通过 JavaScript 脚本绘制图形。我们还可以用这个canvas标签来绘制图像。可以使用动画、图形、照片处理、数据可视化使画布元素变得美观。这一画布功能最初是通过 Apple 公司在 Web Kit 中引入的。

实时示例：与其编写独立代码来实现每个形状的图形，否则它将成为处理器的过载。因此，为了克服这种情况，开发人员在 HTML 中提出了 canvas 标签。更少的代码可以给我们一个精确的图形动画形状。

语法

HTML 中的画布功能是通过应用

<canvas> //specify some properties inside canvas tag because different shape have different properties like width="" ,height="" , style=””
//code
</canvas>
<script>
//script code for animations and graphics
</script>

在 HTML 中实现 Canvas 标签的示例

这是示例：

示例#1

矩形内的圆形与画布示例：

代码：

<!DOCTYPE html>
<html>
<head>
<title>
Canvas in HTM5
</title>
<!--CSS Styles-->
<style>
h1
{
color: green;
text-align:center;
}
p
{
color:brown;
border: solid 2px blue;
font-size: 25px;
}
</style>
</head>
<body>
<h1>
Circle Shape inside Rectangle Shape
</h1>
<canvas id="rectangleCircle" width="300" height="200" style="border:2px solid red;">
</canvas>
<script>
var circle = document.getElementById("rectangleCircle");// with id drawing circle shape with script
var creatingCircle = circle.getContext("2d");//get the circle type from 2d shape
creatingCircle.beginPath();//circle shape begin
creatingCircle.arc(150,100,80,4,4*Math.PI);//circle x, y and size of the circle
creatingCircle.stroke();//stroke of the circle
</script>
</body>
</html>

输出：
HTML 中的画布标签

示例#2

圆形内的文本与画布示例：

代码：

/strong><!DOCTYPE html>
<html>
<head>
<title>
Canvas in HTM5
</title>
<!--CSS Styles-->
<style>
h1
{
color: red;
text-align:center;
}
p
{
color:green;
border: solid 2px maroon;
font-size: 25px;
}
</style>
</head>
<body>
<h1>
Text Inside the Circle Shape
</h1>
<canvas id="rectangleCircle" width="300" height="200" style="border:2px solid navy;">
</canvas>
<script>
var circle = document.getElementById("rectangleCircle");// with id drawing circle shape with script
var creatingCircle = circle.getContext("2d");//get the circle type from 2d shape
creatingCircle.beginPath();//circle shape begin
creatingCircle.arc(150,100,100,4,4*Math.PI);//circle x, y and size of the circle
creatingCircle.stroke();//stroke of the circle
creatingCircle.font = "30px Arial";//Creating a font
creatingCircle.strokeText("EDUCBA",100,90);// Creating text inside the circle
</script>
</body>
</html>

输出：

HTML 中的画布标签

示例#3

用 Canvas 画线示例：

代码：

<!DOCTYPE html>
<html>
<head>
<title>
Canvas in HTM5
</title>
<!--CSS Styles-->
<style>
h1
{
color: blue;
text-align:center;
}
p
{
color:red;
border: solid 2px orange;
font-size: 25px;
}
</style>
</head>
<body>
<h1>
Draw the Line with Canvas
</h1>
<canvas id="lineID" width="400" height="400" style="border:2px solid orange;">
</canvas>
<script>
var line = document.getElementById("lineID");// with id drawing line shape with script
var lineCreate = line.getContext("2d");//get the line type from 2d shape
lineCreate.moveTo(0,0);//move the line
lineCreate.lineTo(400,400);//Where to where line has to move
lineCreate.stroke();//line stroke
</script>
</body>
</html>

输出：

HTML 中的画布标签

示例#4

画布上的三角形示例：

代码：

<!DOCTYPE html>
<html>
<head>
<title>
Canvas in HTM5
</title>
<!--CSS Styles-->
<style>
h1
{
color: fuchsia;
text-align:center;
}
p
{
color:blue;
border: solid 2px skyblue;
font-size: 25px;
}
</style>
</head>
<body>
<h1>
Triangle Shape with Canvas
</h1>
<canvas id="triangleID" width="300" height="300" style="border:2px solid skyblue;">
</canvas>
<script>
var canvas = document.getElementById('triangleID');// with id drawing traingles shape with script
if (canvas.getContext)
{
var traingle = canvas.getContext('2d');//get the traingels type from 2d shape
//Creating the traingle
traingle.beginPath();
traingle.moveTo(25,25);
traingle.lineTo(105,25);
traingle.lineTo(25,105);
traingle.fill();
// Triangle can be stroked with below fuctions
traingle.beginPath();
traingle.moveTo(125,125);
traingle.lineTo(125,45);
traingle.lineTo(45,125);
traingle.closePath();
traingle.stroke();
} else
{
alert('Your browser does ot support this feature');//alert the user
document.write('Your browser does ot support this feature');//display the output
}
</script>
</body>
</html>

输出：

HTML 中的画布标签

结论

HTML5版本中引入了canvas标签。 canvas 和 JavaScript 代码都可以为您提供使用 canvas 标签绘制的准确形状。我们可以画圆形、矩形、直线、三角形等

以上是HTML 中的画布标签的详细内容。更多信息请关注PHP中文网其他相关文章！

JavaScript html5 less html for require using map this animation canvas kind

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

上一篇：PHP Tag in HTML下一篇：Font Tag in HTML

查看更多