canvas 画曲线,html画曲线
canvas/canvas是HTML5中的新标签，用来画图形。其实这个标签和其他标签一样，特殊之处在于它可以得到一个CanvasRenderingContext2D对象，这个对象可以通过JavaScript脚本来控制绘制。
canvas/canvas只是一个绘制图形的容器。除了id，class，style等属性，还有高度和宽度属性。在画布上绘制元素有三个主要步骤：
1.获取canvas元素对应的DOM对象，这是一个Canvas对象；
2.调用CanvasRenderingContext2D对象的getContext()方法；
3.调用CanvasRenderingContext2D对象进行绘制。
绘制曲线
绘制曲线有四个功能，即：
•context.arc(x,y,r,sAngle,eAngle,counterclockwise);用于创建圆弧/曲线(用于创建圆或部分圆)。收到的参数的含义：
参数含义
:————- :————-
x 圆心的x坐标
y圆心的Y坐标
r圆的半径
桑乐起始角度，以弧度表示(圆弧的三点钟位置为0度)
角度结束角度，以弧度为单位
逆时针可选。指定是逆时针还是顺时针绘制。假=顺时针，真=逆时针
下面是几个arc()函数的例子：
代码将内容复制到剪贴板var canvas=document . getelementbyid( canvas )；var context=canvas . get context( 2d )；context . stroke style= # f22d 0d ；context.lineWidth= 2//画圆context . begin path()；context.arc(100，100，40，0，2 *数学。PI)；context . stroke()；//画一个半圆context . begin path()；context.arc(200，100，40，0，数学。PI)；context . stroke()；//画半圆，逆时针context . begin path()；context.arc(300，100，40，0，数学。PI，真)；context . stroke()；//画一个封闭的半圆context . begin path()；context.arc(400，100，40，0，数学。PI)；context . close path()；context . stroke()；效果如下：
•context.arcTo(x1,y1,x2,y2,r);在画布上的两条切线之间创建圆弧/曲线。收到的参数的含义：
这里需要注意的是，arcTo函数绘制的曲线的起点需要通过moveTo()函数来设置。下面，使用arcTo函数绘制一个圆角矩形：
代码将内容复制到clipboard functioncreateroudrect(context，x1，y1，width，height，radius){//并移动到左上角context.moveTo(x1 radius，y1)；//添加一个连接到右上角的线段context.lineto (x1 width-radius，y1)；//添加一段圆弧context.arcto (x1宽度，y1，x1宽度，y1半径，半径)；//添加一条连接右下角的线段context.lineto (x1 width，y1 height-radius)；//添加一段arc context.arcto (x1宽度，y1高度，x1宽度-半径，y1高度，半径)；//添加一条连接左下角的线段context.lineto (x1半径，y1高度)；//添加一段arc context.arcto (x1，y1 height，x1，y1 height-radius，radius)；//添加一个连接到左上角的线段context.lineTo(x1，y1半径)；//添加一段arc context.arcto (x1，y1，x1半径，y1，半径)；context . close path()；}//获取canvas元素对应的DOM对象var canvas=document . getelementbyid( MC )；//获取画布上绘制的CanvasRenderingContext2D对象var context=canvas . Get context( 2D )；context . line width=3；context . stroke style= # f 9230 b ；createRoundRect(上下文，30，30，400，200，50)；context . stroke()；效果如下：
•context.quadraticCurveTo(cpx,cpy,x,y);绘制二次贝塞尔曲线，参数含义如下：
曲线的起点是当前路径中的最后一点。如果路径不存在，则使用beginPath()和moveTo()方法来定义起点。
•context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);用以下参数绘制三次贝塞尔曲线：
这就是本文的全部内容。希望对大家的学习和支持有帮助。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。