캔버스로 타원을 그리는 방법 캔버스로 타원을 그리는 방법 요약
- 不言원래의
- 2018-09-30 09:17:3912422검색
HTML5의 캔버스 요소는 브라우저에서 그림을 그리는 데 사용되므로 캔버스는 다양한 그림을 그릴 수 있습니다. 따라서 오늘은 캔버스가 타원을 그리는 방법을 살펴보겠습니다. .
먼저 타원
ellipse(x, y, radiusX, radiusY,rotation, startAngle, endAngle, anticlockwise)을 그리는 캔버스 고유의 방법을 살펴보겠습니다.
매개변수(왼쪽에서 오른쪽으로):
(시작점 x, 시작점 y, 반지름 x, 반지름 y, 회전 각도, 시작 각도, 결과 각도, 시계 방향 또는 시계 반대 방향)
us Let's 캔버스와 함께 제공되는 타원을 그리는 방법에 대한 코드를 살펴보세요:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>椭圆</title>
</head>
<body>
<canvas id="canvas" style="border:1px solid #aaa;display:block;margin:50px auto;">
当前浏览器不支持Canvas，请更换浏览器后再试
</canvas>
<script>
window.onload = function(){
var canvas = document.getElementById("canvas");
var ctx=canvas.getContext('2d');
canvas.width = 800;
canvas.height = 800;
if(ctx.ellipse){
ctx.ellipse(300,300,200,100,0,0,Math.PI*2);
ctx.fillStyle="blue";
ctx.strokeStyle="#000";
ctx.fill();
ctx.stroke();
}else{
alert("no ellipse!");
}
}
</script>
</body>
</html>캔버스로 그린 타원의 효과는 다음과 같습니다:
참고: 이 방법은 현재 다음에서만 지원되는 것 같습니다. Google 및 ellipse()는 다른 브라우저에는 아직 존재하지 않습니다.
위 방법은 다른 브라우저를 지원할 수 없으므로 타원을 그리는 다른 캔버스 방법을 살펴보겠습니다.
1. 캔버스를 사용하여 원을 그려 타원을 그립니다.
이 방법은 캔버스의 크기 조정을 구현할 수 있는 캔버스 함수 스케일을 사용합니다. 크기 조정에는 가로 방향과 세로 방향이 있습니다. 코드에서는 캔버스가 가로 방향으로 확대되지만 세로 방향은 변경되지 않습니다. 따라서 원래 원호로 그려진 원은 타원이 됩니다.
캔버스에 타원을 그리는 코드는 다음과 같습니다.
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
var centerX = 0;
var centerY = 0;
var radius = 50;
// save state
context.save();
// translate context
context.translate(canvas.width / 2, canvas.height / 2);
// scale context horizontally
context.scale(2, 1);
// draw circle which will be stretched into an oval
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
// restore to original state
context.restore();
// apply styling
context.fillStyle = 'pink';
context.fill();
context.lineWidth = 5;
context.strokeStyle = 'black';
context.stroke();
</script>
</body>
</html>캔버스 타원 효과는 다음과 같습니다.
베지어 곡선을 사용하여 캔버스로 타원을 그립니다
이것 방법 타원을 그리는 것은 타원을 4개의 베지어 곡선으로 나누고 이를 연결하여 타원을 그리는 것입니다.
캔버스 그리기 타원의 코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>椭圆</title>
</head>
<body>
<canvas id="canvas" style="border:1px solid #aaa;display:block;margin:50px auto;">
当前浏览器不支持Canvas，请更换浏览器后再试
</canvas>
<script>
var canvas = document.getElementById("canvas");
canvas.width = 600;
canvas.height = 600;
var context = canvas.getContext("2d");
context.lineWidth = 10;
context.strokeStyle="black";
BezierEllipse2(context, 470, 200, 100, 20); //椭圆
function BezierEllipse2(ctx, x, y, a, b){
var k = .5522848,
ox = a * k, // 水平控制点偏移量
oy = b * k; // 垂直控制点偏移量</p> <p> ctx.beginPath();
//从椭圆的左端点开始顺时针绘制四条三次贝塞尔曲线
ctx.moveTo(x - a, y);
ctx.bezierCurveTo(x - a, y - oy, x - ox, y - b, x, y - b);
ctx.bezierCurveTo(x + ox, y - b, x + a, y - oy, x + a, y);
ctx.bezierCurveTo(x + a, y + oy, x + ox, y + b, x, y + b);
ctx.bezierCurveTo(x - ox, y + b, x - a, y + oy, x - a, y);
ctx.closePath();
ctx.stroke();
};
</script>
</body>
</html>캔버스 타원 효과는 다음과 같습니다.
캔버스 그리기 타원은 두 개의 베지어 곡선을 사용하여 타원을 그립니다.
캔버스 그림 ellipse 너비/0.75)/2의 코드입니다.
이 기사는 여기서 끝납니다. 더 흥미로운 콘텐츠를 보려면 PHP 중국어 웹사이트를 주목하세요.위 내용은 캔버스로 타원을 그리는 방법 캔버스로 타원을 그리는 방법 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!