领先的免费Web技术教程，涵盖HTML到ASP.NET

网站首页 > 知识剖析 正文

canvas-3圆的绘制（canvas绘制圆形时,绘制步骤有哪些?）

nixiaole 2025-07-01 22:26:29 知识剖析 43 ℃



<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>canvas-3圆的绘制</title>

</head>

<body>

<canvas id="canvas1" width="600" height="600" style="border:1px solid #000000"></canvas>

<script type="text/javascript">

var canvas1 = document.querySelector("#canvas1") // 1.找到画布对象

var ctx = canvas1.getContext("2d") // 2.上下文对象（画笔）

// (圆心x：300, 圆心y：300, 半径r：100, 开始角度：0 , 结束角度：360度, 默认为false（可不写）是顺时针，true为逆时针)

ctx.arc(300, 300, 100, 0, 2*Math.PI)

ctx.stroke()

</script>


</body>

</html>

Tags：

猜你喜欢

最近发表
标签列表