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

来源：互联网发布：省市区县乡镇数据库编辑：程序博客网时间：2024/06/05 11:42

<!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>

阅读全文

0 0