HTML<canvas>标签
HTML<canvas>标签作用
HTML<canvas>元素为HTML提供了可使用的位图表面。它用于在网页上绘制图形。
HTML 5 <canvas>标签用于使用JavaScript之类的脚本语言绘制图形。
<canvas>元素只是图形的容器，必须使用脚本语言才能绘制图形。 <canvas>元素允许2D形状和位图图像的动态且可编写脚本的渲染。
这是一种低级的过程模型，可更新位图且没有内置场景。<canvas>中有几种绘制路径，框，圆，文本和添加图像的方法。
如何创建HTML<canvas>？
<canvas>是矩形HTML页面上的区域。用canvas元素指定。默认情况下，<canvas>元素没有边框，也没有内容，就像一个容器。
<canvas id = "mycanvas" width ="200" height ="100"> </canvas>
HTML 5<canvas>标签示例
<canvas id="myCanvas1" width="300" height="100" style="border:2px solid;">
您的浏览器不支持HTML5 canvas标签。
</canvas>
输出:
注意:总是需要指定id属性和height＆width属性来定义<canvas>的大小。一个HTML页面上可以有多个canvas元素。
支持浏览器
| 元素 |
 |
 |
 |
 |
 |
| <canvas> |
支持 |
支持 |
支持 |
支持 |
支持 |
带有JavaScript的HTML Canvas标签
<canvas>是二维网格。
坐标（0,0)定义<canvas>的左上角。参数（0,0,200,100)用于fillRect（)方法。此参数将填充从左上角（0,0)开始的矩形，并绘制200 * 100矩形。
<canvas id="myCanvas" width="250" height="150" 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,200,100);
</script>
输出:
在<canvas>上绘制直线
如果要在<canvas>上绘制直线，可以使用以下两种方法。
moveTo（x，y):用于定义线的起点。
lineTo（x，y):用于定义线的终点。
如果绘制的起点是(0,0)，终点为（200,100)，请使用描边方法绘制直线。
<canvas id="myCanvasLine" width="200" height="100" style="border:1px solid #d3d3d3;">
您的浏览器不支持HTML5 canvas标签。</canvas>
<script>
var c = document.getElementById("myCanvasLine");
var ctx = c.getContext("2d");
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.stroke();
</script>
输出:
在<canvas>上绘制圆
如果要在<canvas>上绘制圆，可以使用arc（)方法:
arc(x, y, r, start, stop)
要在HTML<canvas>上绘制圆形，请使用ink（)方法之一，例如stroke（)或fill（)。
<canvas id="myCanvasCircle" width="200" height="100" style="border:1px solid #d3d3d3;">
您的浏览器不支持HTML5 canvas标签。</canvas>
<script>
var c = document.getElementById("myCanvasCircle");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();
</script>
输出:
在<canvas>上绘制文本
有一些属性和方法用于在<canvas>上绘制文本。
font属性:用于定义文本的字体属性。
fillText（text，x，y)方法:用于在<canvas>上绘制填充文本。它看起来像粗体字体。
strokeText（text，x，y)方法:它也用于在<canvas>上绘制文本，但文本未填充。
让我们看一下
fillText（)方法示例。
<canvas id="myCanvasText1" width="300" height="100" style="border:1px solid #d3d3d3;">
Sorry! Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvasText1");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello JavaTpoint",10,50);
</script>
输出:
让我们看一下
strokeText()方法示例。
<canvas id="myCanvasText2" width="300" height="100" style="border:1px solid #d3d3d3;">
Sorry!Upgrade your browser. It does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvasText2");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.strokeText("Hello JavaTpoint",10,50);
</script>
输出:
