• 工信部:17年12批新能源车推荐车型目录 2019-05-11
  • 美国再挑贸易战,中方强力回击,全球市场跌声一片 2019-05-11
  • 四川都江堰再现野生大熊猫踪迹 比3月拍到的更肥 2019-05-10
  • 坚持和发展马克思主义的宣言书 2019-05-10
  • 解析视频播控平台黑产链 20元看12家网站VIP会员视频 2019-04-26
  • 众星云集 “欧洲红魔”能否用战绩兑现黄金一代的天赋 2019-04-26
  • 比如最高检的12309检查服务中心,原来还有显示信访处理进程,不过没有几天就取消了。[上火][上火] 也就是说办与不办也没有人知道,下边省事了,上边也就轻松了。 2019-04-16
  • 男女差别有多大?河北省首次公开发布分性别统计分析报告 2019-04-05
  • 菲律宾媒体和网民热议"中国剧场"开播 2019-04-05
  • 坚持和完善我国基本经济制度的两条新经验 2019-04-02
  • 5月份61城房价环比反弹 多地调控政策或再加码 ——凤凰网房产济南 2019-04-02
  • [洞见]草榴死了 欲望还活着草榴性 2019-04-02
  • 回顾:五年来习近平的“两会金句” 2019-04-02
  • 云南省2018年度国家社科基金项目申报工作的几点做法 2019-04-01
  • 地理君的专栏作者中国国家地理网 2019-04-01

    11选五复式投注表:canvas绘制机器猫代码实例

    燕赵风采20选5走势图 www.fllv.net 2018-5-13 10:56| 作者: 蚂蚁小编| 查看: 3430| 评论: 0|来自: 蚂蚁部落

    分享一段代码实例,它利用canvas实现了绘制机器猫的效果。

    代码实例如下:

    [HTML] 纯文本查看 复制代码运行代码
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="author" content="//www.fllv.net/" />
    <title>蚂蚁部落</title>
    </head>
    <body>
    <canvas id="mycanvas" width="500" height="600"></canvas>
    </body>
    <script>
    var mycanvas = document.getElementById('mycanvas');
    var f = mycanvas.getContext('2d');
    var mycanvas = document.getElementById('mycanvas');
    var context = mycanvas.getContext('2d');
    context.beginPath();
    context.fillStyle = 'blue';
    context.arc(200, 175, 135, 45 * Math.PI / 180, 135 * Math.PI / 180, true);
    context.closePath();
    context.fill();
    context.stroke();
     
    context.beginPath();
    context.fillStyle = 'white';
    context.arc(200, 200, 110, 40 * Math.PI / 180, 140 * Math.PI / 180, true);
    context.fill();
    context.stroke();
     
    context.beginPath();
    context.lineWidth = 2;
    context.fillStyle = 'white';
    context.moveTo(200, 100);
    context.bezierCurveTo(210, 40, 140, 40, 150, 100);
    context.lineTo(150, 100);
    context.bezierCurveTo(160, 130, 190, 130, 200, 100);
    context.closePath();
    context.fill();
    context.stroke();
    // 左
    context.beginPath();
    context.moveTo(165, 80);
    context.quadraticCurveTo(187, 75, 195, 95);
    context.stroke();
    context.beginPath();
    context.moveTo(160, 100);
    context.quadraticCurveTo(175, 85, 195, 95);
    context.stroke();
     
     
    context.beginPath();
    context.fillStyle = 'white';
    context.moveTo(200, 100);
    context.bezierCurveTo(190, 40, 260, 40, 250, 100);
    context.lineTo(250, 100);
    context.bezierCurveTo(240, 130, 210, 130, 200, 100);
    context.closePath();
    context.fill();
    context.stroke();
    // 右
    context.beginPath();
    context.save();
    context.scale(1, 2);
    context.translate(0, -50);
    context.arc(214, 95, 10, 0, 2 * Math.PI);
    context.fillStyle = 'black';
    context.fill();
    context.closePath();
    context.restore();
    context.stroke()
     
    context.beginPath();
    context.fillStyle = 'white';
    context.arc(211, 95, 7, 0, 2 * Math.PI);
    context.fill();
    context.stroke();
    // 鼻子
    context.beginPath();
    context.fillStyle = 'red';
    context.lineWidth = 2;
    context.arc(200, 150, 20, 0, 2 * Math.PI);
    context.fill();
    context.stroke();
     
    context.beginPath();
    context.moveTo(200, 170);
    context.quadraticCurveTo(205, 190, 200, 240);
    context.stroke();
     
    // 嘴
    context.beginPath();
    context.moveTo(120, 205);
    context.bezierCurveTo(160, 250, 240, 250, 280, 205);
    context.stroke();
    // 脖子
    context.beginPath();
    context.strokeStyle = 'red';
    context.lineWidth = 10;
    context.lineCap = 'round';
    context.moveTo(100, 270);
    context.lineTo(300, 270);
    context.stroke();
    // 胳膊
    context.beginPath();
    context.strokeStyle = 'black';
    context.lineWidth = 2;
    context.moveTo(110, 275);
    context.fillStyle = 'blue';
    context.quadraticCurveTo(50, 300, 98, 380);
    // context.beginPath();
     
    context.lineTo(105, 330);
    context.quadraticCurveTo(90, 400, 105, 450);
    // context.stroke();
    // context.beginPath();
     
    context.lineTo(105, 450);
    context.quadraticCurveTo(150, 480, 200, 450);
     
    context.lineTo(200, 450);
    context.quadraticCurveTo(255, 480, 295, 450);
     
    context.lineTo(295, 450);
    context.quadraticCurveTo(310, 400, 295, 330);
     
    context.lineTo(302, 380);
    context.quadraticCurveTo(350, 300, 290, 275);
    context.fillStyle = 'blue';
    context.closePath();
    context.fill();
    context.stroke();
     
    // 肚子
    context.beginPath();
    context.strokeStyle = 'black';
    context.fillStyle = 'white';
    context.lineWidth = 2;
    context.moveTo(140, 275);
    context.bezierCurveTo(50, 440, 350, 440, 260, 275);
    context.fill();
    context.stroke();
    // 肚兜
    context.beginPath();
    context.arc(200, 330, 50, 0, Math.PI, false);
    context.closePath();
    context.stroke();
    //铃铛
    context.beginPath();
    context.fillStyle = 'gold';
    context.strokeStyle = 'black';
    context.lineWidth = 2;
    context.arc(200, 295, 20, 0, 2 * Math.PI);
    context.fill();
    context.stroke();
    context.beginPath();
    context.lineWidth = 2;
    context.rect(181, 288, 38, 5);
    context.stroke();
    context.beginPath();
    context.arc(200, 300, 7, 0, 2 * Math.PI);
    context.stroke();
    //  鞋
    context.beginPath();
    context.moveTo(105, 450);
    context.bezierCurveTo(40, 490, 150, 500, 195, 480);
    context.stroke();
     
    context.beginPath();
    context.moveTo(295, 450);
    context.bezierCurveTo(350, 490, 255, 500, 195, 480);
    context.stroke();
    //  脚缝
    context.beginPath();
    context.moveTo(200, 450);
    context.quadraticCurveTo(200, 465, 195, 480);
    context.stroke();
    // 腿缝
    context.beginPath();
    context.moveTo(200, 410);
    context.quadraticCurveTo(205, 430, 200, 450);
    context.stroke();
    // 胡子
    context.beginPath();
    context.moveTo(90, 140);
    context.lineTo(160, 160);
    context.stroke();
     
    context.beginPath();
    context.moveTo(80, 170);
    context.lineTo(160, 175);
    context.stroke();
     
    context.beginPath();
    context.moveTo(80, 195);
    context.lineTo(160, 190);
    context.stroke();
     
    context.beginPath();
    context.moveTo(240, 175);
    context.lineTo(320, 170);
    context.stroke();
     
    context.beginPath();
    context.moveTo(240, 160);
    context.lineTo(320, 150);
    context.stroke();
     
    context.beginPath();
    context.moveTo(240, 190);
    context.lineTo(320, 195);
    context.stroke();
    </script>
    </html>

    最新评论

    返回顶部
  • 工信部:17年12批新能源车推荐车型目录 2019-05-11
  • 美国再挑贸易战,中方强力回击,全球市场跌声一片 2019-05-11
  • 四川都江堰再现野生大熊猫踪迹 比3月拍到的更肥 2019-05-10
  • 坚持和发展马克思主义的宣言书 2019-05-10
  • 解析视频播控平台黑产链 20元看12家网站VIP会员视频 2019-04-26
  • 众星云集 “欧洲红魔”能否用战绩兑现黄金一代的天赋 2019-04-26
  • 比如最高检的12309检查服务中心,原来还有显示信访处理进程,不过没有几天就取消了。[上火][上火] 也就是说办与不办也没有人知道,下边省事了,上边也就轻松了。 2019-04-16
  • 男女差别有多大?河北省首次公开发布分性别统计分析报告 2019-04-05
  • 菲律宾媒体和网民热议"中国剧场"开播 2019-04-05
  • 坚持和完善我国基本经济制度的两条新经验 2019-04-02
  • 5月份61城房价环比反弹 多地调控政策或再加码 ——凤凰网房产济南 2019-04-02
  • [洞见]草榴死了 欲望还活着草榴性 2019-04-02
  • 回顾:五年来习近平的“两会金句” 2019-04-02
  • 云南省2018年度国家社科基金项目申报工作的几点做法 2019-04-01
  • 地理君的专栏作者中国国家地理网 2019-04-01
  • 北京赛车pk10直播 秒速时时彩012走势 排列3开奖试机号走势图带连线 快乐扑克三开奖查询 麻将游戏 打麻将单机版 超级大乐透开奖公告 2017062福彩中奖号码 境外彩极速飞艇 三亚赌场 北京pk10计划软件 重庆幸运农场官网地址 手机网易彩票官方下载 牛牛热视频frenn 新时时彩三星组三 北单投注技巧