<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas</title>
<style>
#myCanvas {
margin: 0 auto;
border: 1px solid #666;
display: block;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="600" height="800">您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(300, 200, 100, 0, 2 * Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.arc(250, 180, 10, 0, 2*Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.arc(350, 180, 10, 0, 2*Math.PI);
ctx.stroke();
ctx.beginPath();
ctx.arc(250, 185, 5, 0, 2*Math.PI);
ctx.fillStyle="black";
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.arc(350, 185, 5, 0, 2*Math.PI);
ctx.stroke();
ctx.fillStyle="black";
ctx.fill();
ctx.beginPath();
ctx.moveTo(260,250);
ctx.bezierCurveTo(260,250,290,300,345,250);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(265,294);
ctx.lineTo(265,315);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(335,294);
ctx.lineTo(335,315);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(265,315);
ctx.bezierCurveTo(305,305,310,310,335,315);
ctx.stroke();
</script>
</body>
</html>
PHP中文网2017-04-10 15:20:13
从学习的角度讲：简单而言，你要学会封装，从而实现代码的复用
从实用的角度讲：你应该学会从网上找一些现成的底层库（就是实现一些下面说的封装逻辑）来实用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>canvas</title>
<style>
#myCanvas {
margin: 0 auto;
border: 1px solid #666;
display: block;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="600" height="800">您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
// 封装点的概念
var point = function(x, y) {
var point = {};
point.x = x;
point.y = y;
return point;
}
// 封装画圆的逻辑
function draw_arc(point, radius, bound) {
ctx.beginPath();
ctx.arc(point.x, point.y, radius, 0, 2 * Math.PI);
if(bound) {
ctx.fillStyle=bound;
ctx.fill();
}
ctx.stroke();
}
// 脸
draw_arc(point(300, 200), 100);
// 眼球
function draw_eye(point) {
draw_arc(point, 10);
point.y += 5;
draw_arc(point, 5, 'black');
}
draw_eye(point(250, 180));
draw_eye(point(350, 180));
//画曲线
function draw_bezier(point1, point2, point3) {
ctx.beginPath();
ctx.moveTo(point1.x,point1.y);
ctx.bezierCurveTo(point1.x,point1.y,point2.x,point2.y,point3.x,point3.y);
ctx.stroke();
}
draw_bezier(
point(260,250),
point(290,300),
point(345,250)
);
//划线
function draw_line(point_start, point_end) {
ctx.beginPath();
ctx.moveTo(point_start.x, point_start.y);
ctx.lineTo(point_end.x, point_end.y);
ctx.stroke();
}
draw_line(point(265,294), point(265,315));
draw_line(point(335,294), point(335,315));
draw_bezier(
point(305,305),
point(310,310),
point(335,315)
);
</script>
</body>
</html>
