canvas标签html5,HTML5新标签——canvas

canvas简介

HTML5 标签用于绘制图像(通过脚本，通常是 JavaScript)。

不过， 元素本身并没有绘制能力(它仅仅是图形的容器) - 您必须使用脚本来完成实际的绘图任务。

getContext()

参数：2d

返回值：返回一个绘图环境，绘图环境有一些方法和属性，用于绘制图形

illStyle

作用：设置或返回用于填充绘画的颜色、渐变或模式

strokeStyle

作用：设置或返回用于填充绘画的颜色、渐变或模式

lineWidth

作用：设置或返回当前的线条宽度

font

作用：设置或返回文本内容的当前字体属性

取值：italic small-caps bold 12px arial

textAlign

作用：设置或返回文本内容的当前对齐方式

取值：center：文本的中心被放置在指定的位置。end：文本在指定的位置结束。left：文本左对齐。right：文本右对齐。start：文本在指定的位置开始。

fill()

作用：填充当前绘图或路径

参数：无

moveTo(x，y)

作用：把路径移动到指定位置，不创建线条

参数：指定点的 x 和 y 坐标

lineTo(x，y)

作用：添加一个新点，然后创建从该点到画布中最后指定点的线条(该方法并不会创建线条)

参数：指定点的 x 和 y 坐标

fillRect(x，y，width，height)

作用：绘制一个填充的矩形，默认颜色是黑色

参数：第一个参数起始点的x坐标，第二个参数是起始点的y坐标，第三个参数是矩形的宽度，第四个参数是矩形的高度

stroke()

作用：会实际地绘制出通过 moveTo() 和 lineTo() 方法定义的路径。默认颜色是黑色。

参数：无

strokeRect(x，y，width，height)

作用：绘制一个没有填充的矩形

参数：第一个参数起始点的x坐标，第二个参数是起始点的y坐标，第三个参数是矩形的宽度，第四个参数是矩形的高度

rect(x，y，width，height)

作用：创建一个矩形，没有实际的线条

参数：第一个参数起始点的x坐标，第二个参数是起始点的y坐标，第三个参数是矩形的宽度，第四个参数是矩形的高度

clearRect(x，y，width，height)

作用：清除指定矩形内的元素

参数：第一个参数要清除的矩形左上角的x坐标，第二个参数要清除的矩形左上角的y坐标,第三个参数是要清除的矩形的宽度，第四个参数是要清除的矩形的高度

beginPath()

作用：开始一条路径，或重置当前的路径。

参数：无

arc(x，y，r，sAngel，eAngel)

作用：创建弧/曲线(用于创建圆或部分圆)

参数：x：圆心 x 坐标，y：圆心 y 坐标，r：圆的半径，sAngel：圆开始的弧度，eAngel：圆结束的弧度，counterclockwise：可选，规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。

closePath()

作用：创建从中点回到起始点的路径。

参数：无

arcTo(x，y，x1，y1，r)

作用：在画布上创建介于两个切线之间的弧/曲线。

参数：x：弧的起点的 x 坐标，y：弧的起点的 y 坐标，x1：弧的终点的 x 坐标，y1：弧的终点的 y 坐标，r：弧的半径

fillText(text，x，y，maxwidth)

作用：在画布上绘制填充的文本

参数：text：要绘制的文本，x：起始点的x坐标，y：起始点的y坐标，maxwidth：可选，设置文本的最大长度

strokeText(text，x，y，maxwidth)

作用：在画布上绘制没有填充的文本

参数：text：要绘制的文本，x：起始点的x坐标，y：起始点的y坐标，maxwidth：可选，设置文本的最大长度

drawImage(img，sx，sy，swidth，sheight，x，y，width，height)

作用：在画布上绘制图像、画布或视频。也可以制图像的某些部分，以及/或者增加或减少图像的尺寸。

参数：img：规定要使用的图像、画布或视频，sx：可选。开始剪切的 x 坐标位置。，sy：可选。开始剪切的 y 坐标位置。，swidth：可选。被剪切图像的宽度。，sheight：可选。被剪切图像的高度。，x：在画布上放置图像的 x 坐标位置。，y：在画布上放置图像的 y 坐标位置，width：可选。要使用的图像的宽度。(伸展或缩小图像)。，height：可选。要使用的图像的高度。(伸展或缩小图像)

举报/反馈