初探HTML5——canvas元素（四）
2017-10-23 本文已影响0人
Sugar_Ye
目前为止已经演示了使用canvas绘制直线、矩形、虚线，小伙伴们说想要绘制一个圆形，那么该如何操作呢？别急，本小节就来绘制圆形，请不要眨眼。
一、理解参数
想想上学时候用圆规怎么画出一个圆的？要有一个点作为圆心，还要定义一段距离作为圆的半径，然后用圆规在纸上转一圈一个圆就画好了。
在canvas中，通过x，y坐标来确圆心。有了圆心之后，定义半径，开始的弧度，结束的弧度。程序默认的绘制方式是向X方向进行绘制，也就是顺时针。当然这是可以根据需求修改的，先看2组图。
1、逆时针半圆
逆时针半圆
2、顺时针半圆
顺时针半圆
二、绘制完整圆形
好了，先来看看如何绘制一个完整的圆形，并给它填充红色。
调用 context对象的 arc()方法传入x，y坐标，半径，开始弧度、结束弧度绘制圆形。
示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas演示绘制圆形</title>
<script type="text/javascript">
window.onload=function(){
//获取canvas对象的context（绘图上下文）
var context=document.getElementById('canvas').getContext("2d");
//声明变量，保存圆弧信息
var centerX=200;
var centerY=100;
var radius=60;
var start = 0 * Math.PI;
var end = 2 * Math.PI;
//定义填充的颜色
context.fillStyle="#E91E63";
//使用确定的信息绘制圆弧
context.arc(centerX, centerY, radius, start, end);
//填充颜色
context.fill();
//关闭绘制路径
context.closePath();
//按顺序路径绘制
context.stroke();
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
</body>
</html>
演示效果：
颜色跟描述的有点差异，不过还是属于红色。
一个完整的圆形
三、揭秘半圆
其实arc()其实有6个参数，第6个参数anticlockwise表示绘制的方向，默认不写值为false：表示顺时针；将值设置为true：表示逆时针方向绘制。
PS：怎样，是不是越发感觉canvas好玩多了？加油！
