您的位置：首页 > Web前端 > HTML5

html5 canvas之绘制曲线

2012-05-19 13:21 567 查看

html5 canvas 提供了绘制一系列曲线的函数。如下：1、如果我们需绘制更加复杂的曲线路径，我们或许该用到贝塞尔或者2次方程曲线。

quadraticCurveTo(cp1x, cp1y, x, y)
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

两种曲线有何区别？我们可以参看一下右边这张图，2种曲线都有一个起点和终点（blue point），但是贝塞尔曲线仅有一个“control point”（red point），2次曲线则有2个。两个方法中的x和y参数都为曲线的终点坐标，cp1x和cp1y为第一control point的坐标，cp2x和cp2y为2次曲线的第二控制点。熟练运用2次曲线和贝塞尔曲线进行路径绘制，是一件蛮有挑战性的工作，因为它不像某些矢量绘图软件，比如ADOBE Illustrator等具有直观的视觉反馈，所以这使得我们在绘制一些复杂的曲线时会遇到一点小困难，不过如果你有耐心和时间的话，你肯定能绘制出许多复杂的曲线来。二次曲线示例：

// Quadratric curves example
ctx.beginPath();
ctx.moveTo(75,25);
ctx.quadraticCurveTo(25,25,25,62.5);
ctx.quadraticCurveTo(25,100,50,100);
ctx.quadraticCurveTo(50,120,30,125);
ctx.quadraticCurveTo(60,120,65,100);
ctx.quadraticCurveTo(125,100,125,62.5);
ctx.quadraticCurveTo(125,25,75,25);
ctx.stroke();

贝塞尔曲线示例：

// Bezier curves example
ctx.beginPath();
ctx.moveTo(75,40);
ctx.bezierCurveTo(75,37,70,25,50,25);
ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
ctx.bezierCurveTo(20,80,40,102,75,120);
ctx.bezierCurveTo(110,102,130,80,130,62.5);
ctx.bezierCurveTo(130,62.5,130,25,100,25);
ctx.bezierCurveTo(85,25,75,37,75,40);
ctx.fill();

2、如果要创建一个弧形的画布，我们可以使用 arc() 方法。

语法：arc(定义一个中心点，半径，起始角度，结束角度，和绘图方向：顺时针或逆时针)
代码：context.arc(centerX, centerY, radius, startingAngle, endingAngle, antiClockwise);HTML5 Canvas Arc 例子：

<!DOCTYPE HTML>
<html>
<head>
<title>html5 canvas Arc</title>
<style>
body {margin: 0px;padding: 0px;}
#myCanvas {border: 1px solid #9C9898; margin:0 auto;margin-top:200px; margin-left:100px;}
</style>
<script>
window.onload = function(){
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var centerX = 288;
var centerY = 160;
var radius = 75;
var startingAngle = 1.1 * Math.PI;
var endingAngle = 1.9 * Math.PI;
var counterclockwise = false;
context.arc(centerX, centerY, radius, startingAngle, endingAngle, counterclockwise);
context.lineWidth = 15;
context.strokeStyle = "black"; // line color
context.stroke();
};
</script>
</head>
<body>
<canvasid="myCanvas"width="578"height="200">
</canvas>
</body>
</html>

HTML5 Canvas Arc 说明：

看看上图中的外观。弧没有超过部分的一个假想的圆的周长。这个虚构的循环可以被定义centerX，centerY，和半径。
接下来，我们可以定义沿所定义的虚圆的周长有两个点的弧本身startingAngle和endingAngle。这两个角度定义的弧度和形式来自圆心和虚线相交的弧线，我们希望创建两端。
弧方法的最后一个参数是逆时针，这是一个可选的参数，它定义的两个结束点之间的 ARC路径的方向。除非另有规定，这种说法是默认为false，这将导致顺时针要绘制弧。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航