害怕-HTML5高清重制版

2-28 3,526 views

昨天发布的文章介绍了贝塞尔曲线描绘工具,就拿最近挺火的害怕表情图来写一下,canvas描绘简单图片的过程(其实复杂的也能画,只是时间太长):

首先在网上搜一张普通的害怕高清重制图,如下:

2f1857b5c9ea15ce110f266cb1003af33b87b291

 

表情的画质真是感人。。。

 

所用工具:

1.Photoshop_CS5  ,调出信息窗口用于找坐标

QQ截图20160228150040

2.贝塞尔曲线绘制工具 ,简称bezier工具,使用方法见上篇文章,用于绘制贝塞尔曲线。

 

借助代码,一步步看看绘图过程:

 

由于初始是透明背景,故用白色填充

  1. var canvas=document.querySelector("canvas");
  2. var ctx=canvas.getContext("2d");
  3. ctx.beginPath();
  4. ctx.fillStyle="#fff";
  5. ctx.fillRect(0,0,600,500);
  6. ctx.closePath();

 

墙壁那三根坐标线 -_-||

  1. ctx.lineWidth=8;
  2. ctx.beginPath();
  3. ctx.moveTo(149,44);
  4. ctx.lineTo(149,383);
  5. ctx.lineTo(352,393);
  6. ctx.moveTo(149,383);
  7. ctx.lineTo(22,444);
  8. ctx.stroke();
  9. ctx.closePath();

1

身体轮廓线,这个要用好多贝塞尔曲线,大概描绘就行了

  1. ctx.fillStyle="#fff";
  2. ctx.beginPath();
  3. ctx.moveTo(154,258);
  4. ctx.quadraticCurveTo(145,262,129,284);
  5. ctx.quadraticCurveTo(121,335,149,299);
  6. ctx.quadraticCurveTo(160,285,161,299);
  7. ctx.lineTo(161,354);
  8. ctx.quadraticCurveTo(162,373,167,379);
  9. ctx.quadraticCurveTo(185,428,204,377);
  10. ctx.bezierCurveTo(220,372,228,371,240,380);
  11. ctx.bezierCurveTo(292,431,283,371,265,361);
  12. ctx.quadraticCurveTo(258,326,259,308);
  13. ctx.quadraticCurveTo(261,278,279,306);
  14. ctx.quadraticCurveTo(303,322,295,291);
  15. ctx.quadraticCurveTo(283,272,253,246);
  16. ctx.fill();
  17. ctx.stroke();
  18. ctx.closePath();

2

头部圆形,渐变颜色跳不到满意效果,凑合着好了

  1. ctx.lineWidth=5;
  2. ctx.strokeStyle='#ec983e';
  3. ctx.save();
  4. //头部圆形阴影效果
  5. ctx.shadowOffsetX = 0;
  6. ctx.shadowOffsetY = 0;
  7. ctx.shadowBlur = 20;
  8. ctx.shadowColor = 'rgba(0, 0, 0, 0.5)';
  9. //脸部渐变颜色
  10. var radial = ctx.createRadialGradient(208,160,40,198,189,84);
  11. radial.addColorStop(0,'#fce38f');
  12. radial.addColorStop(0.5,'#fbd789');
  13. radial.addColorStop(0.96,'#f9a640');
  14. radial.addColorStop(1,'#ef8b2d');
  15. ctx.fillStyle=radial;
  16. //头部圆形
  17. ctx.beginPath();
  18. ctx.arc(198,189,84,0,Math.PI*2,true);
  19. ctx.fill();
  20. ctx.restore();
  21. ctx.stroke();
  22. ctx.closePath();

3

 

眉毛

  1. ctx.fillStyle="#4c4b46";
  2. ctx.beginPath();
  3. ctx.moveTo(134,123);
  4. ctx.bezierCurveTo(143,101,171,111,164,130);
  5. ctx.bezierCurveTo(157,106,132,121,134,123);
  6. ctx.moveTo(229,131);
  7. ctx.bezierCurveTo(220,105,258,105,258,123);
  8. ctx.bezierCurveTo(249,115,233,110,229,131);
  9. ctx.fill();
  10. ctx.closePath();

4

眼睛,为了让眼眶遮住部分黑眼球,所以采用了眼白-眼球-眼眶的顺序

  1. ctx.fillStyle="#fff";
  2. //眼白
  3. ctx.beginPath();
  4. ctx.moveTo(115,148);
  5. ctx.bezierCurveTo(126,133,183,139,183,148);
  6. ctx.quadraticCurveTo(190,157,176,157);
  7. ctx.quadraticCurveTo(156,151,123,157);
  8. ctx.quadraticCurveTo(109,160,115,148);
  9. ctx.moveTo(214,147);
  10. ctx.bezierCurveTo(240,131,281,143,280,147);
  11. ctx.bezierCurveTo(286,150,282,160,279,158);
  12. ctx.bezierCurveTo(264,154,238,153,217,157);
  13. ctx.quadraticCurveTo(208,154,214,147);
  14. ctx.fill();
  15. ctx.closePath();
  16. ctx.fillStyle="#713304";
  17. //眼球
  18. ctx.beginPath();
  19. ctx.arc(170,148,7,0,Math.PI*2,true);
  20. ctx.arc(267,148,7,0,Math.PI*2,true);
  21. ctx.fill();
  22. ctx.closePath();
  23. ctx.lineWidth=3;
  24. ctx.strokeStyle='#e1b15d';
  25. //眼眶
  26. ctx.beginPath();
  27. ctx.moveTo(115,148);
  28. ctx.bezierCurveTo(126,133,183,139,183,148);
  29. ctx.quadraticCurveTo(190,157,174,157);
  30. ctx.quadraticCurveTo(156,151,123,157);
  31. ctx.quadraticCurveTo(109,160,115,148);
  32. ctx.moveTo(214,147);
  33. ctx.bezierCurveTo(240,131,281,143,280,147);
  34. ctx.bezierCurveTo(286,150,282,160,279,158);
  35. ctx.bezierCurveTo(264,154,238,153,217,157);
  36. ctx.quadraticCurveTo(208,154,214,147);
  37. ctx.stroke();
  38. ctx.closePath();

5

 

酒窝,为了看上去不明显,填充色加了透明度

  1. ctx.fillStyle='rgba(254,181,138, 0.5)';
  2. ctx.beginPath();
  3. ctx.moveTo(128,165);
  4. ctx.quadraticCurveTo(141,159,155,165);
  5. ctx.quadraticCurveTo(163,170,155,175);
  6. ctx.quadraticCurveTo(141,181,128,175);
  7. ctx.quadraticCurveTo(120,170,128,165);
  8. ctx.moveTo(241,165);
  9. ctx.quadraticCurveTo(254,159,268,165);
  10. ctx.quadraticCurveTo(276,170,268,175);
  11. ctx.quadraticCurveTo(254,181,241,175);
  12. ctx.quadraticCurveTo(233,170,241,165);
  13. ctx.fill();
  14. ctx.closePath();

6

嘴巴,我也不知道为什么原图的嘴巴下部要有白色阴影,有就照着加上好了

  1. ctx.fillStyle='#6f3205';
  2. ctx.save();
  3. //嘴巴底部白色阴影效果
  4. ctx.shadowOffsetX = 0;
  5. ctx.shadowOffsetY = 5;
  6. ctx.shadowBlur = 10;
  7. ctx.shadowColor = 'rgba(255, 255, 255, 0.5)';
  8. //嘴巴
  9. ctx.beginPath();
  10. ctx.moveTo(129,198);
  11. ctx.bezierCurveTo(129,268,265,268,264,197);
  12. ctx.bezierCurveTo(260,260,137,260,129,198);
  13. ctx.fill();
  14. ctx.restore();
  15. ctx.closePath();

7

 

HTML5标志

  1. ctx.fillStyle='#e54d24';
  2. //html5标志外框
  3. ctx.beginPath();
  4. ctx.moveTo(406,73);
  5. ctx.lineTo(512,73);
  6. ctx.lineTo(502,182);
  7. ctx.lineTo(459,193);
  8. ctx.lineTo(416,182);
  9. ctx.fill();
  10. ctx.closePath();
  11. ctx.fillStyle='#f4622f';
  12. //html5标志右部光效
  13. ctx.beginPath();
  14. ctx.moveTo(459,81);
  15. ctx.lineTo(503,81);
  16. ctx.lineTo(494,175);
  17. ctx.lineTo(459,185);
  18. ctx.fill();
  19. ctx.closePath();

8

  1. ctx.fillStyle='#fff';
  2. //5字
  3. ctx.beginPath();
  4. ctx.moveTo(426,95);
  5. ctx.lineTo(492,95);
  6. ctx.lineTo(491,109);
  7. ctx.lineTo(441,109);
  8. ctx.lineTo(442,122);
  9. ctx.lineTo(490,122);
  10. ctx.lineTo(487,163);
  11. ctx.lineTo(459,171);
  12. ctx.lineTo(431,163);
  13. ctx.lineTo(429,141);
  14. ctx.lineTo(443,141);
  15. ctx.lineTo(444,152);
  16. ctx.lineTo(459,156);
  17. ctx.lineTo(474,152);
  18. ctx.lineTo(475,134);
  19. ctx.lineTo(429,134);
  20. ctx.fill();
  21. ctx.closePath();

9

  1. ctx.fillStyle='rgba(0, 0, 0, 0.1)';
  2. //html5标志左部阴影
  3. ctx.beginPath();
  4. ctx.moveTo(406,73);
  5. ctx.lineTo(459,73);
  6. ctx.lineTo(459,193);
  7. ctx.lineTo(416,182);
  8. ctx.fill();
  9. ctx.closePath();

10

文字

  1. ctx.fillStyle = "#000";
  2. //文字
  3. ctx.font = "bold 30px Arial Black";
  4. ctx.fillText("HTML", 412, 62);
  5. ctx.font = "80px Microsoft YaHei";
  6. ctx.fillText("害怕", 384, 378);
  7. ctx.font = "50px Microsoft YaHei";
  8. ctx.fillText("高清重制", 370, 450);

11

大功告成。

演示: http://wx.karlew.com/canvas/afraid/

源码: https://github.com/karlew/canvas/blob/master/afraid/index.html

欢迎留言