canvas绘制哆啦A梦 以及简单示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title></title>
<style type="text/css">
#canvas1 {
background-color: #5f9ea0;
}
</style>
</head>
<body>
<canvas id="canvas1" width="600" height="800"></canvas>
</body>
<script type="text/javascript">
var can = document.getElementById("canvas1");
var pen = can.getContext("2d");
//脑袋
drawCircle(300, 180, 150, 0, 2, false, "rgb(80,170,230)");
drawCircle(300, 250, 150, 1.25, 1.75, false, "white"); //上脸
drawCircle(300, 170, 150, 0.25, 0.75, false, "white"); //下脸
drawCircle(270, 210, 100, 0.75, 1.25, false, "white"); //左脸
drawCircle(330, 210, 100, 1.75, 0.25, false, "white"); //右脸
//中间
pen.beginPath();
pen.fillRect(198, 140, 204, 140);
pen.closePath();
//
ellipseOne(pen, 260, 110, 40, 50);
ellipseOne(pen, 340, 110, 40, 50);
//眼珠
drawCircle(270, 130, 15, 0, 2, false, "black");
drawCircle(330, 130, 15, 0, 2, false, "black");
//
drawCircle(300, 165, 22, 0, 2, false, "red");
//竖线
beard(300, 190, 300, 280);
//左胡子
beard(200, 180, 270, 200); //1
beard(200, 210, 270, 210); //2
beard(200, 240, 270, 220); //3
//右胡子
beard(328, 200, 398, 180); //1
beard(328, 210, 398, 210); //2
beard(328, 220, 398, 240); //3
//嘴巴
pen.beginPath();
pen.arc(300, 145, 150, 0.25 * Math.PI, 0.75 * Math.PI, false);
pen.stroke();
pen.closePath();
//切棱角
drawCircle(195, 320, 18, 0.7, 1.3, false, "red");
drawCircle(405, 320, 18, 1.7, 0.3, false, "red");
//脖子
pen.beginPath();
pen.fillRect(184, 305, 233, 30);
pen.closePath();
//身子
pen.beginPath();
pen.fillStyle = "rgb(80,170,230)";
pen.fillRect(190, 335, 222, 180);
pen.closePath();
//胳膊
arm(190, 335, 140, 395, 175, 425, 190, 405, "rgb(80,170,230)");
arm(190, 405, 190, 514, 285, 514, 285, 514, "rgb(80,170,230)");
arm(316, 514, 412, 514, 412, 405, 412, 405, "rgb(80,170,230)");
drawCircle(145, 420, 30, 0, 2, false, "white");
//右
arm(412, 335, 462, 395, 427, 425, 412, 405, "rgb(80,170,230)");
drawCircle(457, 420, 30, 0, 2, false, "white");
//衣服
drawCircle(300, 391, 80, 1.25, 1.75, true, "white");
drawCircle(300, 391, 60, 0, 1, false, "white");
//铃铛
drawCircle(300, 345, 25, 0, 2, true, "yellow");
drawCircle(300, 350, 8, 0, 2, true, "black"); //黑点
beard(300, 350, 300, 370); //竖线
beard(283, 327, 318, 327); //纹路
beard(275, 338, 325, 338);
//门
drawCircle(300, 511, 16, 0.1, 0.9, true, "white");
//脚
pen.beginPath();
pen.lineTo(165, 515);
pen.lineTo(287, 515);
pen.arc(284, 531, 15, 1.5 * Math.PI, 0.5 * Math.PI, false);
pen.lineTo(287, 547);
pen.lineTo(165, 547);
pen.arc(165, 531, 15, 0.5 * Math.PI, 1.5 * Math.PI, false);
pen.lineTo(165, 515);
pen.closePath();
pen.fillStyle = "white";
pen.fill();
pen.stroke();
pen.beginPath();
drawCircle(317, 531, 15, 0.5, 1.5, false, "white");
drawCircle(436, 531, 15, 1.5, 0.5, false, "white");
pen.beginPath();
pen.fillStyle = "white";
pen.fillRect(316, 516, 121, 30);
pen.closePath();
//斜线
function arm(a, b, c, d, e, f, g, h, color) {
pen.beginPath();
pen.lineTo(a, b);
pen.lineTo(c, d);
pen.lineTo(e, f);
pen.lineTo(g, h);
pen.stroke();
pen.fillStyle = color;
pen.fill();
pen.closePath();
}
//线 两点
function beard(sx, sy, ex, ey) {
pen.beginPath();
pen.lineTo(sx, sy);
pen.lineTo(ex, ey);
pen.stroke();
pen.closePath();
}
//画圆
function drawCircle(center1, center2, radius, start, end, bol, color) {
pen.beginPath();
pen.arc(center1, center2, radius, start * Math.PI, end * Math.PI, bol);
pen.fillStyle = color;
pen.fill();
pen.closePath();
pen.stroke();
}
//椭圆
function ellipseOne(context, x, y, a, b) {
//(圆心，圆心，宽，高)
var step = a > b ? 1 / a : 1 / b;
context.beginPath();
context.moveTo(x + a, y);
for (var i = 0; i < 2 * Math.PI; i += step) {
context.lineTo(x + a * Math.cos(i), y + b * Math.sin(i));
}
context.closePath();
context.fill();
context.stroke();
}
</script>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" />
<title>简单示例</title>
<style>
canvas {
background: skyblue;
}
</style>
</head>
<body>
<canvas width="600px" height="600px"> 您的浏览器不支持canvas元素 </canvas>
<script>
var oCanvas = document.querySelector("canvas");
var oTxt = oCanvas.getContext("2d");
//在画布上设置2d环境 //开始一段新的路径
oTxt.beginPath(); //划线
oTxt.moveTo(20, 20); //起点
oTxt.lineTo(20, 200); //终点
oTxt.lineWidth = 6;
oTxt.strokeStyle = "red";
oTxt.stroke(); //绘制完毕
/*
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
x 圆的中心的 x 坐标。
y 圆的中心的 y 坐标。
r 圆的半径。
sAngle 起始角，以弧度计
eAngle 结束角，以弧度计
counterclockwise 可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。
oTxt.arc(300,300,150,0,Math.PI/180*90,false);
*/
oTxt.beginPath();
oTxt.lineWidth = 10;
oTxt.strokeStyle = "red"; //线颜色
oTxt.arc(300, 300, 150, 0, (Math.PI / 180) * 360, true);
oTxt.fillStyle = "greenyellow"; //背景颜色
oTxt.stroke();
oTxt.fill(); //填充 fill();
//oTxt.closePath(); //oTxt.closePath()关闭路径
</script>
</body>
</html>
