如何使用html5canvas绘制实心原形

这篇文章主要介绍如何使用html5 canvas绘制实心原形，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

为合江等地区用户提供了全套网页设计制作服务，及合江网站建设行业解决方案。主营业务为成都网站制作、成都网站建设、合江网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

使用 html5 canvas 绘制实心原形。

<style>
    #canvas{
      width: 500px;
      height: 500px;
    }
</style>
<body>
  <canvas id="canvas"></canvas>
</body>
<script>
    var canvas=document.getElementById("canvas");
 var ctx=canvas.getContext("2d");
 //画一个空心圆
 ctx.beginPath();
 // arc()方法是创建弧/曲线(用于创建圆或部分圆)
 // context.arc(x,y,r,sAngle,eAngle,counterclockwise);
 // 起始角为 0
 // 结束角为 2*Math.PI
 ctx.arc(100,75,50,0,2*Math.PI);
 ctx.lineWidth=5;
 ctx.strokeStyle="green";
 // 使用 stroke()或fill()方法在画布上绘制实际的弧
 ctx.stroke();//画空心圆
 ctx.closePath();
 //画一个实心圆
 // ctx.beginPath();
 // ctx.arc(200,100,50,0,360,false);
 // ctx.fillStyle="red";//填充颜色,默认是黑色
 // ctx.fill();//画实心圆
 // ctx.closePath();
 //空心和实心的组合
 // ctx.beginPath();
 // ctx.arc(100,100,50,0,360,false);
 // ctx.fillStyle="red";
 // ctx.fill();
 // ctx.strokeStyle="green";
 // ctx.stroke();
 // ctx.closePath();
</script>

以上是“如何使用html5 canvas绘制实心原形”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！