canvas教程

前端小项目:使用canvas绘画哆啦A梦(2)

字号+ 作者:H5之家 来源:H5之家 2017-04-23 14:02 我要评论( )

接着画嘴: cxt .moveTo ( 80 , 240 ); cxt .quadraticCurveTo ( 200 , 350 , 320 , 240 ); cxt .stroke (); 嘴: 嘴 接下来画围巾: cxt.beginPath();cxt.moveTo( 96 , 316 );cxt.lineTo( 305 , 316 );cxt.lineTo(

接着画嘴:

cxt.moveTo(80, 240); cxt.quadraticCurveTo(200, 350, 320, 240); cxt.stroke();

嘴:

接下来画围巾:

cxt.beginPath(); cxt.moveTo(96, 316); cxt.lineTo(305, 316); cxt.lineTo(320, 316); cxt.arcTo(330, 316, 330, 326, 10);//在画布上创建介于两个切线之间的弧,起点坐标为(330,316),终点坐标为(330,326),半径为10 cxt.lineTo(330, 336); cxt.arcTo(330, 346, 305, 346, 10); cxt.lineTo(81, 346); cxt.arcTo(71, 346, 71, 336, 10); cxt.lineTo(71, 326); cxt.arcTo(71, 316, 81, 316, 10); cxt.lineTo(96, 316); cxt.fillStyle = '#b13209'; cxt.fill(); cxt.stroke();

围巾:

围巾

接着画衣服:

cxt.beginPath(); cxt.fillStyle = '#0bb0da'; cxt.moveTo(80, 346); //左衣服 cxt.lineTo(26, 406); cxt.lineTo(65, 440); cxt.lineTo(85, 418); cxt.lineTo(85, 528); cxt.lineTo(185, 528); //右衣服 cxt.lineTo(315, 528); cxt.lineTo(315, 418); cxt.lineTo(337, 440); cxt.lineTo(374, 406); cxt.lineTo(320, 346); cxt.fill(); cxt.stroke();

衣服:

衣服

接着画手:

//左手 cxt.beginPath(); cxt.fillStyle = '#fff'; cxt.arc(37, 433, 30, 0, 2 * Math.PI); cxt.fill(); cxt.stroke(); //右手 cxt.beginPath(); cxt.fillStyle = '#fff'; cxt.arc(363, 433, 30, 0, 2 * Math.PI); cxt.fill(); cxt.stroke();

手:

接着画肚:

cxt.beginPath(); cxt.fillStyle = '#fff'; cxt.arc(200, 400, 91, 1.8 * Math.PI, 1.2 * Math.PI); cxt.fill(); cxt.stroke();

肚:

接着画小口袋

cxt.beginPath(); cxt.fillStyle = '#fff'; cxt.moveTo(130, 394); cxt.lineTo(270, 394); cxt.moveTo(130, 394); cxt.bezierCurveTo(130, 490, 270, 490, 270, 394); cxt.fill(); cxt.stroke();

小口袋:

小口袋

最后画两只脚以及两只脚的的空隙:

/*两只脚的空隙*/ cxt.beginPath(); cxt.fillStyle = '#fff'; cxt.arc(200, 529, 20,Math.PI, 0); cxt.fill(); cxt.stroke(); /*脚*/ //左脚 cxt.beginPath(); cxt.fillStyle='#fff'; cxt.moveTo(180,528); cxt.lineTo(72,528); cxt.bezierCurveTo(52,528,52,558,72,558); cxt.lineTo(180,558); cxt.moveTo(180,558); cxt.bezierCurveTo(200,558,200,528,180,528); cxt.fill(); cxt.stroke(); //右脚 cxt.beginPath(); cxt.fillStyle='#fff'; cxt.moveTo(220,528); cxt.lineTo(328,528); cxt.bezierCurveTo(348,528,348,558,328,558); cxt.lineTo(220,558); cxt.moveTo(220,558); cxt.bezierCurveTo(200,558,200,528,220,528); cxt.fill(); cxt.stroke();

完成了︿( ̄︶ ̄)︿

哆啦A梦

完整代码请点击: 哆啦A梦

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • canvas绘制七巧板

    canvas绘制七巧板

    2017-04-23 15:03

  • Canvas学习:绘制文本

    Canvas学习:绘制文本

    2017-04-23 08:01

  • Canvas QML Type

    Canvas QML Type

    2017-04-22 15:01

  • HTML5 canvas随机画线和小方块基础反弹运动实例

    HTML5 canvas随机画线和小方块基础反弹运动实例

    2017-04-21 16:07

网友点评
/