arc(cx,cy,radius,start_angle,end_angle,direction)
cx 水平坐标
cy 垂直坐标
radius 圆心
start-angel 圆周起始位置 （以圆心为参考点，不是以坐标原点为参考点。下面配图详细解释）
end_angle 圆周结束位置 Math.PI是半圆 Math.PI*2是整个圆 0.5为四分之一
direction 顺、逆时针 false为顺时针，true为逆时针（决定了圆弧的方向）
例：(点击查看效果）
<!DOCTYPE html>
<head>
<meta charset="UTF-8" />
<script>
function draw(id) {
var canvas = document.getElementById(id)
if (canvas == null) return false
var context = canvas.getContext('2d')
context.fillStyle = "#EEEEFF"
context.fillRect(0, 0, 400, 300)
var n = 0
for (var i = 0i <10i++) {
context.beginPath()
context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true)
context.closePath()
context.fillStyle = 'rgba(255, 0, 0, 0.25)'
context.fill()
}
}
</script>
</head>
<body onLoad="draw('canvas')">
<canvas id="canvas" width="400" height="300"/>
</body>
</html>
context.beginPath()
该方法不使用参数，通过调用该方法，开始路径的绘制。在几次循环的创建路径的过程中，每次开始创建是都要调用beginPath函数。
context.arc(x,y,radius,startAngle,endAngle,anticlockwise)
该方法使用六个参数，x为绘制圆形的起点横坐标，y为绘制圆形图形的起点坐标，radius为绘制圆形半径，
starAngle为开始角度（以圆心为参考点，绕圆心旋转，不是以坐标原点为参考点），endAngle为结束角度，anticlockwise为是否按顺时针方向进行绘制。
arc方法不仅可以用来绘制圆形，也可以用来绘制圆弧。
context.closePath()
将路径关闭后，路径的创建工作就完成了，但还没有真正绘制任何图形。
context.fillStyle = 'rgba(255, 0, 0, 0.25)'
context.fill()
使用创建好的路径绘制图形。
<!doctype html><html>
<style>
.img:hover{border-radius:50%}
</style>
<body>
<img src="xxx.jpg" class="img"/>
</body>
</html>
第一个 <canvas id="one" width="800" height="600">
第二个 <canvas id="canvas" width="800" height="600">
这就是区别！
所以第一组的 var canvas=document.getElementById('canvas')
也要相应改为 var canvas=document.getElementById('one')
这样就OK了
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）