五分钟学会 Canvas 基础（二） |
您所在的位置：网站首页 › canvas的方法有哪些 › 五分钟学会 Canvas 基础（二） |
五分钟学会 Canvas 基础（二）
|
请各位读者添加一下作者的微信公众号，以后有新的文章，将在微信公众号直接推送给各位，非常感谢。 
0. 前言
相信各位小伙伴读了之前的文章，对 Canvas 基础已经有了一定的认识和了解，但是大家也一定记得我在上一篇文章留了一个小的坑。 就是我没有告诉大家该如何去绘制圆，之所以没有说是因为绘制圆实际上是因为 CanvasRenderingContext2D 对象只提供了两个绘制矩形的方法，并没有直接提供绘制圆，椭圆等几何图形的方法。为了在 Canvas 上绘制更复杂的方法，必须在 Canvas 上启用路径，借用路径来绘制图形。 那么我们现在就一起来看一看，该如何使用路径来绘制圆等图形吧。 ------------------我是华丽的分割线---------------------- 下一篇文章预告， canvas 的各种图像特效。 另外，接下来一段时间，小编要享受一下假期，暂时不会给各位读者老爷更新啦，希望各位老爷耐心等待。 1.使用路径在 Canvas 上使用路径，可按照下面的步骤进行。 调用 CanvasRenderingContext2D 对象的 beginPath（）方法开始定义路径。 调用CanvasRenderingContext2D 的各种方法添加子路径。 调用CanvasRenderingContext2D 的 closePath 方法关闭路径。 调用CanvasRenderingContext2D 的fill（）或 stroke（）方法来填充路径或者绘制路径边框。那我们明确了该如何去进行应该怎么去使用路径，那么我们接下来就来介绍一下 canvas 中添加子路径的方法。 - - arc(float x,float y,float radius,float startAngle,float endAngle,boolean counterclockwise) 向 canvas 的当前路径上添加一段弧。绘制以 x ， y 为圆心，radius 为半径，从 startAngle 角度开始，到 endAngle 角度结束的圆弧。startAngle 和 endAngle 以角度为单位。 arcTo(float x1,float x2,float y1,float y2,float radius) 向 canvas 的当前路径上添加一段弧。与上一个方法不同的地方只是定义弧的方式不同。 bezierCurveTo(float cpX1, float cpY1, float cpX2, float cpY2, float x, float y) 在当前路径上添加一段贝塞尔曲线 quadraticCurveTo(float cpX, float cpY,float x,float y) 向 canvas 当前路径添加一段二次贝塞尔曲线 rect(float x, float y,float width, float height) 向 canvas 的当前路径上添加一个矩形方法就这些，但是参数就显得非常多了，咱们来一条条的来看看这些方法的具体使用吧。 1.1 绘制圆首先我们来学习下如何绘制圆，首先明确，我们应该去使用 arc ( ) 方法，那么我们该如何去使用这个方法呢？ 咱们，放“码”过来。 Document 绘制圆形 当前浏览器不支持 canvas // 获取 canvas 元素对应的 DOM 对象 var canvas_1 = document.getElementById("canvas_1"); // 获取在 canvas 上绘图的 canvasRenderingContent2D 对象 var ctx = canvas_1.getContext("2d"); // 我们多去绘制几个圆形，使用下 for 循环 for(var i = 0; i < 10 ; i++){ // 开始定义路径 ctx.beginPath(); // 添加一段圆弧 ctx.arc(i * 25,i * 25,(i + 1) * 8, 0, Math.PI * 2, true); // 关闭路径 ctx.closePath(); // 设置填充颜色 ctx.fillStyle = 'rgba(255,0,255,'+ (10 - i) * 0.1 + ')'; // 填充当前路径 ctx.fill(); }最后实现效果如下： 
Paste_Image.png
不知道小伙伴们是否看懂了上面的程序呢？ 如果没看懂也无所谓，咱们就来一起说一说上面内容中的难点。 首先说一下，Math.PI 实际上指代的就是 π，换而言之也就是 180°，那么我们上面使用的角度是 Math.PI * 2,也就是绘制了一个圆形。 之后再说一下 arc(float x,float y,float radius,float startAngle,float endAngle,boolean counterclockwise)这个方法。 里面一共有 6 个参数，这六个参数实际上对应的是： - - float x 指定圆弧的圆心的 X 坐标 float y 指定圆弧的圆心的 Y 坐标 float radius 指定圆弧的半径 float startAngle 设置圆弧的开始角度 float endAngle 设置圆弧的结束角度 boolean counterclockwise 设置是否顺时针旋转这样不知道大家对我们绘制圆是否清楚明白了呢？ 如果有任何疑问请及时留言回复呦。 1.2 绘制圆角矩形我们之前已经学习过绘制圆形，也学习过绘制矩形，甚至我们也可以通过 lineJoin 去对我们的元素的圆角去进行修改。 但是，固定的东西我们不需要，我们真正需要的是可以自定义，可以根据我们想要的效果能够随意订制的内容。 为了做到这个目的，我们还可以去使用 arcTo 来去绘制一段圆弧。 Document 绘制圆形 当前浏览器不支持 canvas /* 该方法负责绘制圆角矩形 x1 , y2 ： 圆角矩形左上角的坐标 width，height：控制圆角矩形的宽度和高度 radius：控制圆角矩形的四个圆角的半径 */ function creatRoundRect(ctx, x1, y1, width, height, radius){ // 移动到左上角的开始点 ctx.moveTo(x1 + radius, y1); // 添加一条连接开始点到右上角的线段 ctx.lineTo(x1 + width - radius, y1); // 添加右上角的一段圆弧 ctx.arcTo(x1 + width, y1, x1 + width, y1 + radius, radius); // 添加一条连接到右下角的线段 ctx.lineTo(x1 + width, y1 + height - radius); // 添加右下角的一段圆弧 ctx.arcTo(x1 + width, y1 + height, x1 + width - radius, y1 + height, radius); // 添加一条由右下角连接到左下角的线段 ctx.lineTo(x1 + radius, y1 + height); // 添加左下的圆弧 ctx.arcTo(x1, y1 + height, x1, y1 + height - radius,radius); // 添加一条由左下角连接到左上角的线段 ctx.lineTo(x1, y1 + radius); // 添加一段圆弧 ctx.arcTo(x1, y1, x1 + radius, y1, radius); ctx.closePath(); } // 获取 canvas 元素对应的 DOM 对象 var canvas_1 = document.getElementById("canvas_1"); // 获取在 canvas 上绘图的 canvasRenderingContent2D 对象 var ctx = canvas_1.getContext("2d"); ctx.lineWidth = 3; creatRoundRect(ctx, 30, 30, 200, 100, 20); ctx.stroke();注意，我在这里分别绘制了四条线和四个弧度角，并且让他们首尾相连，以此来达到绘制矩形框的作用。 其次就是专门去封装了一个函数，用于绘制圆角矩形，回头有需要的小伙伴可以直接自行粘贴呦。 
Paste_Image.png
1.3 绘制多角形
不知道大家对之前绘制三角形是否还记得？ 我们在绘制三角形的时候，主要是去使用 lineTo 和 moveTo 这两个方法，可是我们在生活中遇到的图形远远不止这么几种图形。 那么我们今天就来学习一下如何去绘制多角形。 Document 绘制多角形 当前浏览器不支持 canvas /* 该方法用于绘制多角形 n：该参数通常设置为奇数，控制绘制 N 角星 dx、dy：控制 N 角星的位置 size：控制 N 角星的大小 */ function creatStar(context, n, dx, dy, size){ // 开始创建路径 context.beginPath(); var dig = Math.PI / n * 4; context.moveTo(dx, y + dy); for(var i = 0; i |
【本文地址】
今日新闻 |
推荐新闻 |