canvas实现哆啦A梦效果

Html

Css

* {
	margin:0;
	padding:0;
}
#abc {
	margin:0 auto;
	display:block;
	/*background-color:whitesmoke;
	*/
}
body {
	background-color:#000;
}

//获取页面元素
var canvas = document.getElementById('abc');
//获取渲染上下文
var con = canvas.getContext('2d');

//阴影
con.shadowBlur = 20;
con.shadowColor = 'red';
con.shadowOffsetX = 20;
con.shadowOffsetY = 20;

//绘制头部背景
con.beginPath();
con.fillStyle = 'rgb(8,189,234)';
con.strokeStyle = 'black';
con.lineWidth = 2;
con.arc(300, 300, 200, 0, Math.PI * 2, false);
con.stroke();
con.fill();
//绘制脸
//去阴影
con.shadowBlur = 0;
con.shadowColor = 'white';
con.shadowOffsetX = 0;
con.shadowOffsetY = 0;

con.beginPath();
con.moveTo(300, 180);
con.bezierCurveTo(100, 180, 60, 450, 300, 465);
con.bezierCurveTo(540, 450, 500, 180, 300, 180);
con.strokeStyle = 'black';
con.stroke();
con.fillStyle = 'white';
con.fill();
//绘制右眼
con.beginPath();
con.moveTo(262, 145);
con.bezierCurveTo(212, 145, 212, 245, 262, 245);
con.bezierCurveTo(312, 245, 312, 145, 262, 145);
con.strokeStyle = 'black';
con.stroke();
con.fillStyle = 'white';
con.fill();
//绘制左眼
con.beginPath();
con.moveTo(338, 145);
con.bezierCurveTo(388, 145, 388, 245, 338, 245);
con.bezierCurveTo(288, 245, 288, 145, 338, 145);
con.strokeStyle = 'black';
con.stroke();
con.fillStyle = 'white';
con.fill();
//绘制左眼珠
con.beginPath();
con.arc(280, 220, 10, 0, Math.PI * 2, false);
con.strokeStyle = 'black';
con.stroke();
con.fillStyle = 'black';
con.fill();
//绘制右眼珠
con.beginPath();
con.arc(320, 220, 10, 0, Math.PI * 2, false);
con.strokeStyle = 'black';
con.stroke();
con.fillStyle = 'black';
con.fill();
//绘制鼻子
con.beginPath();
con.arc(300, 256, 23, 0, Math.PI * 2, false);
con.strokeStyle = 'black';
con.stroke();
con.fillStyle = '#c93e00';
con.fill();
//绘制鼻子上的反光圆
con.beginPath();
con.arc(309, 246, 4, 0, Math.PI * 2, false);
con.fillStyle = 'white';
con.fill();
//左边胡子
con.beginPath();
con.moveTo(165, 270);
con.lineTo(235, 285);
con.strokeStyle = 'black';
con.stroke();
con.closePath();

con.beginPath();
con.moveTo(165, 310);
con.lineTo(235, 310);
con.strokeStyle = 'black';
con.stroke();
con.closePath();

con.beginPath();
con.moveTo(165, 350);
con.lineTo(235, 340);
con.strokeStyle = 'black';
con.stroke();
con.closePath();
//右边胡子
con.beginPath();
con.moveTo(435, 270);
con.lineTo(365, 285);
con.strokeStyle = 'black';
con.stroke();
con.closePath();

con.beginPath();
con.moveTo(435, 310);
con.lineTo(365, 310);
con.strokeStyle = 'black';
con.stroke();
con.closePath();

con.beginPath();
con.moveTo(435, 350);
con.lineTo(365, 340);
con.strokeStyle = 'black';
con.stroke();
con.closePath();
//鼻线
con.beginPath();
con.moveTo(300, 280);
con.lineTo(300, 435);
con.strokeStyle = 'black';
con.stroke();
con.closePath();
//嘴巴
con.beginPath();
con.moveTo(185, 375);
con.quadraticCurveTo(220, 435, 300, 435)
con.strokeStyle = 'black';
con.stroke();

con.beginPath();
con.moveTo(300, 435);
con.quadraticCurveTo(380, 435, 415, 370)
con.strokeStyle = 'black';
con.stroke();

//下半身
//左边手
con.beginPath();
con.lineWidth = 60;
con.moveTo(200, 470);
con.lineTo(100, 600);
con.strokeStyle = 'rgb(8,189,234)';
con.stroke();
con.closePath();

con.beginPath();
con.lineWidth = 1;
con.strokeStyle = 'black';
con.arc(90, 610, 35, 0, Math.PI * 2, false);
con.fillStyle = 'white';
con.stroke();
con.fill();

//阴影
con.shadowBlur = 20;
con.shadowColor = 'red';
con.shadowOffsetX = 20;
con.shadowOffsetY = 20;

//右边手
con.beginPath();
con.lineWidth = 60;
con.moveTo(400, 470);
con.lineTo(500, 600);
con.strokeStyle = 'rgb(8,189,234)';
con.stroke();
con.closePath();

con.beginPath();
con.lineWidth = 1;
con.strokeStyle = 'black';
con.arc(510, 610, 35, 0, Math.PI * 2, false);
con.fillStyle = 'white';
con.stroke();
con.fill();

//去阴影
con.shadowBlur = 0;
con.shadowColor = 'white';
con.shadowOffsetX = 0;
con.shadowOffsetY = 0;

//腿
con.fillStyle = 'rgb(8,189,234)';
con.fillRect(150, 485, 300, 250);

//肚子
con.beginPath();
con.fillStyle = 'white';
con.arc(300, 560, 100, 0, Math.PI * 2, false);
con.fill();
//腿岔
con.beginPath();
con.lineWidth = 1;
con.strokeStyle = 'black';
con.fillStyle = 'white';
con.arc(300, 710, 20, 0, Math.PI * 2, false);
con.stroke();
con.fill();

//阴影
con.shadowBlur = 20;
con.shadowColor = 'red';
con.shadowOffsetX = 20;
con.shadowOffsetY = 20;

//脚
con.beginPath();
con.lineCap = 'round';
con.lineWidth = 50;
con.strokeStyle = 'white';
con.moveTo(150, 730);
con.lineTo(274, 730);
con.stroke();
con.closePath();

con.beginPath();
con.lineCap = 'round';
con.lineWidth = 50;
con.strokeStyle = 'white';
con.moveTo(324, 730);
con.lineTo(450, 730);
con.stroke();
con.closePath();

//去阴影
con.shadowBlur = 0;
con.shadowColor = 'white';
con.shadowOffsetX = 0;
con.shadowOffsetY = 0;

//渐变色
var linGradient = con.createLinearGradient(140, 475, 465, 475);
linGradient.addColorStop(0, 'rgb(182,50,11)');
linGradient.addColorStop(1, 'rgb(255,255,255)');
//项链
con.beginPath();
con.lineWidth = 40;
con.lineCap = 'round';
con.moveTo(150, 475);
con.lineTo(450, 475);
con.strokeStyle = linGradient;
con.stroke();
con.closePath();
//铃铛
con.beginPath();
con.lineWidth = 2;
con.arc(300, 510, 35, 0, Math.PI * 2, false);
con.strokeStyle = 'black';
con.stroke();
con.fillStyle = 'rgb(243,247,115)';
con.fill();

con.beginPath();
con.lineWidth = 1;
con.moveTo(276, 485);
con.lineTo(324, 485);
con.strokeStyle = 'black';
con.stroke();
con.closePath();

con.beginPath();
con.lineWidth = 1;
con.moveTo(265, 500);
con.lineTo(334, 500);
con.strokeStyle = 'black';
con.stroke();
con.closePath();

con.beginPath();
con.fillStyle = 'black';
con.arc(300, 515, 10, 0, Math.PI * 2, false);
con.fill();

con.beginPath();
con.strokeStyle = 'black';
con.moveTo(300, 525);
con.lineTo(300, 545);
con.stroke();
con.closePath();

//口袋
con.beginPath();
con.strokeStyle = 'black';
con.arc(300, 565, 75, 0, Math.PI, false);
con.stroke();
con.closePath();

con.beginPath();
con.moveTo(225, 565);
con.lineTo(375, 565);
con.stroke();
con.closePath();

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

canvas实现哆啦A梦效果



代码描述：纯canvas绘制哆啦A梦，代码注释全

通过canvas 实现的哆啦A梦,可以很好的练习canvas,对canvas的提升有很大的帮助.欢迎下载

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

丿嗨丶请叫我营

相关代码

canvas实现哆啦A梦效果

最新