canvas基本操作画圆

来源：互联网发布：网站seo代码优化编辑：程序博客网时间：2024/05/16 06:16

用canvas画一个圆
在一个300*300的canvas（id为“myCanvas“）上，以坐标点（150, 150）为圆心，100为半径，画一个边框色为#4d4e53，填充色为#6a83ff的圆。

<!DOCTYPE html><html><head>    <title>canvas画圆</title>    <meta charset="utf-8" description="用canvas画一个圆在一个300*300的canvas（id为“myCanvas“）上，以坐标点（150, 150）为圆心，100为半径，画一个边框色为#4d4e53，填充色为#6a83ff的圆"></head><body>    <canvas id="myCanvas" width="300px" height="300px"></canvas>    <script type="text/javascript">        var myCanvas=document.getElementById('myCanvas');        var ctx=myCanvas.getContext('2d');        ctx.clearRect(0,0,300,300);//清空画布        ctx.beginPath();//开始路径        ctx.arc(150,150,100,0,Math.PI*2,true);//参数依次为圆心坐标x,y，半径，开始结束角，绘制方向顺时针        ctx.fillStyle='#6a83ff';//填充颜色        ctx.strokeStyle='#4d4e53';//边框颜色        ctx.fill();        ctx.stroke();        ctx.closePath();//关闭路径    </script></body></html>

阅读全文

0 0