整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
制圆和圆弧
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 arc() 方法。
注释：Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素。
arc() 方法创建弧/曲线（用于创建圆或部分圆）。
提示：如需通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为 2*Math.PI。
提示：请使用 stroke() 或 fill() 方法在画布上绘制实际的弧。
context.arc(x,y,r,sAngle,eAngle,counterclockwise);参数描述x圆的中心的 x 坐标。y圆的中心的 y 坐标。r圆的半径。sAngle起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。eAngle结束角，以弧度计。counterclockwise可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。
示例
绘制矩形
Internet Explorer 9、Firefox、Opera、Chrome 以及 Safari 支持 rect() 方法。
注释：Internet Explorer 8 或更早的浏览器不支持 <canvas> 元素。
rect() 方法创建矩形。
提示：请使用 stroke() 或 fill() 方法在画布上实际地绘制矩形。
context.rect(x,y,width,height);参数描述x矩形左上角的 x 坐标y矩形左上角的 y 坐标width矩形的宽度，以像素计height矩形的高度，以像素计
实例１
实例２
绘制“被填充”的矩形
绘制矩形（无填充）
在给定的矩形内清除指定的像素
tml 5 互联网的计算机浏览器
canvas结构：
<canvas id="canvas"></canvas>
如果不给canvas指定大小，canvas默认是300px宽，150px高。是行内元素。通常使用width或者height属性指定其大小，不要使用CSS给canvas指定其大小。
绘图主要在context：
canvas.getContext('2d')
画直线：
context.moveTo(x,y); context.lineTo(x+500,y+200); context.stroke()
案例：
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();
ctx.closePath();
</script>
</body>
</html>
canvas 是基于状态绘制的，即先定义状态，后绘制。
起始一条路径和结束（回到起点）路径
ctx.beginPath(); ctx.closePath(); //会自动将不封闭的图形加上连线
矩形：
context.rect(x,y,width,height);
画圆和弧：
更多特殊设置，请参阅：http://www.w3school.com.cn/tags/html_ref_canvas.asp
制作动画的架构：
HTML5中基本线条的绘制
在Canvas画布中我们可以使用JavaScript这支画笔绘制各种图形，它的功能之所以这么强大，是因为Canvas的CanvasRenderingContext2D对象为我们提供了丰富多彩的API工具，包括我们本次要了解的直线、二次曲线、贝赛尔曲线和圆弧曲线，下表中列出的这些API就是我们本次基本线条的绘制要用到的几种API。
HTML5中基本线条的绘制要用到的几种API
1.绘制直线
我们在学生时代的几何课上就已经学过了“两点一线”，那么Canvas在绘制直线的时候也需要一个起点和一个终点，绘制直线的代码如下图所示：
在HTML5中绘制直线代码
在谷歌浏览器中的预览效果如下图所示：
在HTML5中绘制直线预览效果
2.绘制二次曲线
二次曲线（quadratic curve）也称圆锥曲线或圆锥截线，是直圆锥面的两腔被一个面所截而得的曲线。二次曲线由一个起点、一个终点和一个控制点决定，当控制点经过圆锥顶点时，曲线变成一个点、直线或相交线，当控制点不经过圆锥顶点时，曲线可能是圆、椭圆、双曲线和抛物线。使用Canvas的quadraticCurveTo函数绘制二次曲线的代码如下图所示：
在HTML5中绘制二次曲线的代码
在谷歌浏览器中的预览效果如下图所示：
在HTML5中绘制二次曲线的代码
3.绘制贝塞尔曲线
贝塞尔曲线是电脑图形中非常重要的参数曲线，广泛应用于计算机图形中为平铺曲线建立模型。贝塞尔曲线的每一个顶点都有两个控制点，用于控制在该点两侧的曲线的弧度。它有一个起点、一个终点、两个控制点，共四个点决定一条曲线。使用Canvas的bezierCurveTo函数可以非常方便地绘制曲线，绘制贝塞尔曲线的代码如下图所示：
在HTML5中绘制贝塞尔曲线代码示例
在谷歌浏览器中的预览效果如下图所示：
在HTML5中绘制贝塞尔曲线预览图
4.绘制圆弧
使用Canvas的arc方法绘制圆弧的代码如下图所示：
在HTML5中绘制圆弧的代码
在谷歌浏览器中的预览效果如下图所示：
在HTML5中绘制圆弧的代码
这些便是几种基本线条的绘制方法了，还是很有意思的，大家在练习的时候可以试着绘制一些形状，试不出来也没关系，下一篇中我们将会介绍一些简单的形状的绘制方法。谢谢大家的观看。祝大家：身体健康、生活愉快。
*请认真填写需求信息，我们会在24小时内与您取得联系。
