如何使用html5 canvas绘制实心原形
更新:HHH   时间:2023-1-7


这篇文章主要介绍如何使用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绘制实心原形”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注天达云行业资讯频道!

返回web开发教程...