[Canvas绘图]第12节帅哥降临

(1) 用贝塞尔曲线绘制肖像

实现步骤&＃xff1a;

上一节使用了几张美女图片&＃xff0c;有美女就必须要有帅哥&＃xff0c;这就让我想为自己画张肖像&＃xff0c;于是结果是这样的&＃xff1a;

这张肖像完全是依照我自己的样子来画的&＃xff0c;大大的耳朵&＃xff0c;明亮的眼睛&＃xff0c;整齐秀丽的眉毛&＃xff0c;略廋的脸颊&＃xff0c;见图如见我。在这里就算和大家见过面了。

这个图当然是用代码画的&＃xff0c;代码如下&＃xff0c;包装以后再做。

/**
* &＃64;usage 贝塞尔曲线绘图
* &＃64;author mw
* &＃64;date 2015年12月04日 星期五 10:52:42
* &＃64;param
* &＃64;return
*
*/
function myplot() {plot.init();setPreference();setSector(1,1,1,1);//axis(0, 0, 180);var h &＃61; -80;//头发hair(0, h, 115);//左眉eyebow(-20, h&＃43;100, 50, 0);//右眉eyebow(20, h&＃43;100, 50, 1); //左眼eye(-50, h&＃43;110, 50, 0, -Math.PI/24);//右眼eye(50, h&＃43;110, 50, 1, Math.PI/24); face(-5, h&＃43;70, 220); nose(0, h&＃43;110, 85); mouth(0, h&＃43;210 , 50);//左耳ear(-118, h&＃43;80, 120, 0);//右耳ear(108, h&＃43;80, 120, 1);plot.fillText("帅哥降临 真mw肖像", 100, 150, 300);plot.fillText("Hello 大家好&＃xff0c;我是mw", 100, -150, 300);}/**
* &＃64;usage 绘制耳朵
* &＃64;author mw
* &＃64;date 2015年12月04日 星期五 15:50:18
* &＃64;param
* &＃64;return
*
*/function ear(x, y, r, left) {r &＃61; Math.abs(r);plot.save();left &＃61; left ? left : 0;if (left &＃61;&＃61; 1) {plot.translate(x, y).rotate(Math.PI/ 8) .moveTo(0,0.3 * r).bezierCurveTo(r * 0.2, 0, r *0.4, r * 0.3, r *0.15, r * 0.75).quadraticCurveTo(r * 0.2, 0.98 * r, 0.02 * r, r) .stroke();//内圈耳plot.moveTo(0.05*r,0.3 * r).bezierCurveTo(r * 0.15, 0.2 * r, r *0.3, r * 0.2, r *0.078, r * 0.85).stroke();plot.restore();}else {plot.translate(x, y).rotate(-Math.PI/ 8) .moveTo(0,0.3 * r).bezierCurveTo(-r * 0.2, 0, -r *0.4, r * 0.3, -r *0.15, r * 0.75).quadraticCurveTo(-r * 0.2, 0.98 * r, -0.02 * r, r) .stroke();//内圈耳plot.moveTo(-0.05*r,0.3 * r).bezierCurveTo(-r * 0.15, 0.2 * r, -r *0.3, r * 0.2, -r *0.078, r * 0.85).stroke();plot.restore();}}/**
* &＃64;usage 绘制嘴
* &＃64;author mw
* &＃64;date 2015年12月04日 星期五 15:05:52
* &＃64;param
* &＃64;return
*
*/function mouth(x, y, r) {plot.save().translate(x-.5 * r, y-r / 6).beginPath().moveTo(0, 0).bezierCurveTo(r / 3, r/16, r * 2 / 3, r/ 16, r, 0).bezierCurveTo(r * 2 / 3, r/3, r/3, r/3, 0, 0).closePath().stroke().restore();
}/**
* &＃64;usage 绘制鼻子
* &＃64;author mw
* &＃64;date 2015年12月04日 星期五 14:46:42
* &＃64;param
* &＃64;return
*
*/function nose(x, y, r) {var x0 &＃61; 0;var y0 &＃61; 0;plot.save().translate(x, y).moveTo(-2, 0).quadraticCurveTo(-0.1 * r, 0.8 * r,-0.16 * r, 0.9 * r).bezierCurveTo(-0.15* r, 0.9 * r,-0.08 * r, 0.8 * r,0, 0.95 * r).stroke();plot.moveTo(2, 0).quadraticCurveTo(0.08 * r, 0.8 * r,0.16 * r, 0.9 * r).bezierCurveTo(0.15* r, 0.9 * r,0.08 * r, 0.8 * r,0, 0.95 * r).stroke();plot.restore();}/**
* &＃64;usage 绘制脸
* &＃64;author mw
* &＃64;date 2015年12月04日 星期五 14:31:37
* &＃64;param
* &＃64;return
*
*/function face(x, y, r) {var x0 &＃61; x - r / 2;var y0 &＃61; y;var xstep &＃61; r / 3;var ystep &＃61; xstep * 1.8;plot.moveTo(x0, y0).bezierCurveTo(x0 &＃43; xstep, y0 &＃43; 2 * ystep,x0 &＃43; 2 * xstep, y0 &＃43; 2 * ystep,x0 &＃43; 3 * xstep, y0) .stroke();}/**
* &＃64;usage 绘制眼睛
* &＃64;author mw
* &＃64;date 2015年12月04日 星期五 13:55:12
* &＃64;param
* &＃64;return
*
*/function eye(x, y, r, left, angle) {plot.save();left &＃61; left ? left : 0;angle &＃61; angle ? angle : 0;var x0 &＃61; -r / 2;var y0 &＃61; 0;var xstep &＃61; r / 3;var ystep &＃61; xstep / 1.5;plot.translate(x, y).rotate(-angle) .setFillStyle(&＃39;black&＃39;).beginPath().moveTo(x0, y0).bezierCurveTo(x0 &＃43; xstep, y0 &＃43; ystep, x0 &＃43; 2 * xstep, y0 &＃43; ystep, x0 &＃43; 3 * xstep, y0).bezierCurveTo(x0 &＃43; 2 * xstep, y0-ystep, x0 &＃43; xstep, y0-ystep, x0, y0).closePath().stroke();fillCircle(x0 &＃43; 1.5 * xstep, y0, ystep*0.68);plot.setFillStyle(&＃39;white&＃39;);//这个值取0是左眼&＃xff0c;取1是右眼if (left &＃61;&＃61; 0) {fillCircle(x0 &＃43; 1.5 * xstep - 0.28 * xstep, y0- ystep*0.2, ystep*0.2);}else {fillCircle(x0 &＃43; 1.5 * xstep &＃43; 0.28 * xstep, y0- ystep*0.2, ystep*0.2);}plot.restore();}
/**
* &＃64;usage 绘制眉毛
* &＃64;author mw
* &＃64;date 2015年12月04日 星期五 12:40:57
* &＃64;param
* &＃64;return
*
*///眉毛
function eyebow(x, y, r, left, thick, angle) {plot.save().setLineWidth(1); r &＃61; Math.abs(r);left &＃61; left ? left : 0;//从x轴逆时针偏移角度angle &＃61; angle ? -angle : (left ? -Math.PI/12 : -Math.PI/16);//粗细thick &＃61; thick ? thick : 30;var xstep &＃61; r / 3;var ystep &＃61; -r/10; var thick &＃61; 30;var x0 &＃61; x ;var y0 &＃61; y;//左眉if (left &＃61;&＃61; 0) { xstep &＃61; -xstep;angle &＃61; -angle;}for (var i &＃61; 0; i * &＃64;usage 绘制头发
* &＃64;author mw
* &＃64;date 2015年12月04日 星期五 12:40:57
* &＃64;param
* &＃64;return
*
*///头发function hair(xCenter, yCenter, r) {plot.save().setLineWidth(1); var x &＃61; 0;var y &＃61; 0;var len &＃61; r;var arr &＃61; new Array();var thick &＃61; r / 2;for (var i &＃61; -thick; i 0) {x &＃61; xCenter &＃43; r/thick * arr.shift();y &＃61; yCenter &＃43; arr.shift();for (var i &＃61; 0; i <10; i&＃43;&＃43;) {plot.moveTo(x - xstep * (Math.random()-0.5), y).bezierCurveTo(x &＃43; xstep * (Math.random()-0.5), y &＃43; ystep,x - 2 * (Math.random()-0.6) * xstep , y &＃43; (2 &＃43; 2 * (Math.random()-0.5)) * ystep,x - 20 * xstep * (Math.random()-0.3), y &＃43; (4 &＃43; 2 * (Math.random()-0.5)) * ystep);}}plot.stroke();plot.restore();}
本节就到这里。