HTML5 Canvas绘制笑脸教程-优快云博客

本文链接：https://blog.youkuaiyun.com/guxinaiheqiao/article/details/39228981

<html>
<head>
<title>
Serenityfire
</title>
</head>

<body>
<canvas id="a" width="200" height="200">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
<script type="text/javascript">
// Set up!
var a_canvas = document.getElementById("a");
var context = a_canvas.getContext("2d");

// Draw the face
context.fillStyle = "yellow";
context.beginPath();
context.arc(95, 85, 40, 0, 2*Math.PI);
context.closePath();
context.fill();
context.lineWidth = 2;
context.stroke();
context.fillStyle = "black";

// Draw the left eye
context.beginPath();
context.arc(75, 75, 5, 0, 2*Math.PI);
context.closePath();
context.fill();

// Draw the right eye
context.beginPath();
context.arc(114, 75, 5, 0, 2*Math.PI);
context.closePath();
context.fill();

// Draw the mouth
context.beginPath();
context.arc(95, 90, 26, Math.PI, 2*Math.PI, true);
context.closePath();
context.fill();

// Write "Hello, World!"
context.font = "30px Garamond";
context.fillText("Hello, World!",15,175);
</script>
</body>

</html>

一小段html5代码