HTML5Canvas属性和方法

在上一节中，我们学习了如何创建Canvas画布。在本节中，我们将了解Canvas中属性和方法的使用。通过这些属性和方法，我们可以绘制各种图形，比如直线、矩形、圆形、多边形等等。画布坐标在上一节中，我们学习了如何创建画布，但是要在画布上绘制图形，首先要搞清楚画布中的坐标关系。画布中左上角的坐标为(0,0)，画布的x轴和y轴用于定位画在画布上的位置。如下图所示：绘制线条我们可以使用以下属性和方法在Canvas画布上绘制线条：beginPath()：用于开始一条路径，或者重新设置当前路径。closePath()：创建从当前点到起点的路径。moveTo()：将路径移动到画布中的指定点，而不创建一条线。这个方法有两个参数，第一个参数是路径在x轴上的坐标，第二个参数是路径在y轴上的坐标。lineTo()：添加一个新点并从该点到画布中最后指定的点创建一条线（此方法不创建一条线）。stroke()：实际上将绘制由moveTo()和lineTo()方法定义的路径。默认颜色为黑色。lineWidth：设置或返回以像素为单位的当前线宽。strokeStyle：设置或返回用于描边的颜色、渐变或图案。例子：在画布上画一条蓝线：<正文>浏览器中的Demo效果：从上图可以看出，我们在画布中绘制了一条蓝色的线，线的起始位置为(0,0)，结束位置为(200,200)。线宽为3px，线条颜色为蓝色。在Canvas中绘制矩形的方法和属性如下：fillStyle：该属性用于设置或返回用于填充绘图的颜色、渐变或模式。rect()：创建一个矩形。第一个参数是x坐标，第二个参数是y坐标，第三个参数是矩形的宽度，第四个参数是矩形的高度。fillRect()：绘制一个填充的矩形。第一个参数是x坐标，第二个参数是y坐标，第三个参数是矩形的宽度，第四个参数是矩形的高度。strokeRect()：绘制一个矩形，默认颜色为黑色。第一个参数是x坐标，第二个参数是y坐标，第三个参数是矩形的宽度，第四个参数是矩形的高度。clearRect()：清除给定矩形内的指定像素。第一个参数为待清除矩形左上角的x坐标，第二个参数为待清除矩形左上角的y坐标，第三个参数为待清除矩形的宽度，第四个参数是要清除的矩形的高度。示例：在画布的x坐标50和y坐标50处绘制一个宽50px高100px的空白矩形：浏览器中演示效果：在画布上画一个宽度x坐标70，y坐标40一个粉红色的矩形，高度为70px，高度为40px：浏览器演示效果：在给定的矩形内清空一个矩形：浏览器中的演示效果：上图中的紫色矩形就是我们绘制的矩形，里面的白色矩形就是我们清除的矩形区域。clearRect()方法的坐标也是从(0,0)开始的。画圆您可以使用Canvas中的arc()方法来创建曲线或圆。arc()方法的语法如下：context.arc(x,y,r,sAngle,eAngle,counterclockwise);其中x是圆心的x坐标，y是圆心的y坐标，r是Radius，sAngle是起始角，eAngle是结束角。counterclockwise为可选参数，指定是逆时针还是顺时针绘制，false为顺时针，true为逆时针。例子：比如在画布上画一个半径为50的圆：在浏览器中的演示效果：Canvastext使用Canvas绘制文字，需要用到的属性和方法：font:设置或返回canvas上文字内容的当前字体属性.可以设置的属性值包括font-style、font-variant、font-weight、font-size、font-family等。textAlign：设置或返回文本内容的当前对齐方式。fillText()：在画布上绘制填充文本。默认颜色为黑色。strokeText()：在画布上绘制无填充的文本。第一个参数是画布上的输出文本，第二个参数是绘制文本的x坐标位置，第三个参数是绘制文本的y坐标位置。示例：在画布上绘制文本：浏览器中演示效果：Canvas渐变我们可以在Canvas中用渐变填充矩形、圆形、文本、线条，各种形状可以定义不同的颜色他们自己。设置渐变有两种方法：createLinearGradient()方法，可用于创建线性渐变对象，语法如下：context.createLinearGradient(x0,y0,x1,y1);参数说明x0第一个参数为梯度起点的x坐标y0第二个参数为梯度起点的y坐标x1第三个参数为梯度终点的x坐标y1第四个参数为渐变终点的y坐标createLinearGradient()方法用于创建一个放射状/圆形渐变对象，语法如下：context.createRadialGradient(x0,y0,r0,x1,y1,r1);参数描述x0渐变起始圆x坐标，y0渐变起始圆y坐标，r0起始圆y坐标，半径x1，渐变结束圆x坐标，y1渐变结束circley坐标r1结束圆的半径示例：定义一个从粉色到蓝色渐变的矩形：在浏览器中的演示效果：Canvas中有很多属性和方法，通过这些属性和方法，我们可以成功的在Canvas画布中绘制各种图形。请记住，元素本身没有绘图功能，它只是一个图形容器，我们通过JavaScript脚本进行实际绘图。如果想看更多可以点击链接：https://www.9xkd.com/