前几天更新了第二篇，现在趁热打铁最后一点知识

1.绘制弧线
1.1.绘制一段弧
1.2.绘制圆角矩形
1.3.绘制一个棋盘格

2.另一种绘制弧线的方法
2.1.用arcTo()绘制一轮弯月
2.2.将绘制的弯月挂到星空上

3.二次贝塞尔曲线
3.1.用二次贝塞尔曲线绘制一轮弯月

4.三次贝塞尔曲线
4.1.用三次贝塞尔曲线绘制草地

5.绘制文字

效果展示.png

1. 绘制弧线 1.1 绘制一段弧

//在画布上创建一段圆弧： context.arc( x, y, r, start, end, [anticlockwise]) //圆心x坐标，圆心y坐标，起始角度，结束角度，是否逆时针绘制

默认情况下anticlockwise = false，即顺时针绘制

起始角度，和结束角度单位都是弧度

弧度.png

完整代码请戳Lesson3/demo1.html

window.onload = function () { var canvas = document.getElementById("canvas"); canvas.width = 1000; canvas.height = 500; var context = canvas.getContext("2d"); context.lineWidth = 5; context.strokeStyle = "#005588"; //第一行 for (var i = 0; i < 10; i++) { context.beginPath(); context.arc(50 + i * 100, 60, 40, 0, 2 * Math.PI*(i + 1) / 10); context.stroke(); } //第二行 for (var i = 0; i < 10; i++) { context.beginPath(); context.arc(50+ i * 100, 180, 40, 0, 2 * Math.PI*(i + 1) / 10); context.closePath(); context.stroke(); } //第三行 for (var i = 0; i < 10; i++) { context.beginPath(); context.arc(50 + i * 100, 300, 40, 0, 2 * Math.PI*(i + 1) / 10,true); context.stroke(); } //第四行 for (var i = 0; i < 10; i++) { context.beginPath(); context.arc(50+ i * 100, 420, 40, 0, 2 * Math.PI*(i + 1) / 10,true); context.closePath(); context.stroke(); } }

这十段弧线是从 0 pi起始，绘制1/10段弧线，2/10段弧线,3/10段弧线......

第一行弧线 顺时针绘制

第二行弧线 顺时针绘制，并且使用了closePath(),使得首尾连接

第三行弧线 逆时针绘制

第四行弧线 逆时针绘制，并且使用了closePath(),使得首尾连接

绘制弧线.png

1.2 绘制圆角矩形

我们可以分为 八部分绘制 ，如果设置 左上角的圆心坐标为 (0，0) ,四个1／4圆的半径是r,那么圆心坐标如下:

圆角矩形.png

完整代码请戳Lesson3/demo2.html

window.onload = function () { var canvas = document.getElementById("canvas"); canvas.width = 800; canvas.height = 600; var context = canvas.getContext("2d"); strokeRoundRect(context, 200, 100, 300,200, 50) }; 　　//绘制圆角矩形 function strokeRoundRect(cxt, x, y, width, height, r, lineWidth,strokeColor) { cxt.save(); cxt.translate(x, y); pathRoundRect(cxt, width, height, r); cxt.lineWidth = lineWidth || 1; cxt.strokeStyle = strokeColor || '#005588'; cxt.stroke(); cxt.restore(); } 　　//绘制圆角矩形的路径 function pathRoundRect(cxt, width, height, r) { cxt.beginPath(); //右下的圆 cxt.arc(width - r, height - r, r, 0,Math.PI / 2); //下面的线 cxt.lineTo(r, height); //左下的圆 cxt.arc(r, height - r, r, Math.PI / 2, Math.PI); //左边的线 cxt.lineTo(0, r); //左上的圆 cxt.arc(r, r, r, Math.PI, Math.PI * 3 / 2); //上边的线 cxt.lineTo(width - r, 0); //右上的圆 cxt.arc(width - r, r, r, Math.PI * 3 / 2, Math.PI * 2); //右边的线，用closePath来首尾连接 cxt.closePath(); } 1.3 绘制一个棋盘格

完整代码请戳Lesson3/demo3.html

window.onload = function () { var canvas = document.getElementById("canvas"); canvas.width = 1000; canvas.height = 600; var context = canvas.getContext("2d"); 　　 　　//先填充一个大的圆角矩形 fillRoundRect(context, 150, 50, 500,500, 10, "#bbada0"); //在填充4行4列的小圆角矩形 for(var i = 0; i< 4;i++) { for(j = 0;j< 4;j++) { fillRoundRect(context, 170+i*120, 70+j*120, 100,100, 6, "#ccc0b3"); } } }; 　　//填充圆角矩形 function fillRoundRect(cxt, x, y, width, height, r, fillColor) { cxt.save(); cxt.translate(x, y); pathRoundRect(cxt, width, height, r); cxt.fillStyle = fillColor || '#005588'; cxt.fill(); cxt.restore(); } 　　//绘制圆角矩形的路径 function pathRoundRect(cxt, width, height, r) { cxt.beginPath(); //右下 cxt.arc(width - r, height - r, r, 0,Math.PI / 2); //下面 cxt.lineTo(r, height); //左下 cxt.arc(r, height - r, r, Math.PI / 2, Math.PI); //左边 cxt.lineTo(0, r); //左上 cxt.arc(r, r, r, Math.PI, Math.PI * 3 / 2); //上边 cxt.lineTo(width - r, 0); //右上 cxt.arc(width - r, r, r, Math.PI * 3 / 2, Math.PI * 2); //右边 cxt.closePath(); }