您的位置：首页 > 其它

如何利用canvas绘制一个三分园

2017-12-12 15:59 375 查看

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>$Title$</title>
</head>
<body>
<canvas id="canvas" width="800" height="600" style="border:1px solid red"></canvas>
</body>
<script>
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.fillStyle='#00A2E8';
ctx.moveTo(300,300);
//1、将圆心的位置和圆弧的起点连成直线
ctx.arc(300,300,150,5*Math.PI/3,Math.PI/6);
//2、fill方法自动闭合路径，会将圆弧的终点和圆心的位置连成一条直线
ctx.fill();

ctx.beginPath();//会开辟新路径：不会记忆上一次绘制的终点
ctx.fillStyle="#3F48CC";
ctx.moveTo(300,300);
ctx.arc(300,300,150,Math.PI/6,5*Math.PI/6);
ctx.fill();

ctx.beginPath();//会开辟新路径：不会记忆上一次绘制的终点
ctx.fillStyle="#22B14C";
ctx.moveTo(300,300);
ctx.arc(300,300,150,5*Math.PI/6,5*Math.PI/3);
ctx.fill();

function draw(circleX,circleY,radius,startRadian,endRadian,color){
ctx.beginPath();//会开辟新路径：不会记忆上一次绘制的终点
ctx.fillStyle=color;
ctx.moveTo(circleX,circleY);
ctx.arc(circleX,circleY,radius,startRadian,endRadian);
ctx.fill();
}
</script>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航