快捷导航
蚂蚁部落 网站首页 实例代码 canvas实例 查看内容

canvas绘制笑脸表情

2018-3-20 23:40| 发布者: antzone| 查看: 612| 评论: 0|来自: 蚂蚁部落

分享一段代码实例,它实现了利用canvas绘制QQ笑脸的功能。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
</head>
<body>
<canvas id="mycanvas" width="640" height="500"></canvas>
<script>
var it = document.getElementById("mycanvas");
var myCanvas = it.getContext("2d");
myCanvas.arc(320, 225, 200, 0, 2 * Math.PI);
var myPen = myCanvas.createRadialGradient(320, 225, 140, 320, 225, 200);
myPen.addColorStop(0, "#f0e720");
myPen.addColorStop(1, "#ffca3c");
myCanvas.fillStyle = myPen;
myCanvas.fill();
//嘴
myCanvas.beginPath();
myCanvas.arc(320, 225, 140, 0, 2 * Math.PI);
myCanvas.fillStyle = "#7f2e00";
myCanvas.fill();
myCanvas.beginPath();
myCanvas.arc(320, 215, 140, 0, 2 * Math.PI);
myCanvas.fillStyle = "#f0e720";
myCanvas.fill();
//左边眉毛
myCanvas.beginPath();
myCanvas.moveTo(162, 78);
myCanvas.quadraticCurveTo(189, 22, 235, 95);
myCanvas.quadraticCurveTo(194, 44, 162, 78);
myCanvas.fillStyle = "#000";
myCanvas.fill();
myCanvas.stroke();
myCanvas.closePath();
//右边眉毛
myCanvas.beginPath();
myCanvas.moveTo(472, 78);
myCanvas.quadraticCurveTo(445, 22, 399, 95);
myCanvas.quadraticCurveTo(448, 44, 472, 78);
myCanvas.fill();
myCanvas.stroke();
myCanvas.closePath();
//左眼
myCanvas.lineWidth = 5;
myCanvas.strokeStyle = "#75291c";
myCanvas.beginPath();
myCanvas.moveTo(136, 127);
myCanvas.bezierCurveTo(176, 100, 226, 100, 266, 127);
myCanvas.bezierCurveTo(272, 134, 268, 146, 256, 147);
myCanvas.bezierCurveTo(226, 124, 176, 124, 140, 147);
myCanvas.bezierCurveTo(126, 142, 126, 134, 136, 127);
myCanvas.stroke();
myCanvas.fillStyle = "#fff";
myCanvas.fill();
 
myCanvas.beginPath();
myCanvas.fillStyle = "#333";
myCanvas.arc(156, 128, 16, 0, 2 * Math.PI, true);
myCanvas.fill();
myCanvas.closePath();
//右眼
myCanvas.beginPath();
myCanvas.moveTo(372, 127);
myCanvas.bezierCurveTo(412, 100, 462, 100, 502, 127);
myCanvas.bezierCurveTo(508, 134, 504, 146, 492, 147);
myCanvas.bezierCurveTo(462, 124, 412, 124, 376, 147);
myCanvas.bezierCurveTo(362, 142, 362, 134, 372, 127);
myCanvas.stroke();
myCanvas.fillStyle = "#fff";
myCanvas.fill();
 
myCanvas.beginPath();
myCanvas.fillStyle = "#333";
myCanvas.arc(392, 128, 16, 0, 2 * Math.PI, true);
myCanvas.fill();
myCanvas.closePath();
 
//脸颊
myCanvas.beginPath();
myCanvas.strokeStyle = "#fd9100";
myCanvas.fillStyle = "#fd9100";
EllipseTwo(myCanvas, 200, 160, 26, 12);
myCanvas.fill();
myCanvas.stroke();
 
myCanvas.beginPath();
myCanvas.strokeStyle = "#fd9100";
myCanvas.fillStyle = "#fd9100";
EllipseTwo(myCanvas, 436, 160, 26, 12);
myCanvas.fill();
myCanvas.stroke();
 
 
function EllipseTwo(context, x, y, a, b) {
  context.save();
  var r = (a > b) ? a : b;
  var ratioX = a / r;
  var ratioY = b / r;
  context.scale(ratioX, ratioY);
  context.beginPath();
  context.arc(x / ratioX, y / ratioY, r, 0, 2 * Math.PI, false);
  context.closePath();
  context.restore();
  context.stroke();
}
</script>
</body>
</html>

鲜花

握手

雷人

路过

鸡蛋

最新评论

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2018-4-21 10:07 , Processed in 0.091352 second(s), 22 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部