캔버스를 사용하여 원을 그리는 방법은 무엇입니까? 캔버스를 사용하여 원을 그리는 세 가지 동적 구현 방법
- 不言원래의
- 2018-09-15 13:42:4711342검색
캔버스를 사용하여 브라우저에서 다양한 그림을 그릴 수 있다는 것을 모두 알아야 합니다. 그렇다면 캔버스를 사용하여 원을 그리는 방법은 무엇인가요? 이 기사에서는 캔버스를 사용하여 원을 그리는 세 가지 동적 구현 방법을 소개합니다.
먼저 캔버스에 원을 그리는 첫 번째 방법을 살펴보겠습니다. 캔버스 arc() 메서드를 사용하여 동적으로 원을 그립니다.
arc() 메서드를 사용하여 호/곡선을 만듭니다(원 또는 부분 원을 만드는 데 사용됨) ).
아이디어: 시작 각도와 끝 각도를 설정하여 제한하고 임시 각도 변수를 축적하여 애니메이션 효과를 얻습니다.
구문: context.arc(x,y,r,sAngle,eAngle,counterclockwise);
캔버스 그리기 원 구현 코드:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
#myCanvas{
margin: 0 auto;
display: block;
}
</style>
</head>
<body>
<canvas id="myCanvas">当前浏览器不支持canvas组件请升级！</canvas>
<script type="text/javascript">
//方法一：arc 动态画圆
var c = document.getElementById('myCanvas');
var ctx = c.getContext('2d');
var mW = c.width = 300;
var mH = c.height = 300;
var lineWidth = 5;
var r = mW / 2; //中间位置
var cR = r - 4 * lineWidth; //圆半径
var startAngle = -(1 / 2 * Math.PI); //开始角度
var endAngle = startAngle + 2 * Math.PI; //结束角度
var xAngle = 1 * (Math.PI / 180); //偏移角度量
var fontSize = 35; //字号大小
var tmpAngle = startAngle; //临时角度变量
//渲染函数
var rander = function(){
if(tmpAngle >= endAngle){
return;
}else if(tmpAngle + xAngle > endAngle){
tmpAngle = endAngle;
}else{
tmpAngle += xAngle;
}
ctx.clearRect(0, 0, mW, mH);
//画圈
ctx.beginPath();
ctx.lineWidth = lineWidth;
ctx.strokeStyle = '#1c86d1';
ctx.arc(r, r, cR, startAngle, tmpAngle);
ctx.stroke();
ctx.closePath();
//写字
ctx.fillStyle = '#1d89d5';
ctx.font= fontSize + 'px Microsoft Yahei';
ctx.textAlign='center';
ctx.fillText( Math.round((tmpAngle - startAngle) / (endAngle - startAngle) * 100) + '%', r, r + fontSize / 2);
requestAnimationFrame(rander);
};
rander();
</script>
</body>
</html>캔버스 그리기 원 렌더링:
다음으로 캔버스에 원을 그리는 두 번째 방법을 살펴보겠습니다. : 원을 그리려면 캔버스 Rotate() 메서드를 사용하고, 현재 그림을 회전하려면
rotate() 메서드를 사용하세요.
아이디어: 원점의 좌표를 (0, 0)으로 재정의한 후 지정된 범위 내에서 그래픽을 회전시켜 단일 점을 그립니다.
Grammar: context.translate(x,y);
캔버스 그리기 원 구현 코드:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
#myCanvas{
margin: 0 auto;
display: block;
}
</style></head><body>
<canvas id="myCanvas">当前浏览器不支持canvas组件请升级！</canvas>
<script type="text/javascript">
//方法二：rotate() 动态画圆
var c = document.getElementById('myCanvas');
var ctx = c.getContext('2d');
var mW = c.width = 300;
var mH = c.height = 300;
var lineWidth = 5;
var r = mW / 2; //中间位置
var cR = r - 4 * lineWidth; //圆半径
var startAngle = -(1 / 2 * Math.PI); //开始角度
var endAngle = startAngle + 2 * Math.PI; //结束角度
var xAngle = 1 * (Math.PI / 180); //偏移角度量
var fontSize = 35; //字号大小
var tmpAngle = startAngle; //临时角度变量
//渲染函数
var rander = function(){
if(tmpAngle >= endAngle){
return;
}else if(tmpAngle + xAngle > endAngle){
tmpAngle = endAngle;
}else{
tmpAngle += xAngle;
}
ctx.clearRect(0, 0, mW, mH); //画圈
ctx.save();
ctx.beginPath();
ctx.lineWidth = lineWidth;
ctx.strokeStyle = '#1c86d1';
ctx.translate(r, r); //重定义圆点
ctx.rotate(-Math.PI); //最上方为起点
for(var i = 0; i <= tmpAngle - startAngle; i += xAngle){ //绘图
ctx.moveTo(0, cR - lineWidth);
ctx.lineTo(0, cR);
ctx.rotate(xAngle); //通过旋转角度和画点的方式绘制圆
}
ctx.stroke();
ctx.closePath();
ctx.restore(); //写字
ctx.fillStyle = '#1d89d5';
ctx.font= fontSize + 'px Microsoft Yahei';
ctx.textAlign='center';
ctx.fillText( Math.round((tmpAngle - startAngle) / (endAngle - startAngle) * 100) + '%', r, r + fontSize / 2);
requestAnimationFrame(rander);
};
rander();
</script>
</body>
</html>캔버스 그리기 원 렌더링:
마지막으로 살펴보겠습니다. 세 번째 캔버스에 원을 그리는 방법: 원 좌표를 얻는 방법을 사용하여 원을 그립니다
아이디어: 특정 각도 오프셋에 따라 sin() 및 cos()를 사용하여 원 사이의 좌표 위치를 저장합니다. 배열의 시작 각도와 끝 각도를 지정한 다음 배열의 좌표점에 따라 그립니다.
캔버스로 원 그리기 구현 코드:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
#myCanvas{
margin: 0 auto;
display: block;
}
</style></head><body>
<canvas id="myCanvas">当前浏览器不支持canvas组件请升级！</canvas>
<script type="text/javascript">
//方法三：获取圆坐标方式 动态画圆
var c = document.getElementById('myCanvas');
var ctx = c.getContext('2d');
var mW = c.width = 300;
var mH = c.height = 300;
var lineWidth = 5;
var r = mW / 2; //中间位置
var cR = r - 4 * lineWidth; //圆半径
var startAngle = -(1 / 2 * Math.PI); //开始角度
var endAngle = startAngle + 2 * Math.PI; //结束角度
var xAngle = 2 * (Math.PI / 180); //偏移角度量
var cArr = []; //圆坐标数组
//初始化圆坐标数组
for(var i = startAngle; i <= endAngle; i += xAngle){
//通过sin()和cos()获取每个角度对应的坐标
var x = r + cR * Math.cos(i);
var y = r + cR * Math.sin(i);
cArr.push([x, y]);
} //移动到开始点
var startPoint = cArr.shift();
ctx.beginPath();
ctx.moveTo(startPoint[0], startPoint[1]); //渲染函数
var rander = function(){
//画圈
if(cArr.length){
ctx.lineWidth = lineWidth;
ctx.strokeStyle = '#1c86d1';
var tmpPoint = cArr.shift();
ctx.lineTo(tmpPoint[0], tmpPoint[1]);
ctx.stroke();
}else{
cArr = null;
return;
}
requestAnimationFrame(rander);
};
rander();
</script>
</body>
</html>캔버스로 원 그리기 렌더링:
위 글은 캔버스를 사용하여 그리는 세 가지 구현 방법입니다. 이 세 가지 방법은 모두 동적으로 구현되며 최종 효과는 동일합니다. 캔버스에 대해 더 알고 싶다면 HTML5 개발 매뉴얼을 참조하세요.
위 내용은 캔버스를 사용하여 원을 그리는 방법은 무엇입니까? 캔버스를 사용하여 원을 그리는 세 가지 동적 구현 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.