只用html画板绘制哭脸
<!DOCTYPE html>
<html>
<head>
<title>绘制哭脸</title>
<style type="text/css">
canvas {
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="200" height="200"></canvas>
<pre><code><script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
// 绘制脸
ctx.beginPath();
ctx.arc(100, 100, 80, 0, 2*Math.PI);
ctx.fillStyle = "#F5A9A9";
ctx.fill();
ctx.closePath();
// 绘制左眼
ctx.beginPath();
ctx.arc(60, 70, 10, 0, 2*Math.PI);
ctx.fillStyle = "white";
ctx.fill();
ctx.closePath();
// 绘制右眼
ctx.beginPath();
ctx.arc(140, 70, 10, 0, 2*Math.PI);
ctx.fillStyle = "white";
ctx.fill();
ctx.closePath();
// 绘制左眼球
ctx.beginPath();
ctx.arc(60, 70, 5, 0, 2*Math.PI);
ctx.fillStyle = "black";
ctx.fill();
ctx.closePath();
// 绘制右眼球
ctx.beginPath();
ctx.arc(140, 70, 5, 0, 2*Math.PI);
ctx.fillStyle = "black";
ctx.fill();
ctx.closePath();
// 绘制嘴巴
ctx.beginPath();
ctx.arc(100, 120, 40, 0, Math.PI);
ctx.strokeStyle = "black";
ctx.lineWidth = 5;
ctx.stroke();
ctx.closePath();
// 绘制眼泪
ctx.beginPath();
ctx.moveTo(80, 100);
ctx.lineTo(75, 110);
ctx.lineTo(85, 110);
ctx.lineTo(80, 100);
ctx.fillStyle = "blue";
ctx.fill();
ctx.closePath();
ctx.beginPath();
ctx.moveTo(120, 100);
ctx.lineTo(115, 110);
ctx.lineTo(125, 110);
ctx.lineTo(120, 100);
ctx.fillStyle = "blue";
ctx.fill();
ctx.closePath();
</script>
</code></pre>
</body>
</html
原文地址: https://www.cveoy.top/t/topic/dgHH 著作权归作者所有。请勿转载和采集!