画布标签定义图形，如图表和其他图像。必须使用脚本来绘制图形。

例如，在画布上绘制一个红色矩形、一个渐变矩形、一个彩色矩形和一些彩色单词。

画布是什么？

HTML5 canvas元素用于绘制图形，由脚本(通常是JavaScript)完成。

画布标签只是图形容器，必须使用脚本来绘制图形。

您可以使用画布以多种方式绘制路径、框、圆、字符和添加图像。

苹果手机

创建画布(画布)

画布是网页中的矩形框，由画布元素绘制。

请注意，默认情况下，画布元素没有边框和内容。

canvas简单实例如下：

canvas id=' my canvas ' width=' 200 ' height=' 100 '/canvas

请注意，标记通常需要指定一个id属性(通常在脚本中引用)，以及由宽度和高度属性定义的画布大小。

提示：你可以在HTML页面中使用多个 canvas 元素.

1.使用 style 属性来添加边框：

canvas id=' my canvas ' width=' 200 ' height=' 100 '

style=' border :1 px solid # 000000；'

/canvas

2.使用 JavaScript 来绘制图像

画布元素本身没有绘制能力。所有绘图工作必须在JavaScript中完成：

var c=document . getelementbyid(' my canvas ')；

var CTX=c . GetContext(' 2d ')；

ctx.fillStyle=' # FF0000

ctx.fillRect(0，0，150，75)；

实例解析：

3.首先，找到 canvas 元素：

var c=document . getelementbyid(' my canvas ')；

4.然后，创建 context 对象：

var CTX=c . GetContext(' 2d ')；

GetContext('2d ')对象是一个内置的HTML5对象，有很多绘制路径、矩形、圆形、字符、添加图像的方法。

下面的两行代码绘制一个红色的矩形：

ctx.fillStyle=' # FF0000

ctx.fillRect(0，0，150，75)；

设置填充样式属性可以是CSS颜色、渐变或图案。fillStyle默认设置为#000000(黑色)。

fillRect(x，y，宽度，高度)方法定义了矩形的当前填充模式。

苹果手机

画布坐标

画布是二维网格。

画布左上角的坐标是(0，0)

上面的fillRect方法有参数(0，0，150，75)。

意思是：在画布上画了一个150x75的矩形，从左上角(0，0)开始。

坐标实例

如下图所示，画布的x和y坐标用于在画布上定位绘画。在鼠标移动的矩形框上，显示定位坐标。

画布路径

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

移动到(x，y)定义线的起始坐标

线条终点(x，y)定义线条终点坐标

画线一定要用‘墨’的方法，就像笔画()一样。

定义起始坐标(0，0)和结束坐标(200，100)。然后使用stroke()方法绘制线条：

画布-文本

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

字体-定义字体

填充文本(文本，x，y)-在画布上绘制纯文本

文本(文本，x，y)-在画布上绘制空心文本

使用 fillText():

使用“Arial”字体在画布上绘制30px高的文本(实心):

JavaScript:

var c=document . getelementbyid(' my canvas ')；

var CTX=c . GetContext(' 2d ')；

ctx.font=' 30px Arial

ctx.fillText('Hello World '，10，50)；