HTML canvas标签 HTMLcanvas标签|HTML5

本文概述

如何创建HTML画布？
HTML 5 Canvas标签示例
支持的浏览器
带有JavaScript的HTML画布标签
在画布上画线
在画布上绘制圆
在画布上绘制文字

HTML canvas元素为HTML提供了一个可使用位图的表面。它用于在网页上绘制图形。
HTML 5 < canvas> 标记用于使用脚本语言（如JavaScript）绘制图形。
< canvas> 元素只是用于图形的容器, 必须使用脚本语言才能绘制图形。 < canvas> 元素允许对2D形状和位图图像进行动态且可编写脚本的渲染。
它是一种低级的过程模型, 可更新位图且没有内置场景。画布中有几种绘制路径, 框, 圆, 文本和添加图像的方法。
如何创建HTML画布？画布是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; "> Your browser does not support the HTML5 canvas tag. < /canvas>

立即测试
输出：
你的浏览器不支持HTML5 canvas标签。
注意：始终需要指定id属性和height＆width属性来定义画布的大小。一个HTML页面上可以有多个canvas元素。支持的浏览器

Element	Chrome	IE	Firefox	Opera	Safari
< canvas>	Yes	Yes	Yes	Yes	Yes

带有JavaScript的HTML画布标签画布是二维网格。
坐标（0, 0）定义画布的左上角。参数（0, 0, 200, 100）用于fillRect()方法。此参数将填充从左上角（0, 0）开始的矩形, 并绘制200 * 100矩形。

< canvas id="myCanvas" width="250" height="150" style="border:1px solid #c3c3c3; "> Your browser does not support the HTML5 canvas tag. < /canvas> < script> var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.fillStyle = "#FF0000"; ctx.fillRect(0, 0, 200, 100); < /script>

输出：
你的浏览器不支持HTML5 canvas标签。
在画布上画线如果要在画布上绘制直线, 可以使用以下两种方法。
moveTo（x, y）：用于定义线的起点。
lineTo（x, y）：用于定义线的终点。
如果绘制起点为（0, 0）且终点为（200, 100）的线, 请使用描边方法绘制该线。

< canvas id="myCanvasLine" width="200" height="100" style="border:1px solid #d3d3d3; "> Your browser does not support the HTML5 canvas tag.< /canvas> < script> var c = document.getElementById("myCanvasLine"); var ctx = c.getContext("2d"); ctx.moveTo(0, 0); ctx.lineTo(200, 100); ctx.stroke(); < /script>

输出：
你的浏览器不支持HTML5 canvas标签。
在画布上绘制圆如果要在画布上绘制圆, 可以使用arc()方法：

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

要在HTML画布上绘制圆, 请使用ink()方法之一, 例如stroke()或fill()。

< canvas id="myCanvasCircle" width="200" height="100" style="border:1px solid #d3d3d3; "> Your browser does not support the HTML5 canvas tag.< /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>

输出：
你的浏览器不支持HTML5 canvas标签。
在画布上绘制文字有一些属性和方法可用于在画布上绘制文本。
字体属性：用于定义文本的字体属性。
fillText（text, x, y）方法：用于在画布上绘制填充文本。它看起来像粗体。
strokeText（text, x, y）方法：它也用于在画布上绘制文本, 但文本未填充。
让我们看一下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 srcmini", 10, 50); < /script>

输出：
抱歉!你的浏览器不支持HTML5 canvas标签。
让我们看一下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 srcmini", 10, 50); < /script>

输出：
【HTML canvas标签】抱歉！升级你的浏览器。它不支持HTML5 canvas标签。