canvas画doraemon

html部分:

快去升级你的浏览器吧!

js 部分:

var ctx = document.getElementById('doraemon').getContext('2d');   //  getContext() 方法返回一个用于在画布上绘图的环境。

//  头部

ctx.beginPath(); // 起始一条路径,或重置当前路径

ctx.lineWidth = 2;

ctx.strokeStyle = '#000';

ctx.beginPath(); ctx.moveTo(82, 300);

ctx.bezierCurveTo(-31, 172, 36, 0, 200, 0);

ctx.bezierCurveTo(364, 0, 432, 172, 318, 300);

ctx.fillStyle = '#029AE3';

ctx.fill();

ctx.stroke();

ctx.beginPath();

ctx.moveTo(90, 300);

ctx.bezierCurveTo(10, 177, 30, 50, 200, 60);

ctx.bezierCurveTo(370, 50, 390, 177, 310, 300);

ctx.fillStyle = '#FDFDFD';

ctx.fill();

ctx.stroke();

// 眼睛

ctx.beginPath();

ctx.moveTo(127, 50);

ctx.bezierCurveTo(127, -6, 200, -6, 200, 50);

ctx.bezierCurveTo(198, 106, 127, 106, 127, 50);

ctx.moveTo(164, 60); // 把路径移动到画布中的指定点,不创建路径。

ctx.quadraticCurveTo(177, 30, 190, 60);

ctx.fillStyle = '#FDFDFD';

ctx.fill(); ctx.stroke(); ctx.beginPath();

ctx.moveTo(200, 50);

ctx.bezierCurveTo(200, -6, 273, -6, 273, 50);

ctx.bezierCurveTo(271, 106, 200, 106, 200, 50);

ctx.moveTo(214, 60); // 把路径移动到画布中的指定点,不创建路径。

ctx.quadraticCurveTo(227, 30, 240, 60);

ctx.fillStyle = '#FDFDFD';

ctx.fill();

ctx.stroke();

// 鼻子

ctx.beginPath();

ctx.arc(200, 103, 25, 0, 2*Math.PI); // 坐标,半径,起始位置

ctx.fillStyle = '#DC1025';

ctx.fill();

ctx.moveTo(200, 129);

ctx.lineTo(200, 252);

ctx.closePath(); // closePath() 方法创建从当前点到开始点的路径。

ctx.stroke();

ctx.beginPath();

ctx.arc(195, 93, 9, 0, 2*Math.PI); // 坐标,半径,起始位置

ctx.fillStyle = '#FDFDFD'; ctx.fill();

// 胡须

ctx.beginPath();

ctx.moveTo(80, 100);

ctx.lineTo(165, 130);

ctx.closePath();

ctx.moveTo(58, 152);

ctx.lineTo(160, 156);

ctx.closePath();

ctx.moveTo(62, 196);

ctx.lineTo(165, 182);

ctx.closePath();

ctx.moveTo(233, 130);

ctx.lineTo(320, 100);

ctx.closePath();

ctx.moveTo(237, 156);

ctx.lineTo(343, 152);

ctx.closePath();

ctx.moveTo(235, 182);

ctx.lineTo(340, 196);

ctx.closePath();

ctx.stroke();

// 嘴巴

ctx.beginPath();

ctx.moveTo(75, 170);

ctx.quadraticCurveTo(200, 336, 335, 170);

ctx.stroke();

// 围巾

ctx.beginPath();

ctx.moveTo(80, 311);

ctx.quadraticCurveTo(75, 302, 80, 296);

ctx.quadraticCurveTo(200, 302, 322, 296);

ctx.quadraticCurveTo(330, 302, 322, 311);

ctx.quadraticCurveTo(200, 322, 80, 311);

ctx.fillStyle = '#DC1025';

ctx.fill();

ctx.stroke();

// 铃铛

ctx.beginPath();

ctx.arc(200, 336, 33, 0, 2*Math.PI);

ctx.fillStyle = '#FEDE4A';

ctx.fill();

ctx.stroke();

ctx.beginPath();

ctx.arc(200, 345, 8, 0, 2*Math.PI);

ctx.fillStyle = '#7A674D';

ctx.fill();

ctx.moveTo(200, 353);

ctx.lineTo(200, 369);

ctx.stroke();

ctx.beginPath();

ctx.moveTo(168, 330);

ctx.bezierCurveTo(140, 320, 258, 320, 233, 330);

ctx.quadraticCurveTo(200, 325, 168, 330);

ctx.fillStyle = '#FEDE4A';

ctx.fill();

ctx.stroke();

// 身体

ctx.beginPath();

ctx.moveTo(40, 375);

ctx.quadraticCurveTo(50, 335, 80, 311);

ctx.lineTo(322, 311);

ctx.quadraticCurveTo(350, 335, 360, 375);

ctx.fillStyle = '#029AE3';

ctx.fillRect(40, 375, 310, 20);

ctx.fill();

ctx.stroke();

ctx.beginPath();

ctx.arc(44, 414, 41, 0, 2*Math.PI);

ctx.fillStyle = '#FDFDFD'; ctx.fill();

ctx.stroke(); ctx.beginPath();

ctx.arc(356, 414, 41, 0, 2*Math.PI);

ctx.fillStyle = '#FDFDFD';

ctx.fill();

ctx.stroke();

ctx.beginPath();

ctx.moveTo(80, 340);

ctx.quadraticCurveTo(70, 400, 96, 510);

ctx.quadraticCurveTo(145, 520, 200, 515);

ctx.quadraticCurveTo(255, 520, 304, 510);

ctx.quadraticCurveTo(330, 400, 320, 340);

ctx.fillStyle = '#029AE3';

ctx.fill();

ctx.stroke();

// 袋子

ctx.beginPath();

ctx.moveTo(100, 401);

ctx.bezierCurveTo(78, 266, 320, 267, 300, 401);

ctx.bezierCurveTo(290, 510, 110, 510, 100, 401);

ctx.fillStyle = '#FDFDFD';

ctx.fill(); ctx.moveTo(116, 391);

ctx.bezierCurveTo(125, 485, 283, 485, 284, 391);

ctx.quadraticCurveTo(200, 380, 116, 391);

ctx.stroke();

// 脚

ctx.beginPath();

ctx.moveTo(96, 510);

ctx.bezierCurveTo(70, 510, 63, 519, 62, 539);

ctx.bezierCurveTo(57, 561, 163, 564, 200, 551);

ctx.bezierCurveTo(237, 564, 343, 561, 338, 539);

ctx.bezierCurveTo(337, 519, 330, 510, 304, 510);

ctx.fillStyle = '#FDFDFD';

ctx.fill();

ctx.stroke();

ctx.beginPath();

ctx.moveTo(200, 497);

ctx.lineTo(200, 551);

ctx.moveTo(190, 497);

ctx.lineTo(210, 497);

ctx.stroke();

完成哈哈哈哈

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一:canvas简介 1.1什么是canvas? ①:canvas是HTML5提供的一种新标签 ②:HTML5 ...
    GreenHand1阅读 4,731评论 2 32
  • 最近在学H5的一些新特性,尤其对其中的canvas特别感兴趣,自己画了一个哆啦A梦,纪念一下童年最爱的那个大蓝猫🐱...
    熊小猫爱唱歌阅读 1,716评论 1 2
  • 一、canvas简介 1.1 什么是canvas?(了解) 是HTML5提供的一种新标签 Canvas是一个矩形区...
    Looog阅读 3,975评论 3 40
  • 狄更斯说:“这是一个最好的时代,也是个最坏的时代。” 作为手机互联网成熟的年代,各种自媒体,IM可以做到24小时在...
    汉口张叔叔阅读 147评论 1 2
  • 我认为的时间管理终极底层逻辑:时间是不能被管理的,最后需要管理的是我们自身。 kill the fasion:一切...
    果大喵喵阅读 519评论 0 0