<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>canvas-圆弧</title>
<style>
#canvas{
border: 1px solid palevioletred;
}
</style>
<script>
window.onload = function (){
//获取到canvas元素
var canvas = document.getElementById('canvas');
//获取canvas中的画图环境
var context = canvas.getContext('2d');
//画笔移动初始位置
context.moveTo(100,100)
//画直线 .lineTo(终止X坐标,终止Y坐标);
// context.lineTo(300,100);
//画圆弧的方法:三个点 + 圆弧半径 = 圆弧 (其中:X0,Y0是基于上次的点,所以省去不传参)
//画圆弧 .arcTo(X1坐标,Y1坐标,X2坐标,Y2坐标,半径);
context.arcTo(350,100,350,150,50);
// context.lineTo(350,350);
context.arcTo(350,400,300,400,50);
// context.lineTo(100,400);
context.arcTo(50,400,50,350,50);
// context.lineTo(50,150);
context.arcTo(50,100,100,100,50);
// context.closePath();和context.stroke();自带一个机制:
// 在画圆弧时,会自动补上一条过上一次的点的相切线段
//所以,在绘制圆弧时可以省写 context.lineTo();方法
//描边/描线
context.stroke();
}
</script>
</head>
<body>
<canvas id="canvas" width="500px" height="500px">
</canvas>
</body>
</html>
canvas-圆弧
最新推荐文章于 2023-12-03 03:00:00 发布