html5网页设计作业中画布中使用路径_学生网页设计制作作业_网页制作作业成品_网页设计作业_计算机毕业设计_php作业_asp作业_网页模板

热点资讯更多

html5网页设计作业中画布中使用路径

我们在制作网页设计作业时，图形绘制是有必要的，下面我们介绍在画布中使用路径的方法

使用arc方法绘制圆形
要想绘制其他图形，需要使用路径。同绘制矩形一样，绘制开始时还是要取得图形上下文，然后需要执行如下步骤。
开始创建路径使用图形上下文对象的beginPath()方法，该方法的定义如下所示
context.beginPath()
该方法不使用参数。通过调用该方法，开始路径的创建
创建图像的路径
使用图形上下文对象的act方法。该方法的定义如下所示。
context.arc(x,y,radius, startAngle, endAngle,anticlockwise)
该方法使用六个参数，x为绘制圆形的起点横坐标，y为绘制圆形的起点纵坐标，radius为圆形半径，startAngle为开始角度，endAngle为结束角度，anticlockwise为是否按顺时针方向进行绘制。在canvas API中，绘制半径与弧时指定的参数为开始弧度与结束弧度，如果习惯使用角度，请使用如下所示的方法将角度转换为弧度。
var radians =degrees*math.PI/180
其中math.PI表示角度为180度，math.PI*2表示角度为360度。arc方法不仅可以用来绘制圆形，也可以用来绘制圆弧。因此，使用时必须要指定开始角度与结束角度。因为这两个角度决定了弧度。Anticlockwise参数为一个布尔值的参数，参数值为true时，按顺时针绘制；参数值为false时，按逆时针方向绘制。

关闭路径
路径创建完成后，使用图形上下文对象的closePath方法将路径关闭。该方法定义如下所示。
context.closePath();
将路径关闭后，路径的创建工作就完成了，但是需要注意的是，这时只是路径创建完毕而已，还没有真正绘制图形。进行圆形绘制，并设定绘制样式。实现的代码如下所示。
context.fillStyle = 'rgba(255, 0, 0, 0.25)';
context.fill();

使用moveTo与lineTo路径绘制火柴人
moveTo（x，y）：不绘制，只是将当前位置移动到新的目标坐标（x，y）。
lineTo（x，y）：不仅将当前位置移动到新的目标坐标（x，y），而且在两个坐标之间画一条直线。
简而言之，上面两个函数的区别在于：moveTo就像是提起画笔，移动到新位置，而lineTo告诉canvas用画笔从纸上的旧坐标画条直线到新坐标。需要提醒大家注意的是，不管调用它们哪一个，都不会真正画出图形，因为我们还没有调用stroke或者fill函数。目前，我们只是在定义路径的位置，以便后面绘制时使用。我们再来看一个特殊的路径函数叫做closePath。这个函数的行为和lineTo很像，唯一的差别在于closePath会将路径的起始坐标自动作为目标坐标。closePath还会通知canvas当前绘制的图形已经闭合或者形成了完全封闭的区域，这对将来的填充和描边都非常有用。

贝塞尔和二次方曲线
绘制贝塞尔曲线主要使用bezierCurveTo方法。该方法可以说是lineTo的曲线版，将从当前坐标点到指定坐标点中间的贝塞尔曲线追加到路径中。该方法的定义如下所示。
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
该方法使用六个参数。绘制贝塞尔曲线的时候，需要两个控制点，cp1x为第一个控制点的横坐标，cp1y为第一个控制点的纵坐标；cp2x为第二个控制点的横坐标，cp2y为第二个控制点的纵坐标；x为贝塞尔曲线的终点横坐标，y为贝塞尔曲线的终点纵坐标。

绘制二次样条曲线
绘制二次样条曲线，使用的方法是quadraticCurveTo。该方法的定义如下所示。
quadraticCurveTo(cp1x, cp1y, x, y)
两种方法的区别如下图所示。它们都是一个起点一个终点（图中的蓝点），但二次方贝塞尔曲线只有一个（红色）控制点点）而三次方贝塞尔曲线有两个。参数 x 和 y 是终点坐标，cp1x 和cp1y 是第一个控制点的坐标，cp2x 和 cp2y 是第二个的。

上一篇：多媒体元素重要事件

下一篇：网页设计作业中的样式与颜色

分享到： QQ空间新浪微博腾讯微博人人网更多