版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/wbdsr234/article/details/68941506
学习canvas时画的一个哆啦A梦,还有不足,以后改进
具体实现代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#mycav{
border:1px solid red;
}
</style>
</head>
<body>
<canvas id="mycav" width="800" height="600"></canvas>
<script>
var cav = document.getElementById('mycav');
var can = cav.getContext('2d');
can.beginPath();
can.strokeStyle = '#000';
can.fillStyle = '#00A0E8';
can.arc(300,280,100,(2/3)*Math.PI,(1/3)*Math.PI);
can.stroke();
can.fill();
can.closePath();
can.beginPath();
can.strokeStyle = '#000';
can.fillStyle = '#fff';
can.arc(300,300,80,(2/3)*Math.PI,(1/3)*Math.PI);
can.stroke();
can.fill();
can.closePath();
/*
* context为Canvas的2D绘图环境对象,
* x为椭圆中心横坐标,
* y为椭圆中心纵坐标,
* a为椭圆横半轴长,
* b为椭圆纵半轴长。
*/
function ParamEllipse(context, x, y, a, b)
{
//max是等于1除以长轴值a和b中的较大者
//i每次循环增加1/max,表示度数的增加
//这样可以使得每次循环所绘制的路径(弧线)接近1像素
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)
{
//参数方程为x = a * cos(i), y = b * sin(i),
//参数为i,表示度数(弧度)
context.lineTo(x + a * Math.cos(i), y + b * Math.sin(i));
}
context.closePath();
context.stroke();
}
can.beginPath();
can.fillStyle = '#fff';
can.strokeStyle = "#000";
ParamEllipse(can,280,220,15,20);
can.stroke();
can.fill();
can.closePath();
can.beginPath();
can.fillStyle = '#fff';
can.strokeStyle = "#000";
ParamEllipse(can,310,220,15,20);
can.stroke();
can.fill();
can.closePath();
can.beginPath();
can.strokeStyle = "#000";
can.arc(282,225,5,0,Math.PI,true);
can.stroke();
can.closePath();
can.beginPath();
can.strokeStyle = "#000";
can.arc(308,225,5,0,Math.PI,true);
can.stroke();
can.closePath();
can.beginPath();
can.strokeStyle = "#000";
can.fillStyle = "#CC0D30";
can.arc(295,250,15,0,2*Math.PI);
can.stroke();
can.fill();
can.closePath();
can.beginPath();
can.fillStyle = "#fff";
can.arc(293,247,6,0,2*Math.PI);
can.fill();
can.closePath();
can.beginPath();
can.strokeStyle = "#000";
can.moveTo(297,265);
can.lineTo(300,320);
can.stroke();
can.closePath();
can.beginPath();
can.strokeStyle = "#000";
can.moveTo(275,270);
can.lineTo(230,250);
can.stroke();
can.closePath();
can.beginPath();
can.strokeStyle = "#000";
can.moveTo(275,280);
can.lineTo(220,280);
can.stroke();
can.closePath();
can.beginPath();
can.strokeStyle = "#000";
can.moveTo(275,290);
can.lineTo(230,310);
can.stroke();
can.closePath();
can.beginPath();
can.strokeStyle = "#000";
can.moveTo(320,270);
can.lineTo(360,250);
can.stroke();
can.closePath();
can.beginPath();
can.strokeStyle = "#000";
can.moveTo(320,280);
can.lineTo(370,280);
can.stroke();
can.closePath();
can.beginPath();
can.strokeStyle = "#000";
can.moveTo(320,290);
can.lineTo(360,310);
can.stroke();
can.closePath();
can.beginPath();
can.arc(300,270,50,0,Math.PI);
can.stroke();
can.closePath();
can.beginPath();
can.strokeStyle = "#000";
can.fillStyle = "#E5012D";
can.fillRect(250,365,100,10);
can.stroke();
can.fill();
can.closePath();
/*肚子*/
can.beginPath();
can.strokeStyle = "#000";
can.fillStyle = "#00A0E8";
can.arc(300,443,80,-(1/3)*Math.PI,(4/3)*Math.PI);
can.stroke();
can.fill();
can.closePath();
/*口袋*/
can.beginPath();
can.strokeStyle = "#000";
can.fillStyle = "#fff";
can.arc(300,418,50,-(1/3)*Math.PI,(4/3)*Math.PI);
can.stroke();
can.fill();
can.closePath();
can.beginPath();
can.strokeStyle = "#000";
can.moveTo(270,418);
can.lineTo(330,418);
can.stroke();
can.closePath();
can.beginPath();
can.strokeStyle = "#000";
can.arc(300,418,30,0,Math.PI);
can.stroke();
can.closePath();
/*左胳膊半圆*/
can.beginPath();
can.strokeStyle = "#000";
can.fillStyle = "#00A0E8";
can.arc(250,375,10,-(5/6)*Math.PI,(1/3)*Math.PI);
can.stroke();
can.fill();
can.closePath();
/*左胳膊矩形*/
can.beginPath();
can.strokeStyle = "#000";
can.fillStyle = "#00A0E8";
can.rotate(-40*Math.PI/180);
can.rect(-133,438,80,20);
can.stroke();
can.fill();
can.closePath();
/*左胳膊圆*/
can.beginPath();
can.strokeStyle = "#000";
can.fillStyle = "#fff";
can.arc(-133,450,13,0,2*Math.PI);
can.stroke();
can.fill();
can.closePath();
/*右胳膊半圆*/
can.beginPath();
can.strokeStyle = "#000";
can.fillStyle = "#00A0E8";
can.arc(31,515,10,-(7/6)*Math.PI,(1/6)*Math.PI);
can.stroke();
can.fill();
can.closePath();
/*右胳膊矩形*/
can.beginPath();
can.strokeStyle = "#000";
can.fillStyle = "#00A0E8";
can.rotate(90*Math.PI/180);
can.rect(520,-42,80,20);
can.stroke();
can.fill();
can.closePath();
/*右胳膊圆*/
can.beginPath();
can.strokeStyle = "#000";
can.fillStyle = "#fff";
can.arc(600,-34,13,0,2*Math.PI);
can.stroke();
can.fill();
can.closePath();
</script>
</body>
</html>