您好,欢迎访问一九零五行业门户网

HTML5利用canvas绘制哆啦A梦头部(代码实例)

html5的canvas是很强大的,下面本篇文章使用html5 canvas 实现一个简单的哆啦a梦头部。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。
效果如下:
代码如下:
<div class="doraemon"> <canvas id="face" width="600" height="1500">您的浏览器不支持canvas</canvas></div><script> var face = document.getelementbyid('face').getcontext("2d"); face.arc(252,252,250,0,360*math.pi/180); face.fillstyle = '#07beea'; //设置填充颜色 face.fill(); //填充 face.linewidth = 2; //轮廓线宽度 face.strokestyle = '#333'; //轮廓线颜色 face.stroke(); //画轮廓线 face.beginpath(); //重置当前绘画路径 face.moveto(160,450); //画笔移动到起始点 face.beziercurveto(0,400,0,110,210,115); //三次贝塞尔曲线(左边) face.lineto(290,115); face.beziercurveto(500,110,500,400,340,450); face.beziercurveto(280,470,220,470,160,450); face.fillstyle = '#fff'; face.fill(); face.stroke(); //画出边框 face.beginpath(); //重置当前绘画路径 用于画眼睛和鼻子 face.moveto(150,150); face.lineto(150,100); //左眼左竖线 face.beziercurveto(160,50,240,50,250,100); //左眼下面 face.lineto(250,150); //左眼右竖线 face.beziercurveto(240,200,160,200,150,150); //左眼上面 face.moveto(250,150); face.lineto(250,100); //右眼左竖线 face.beziercurveto(260,50,340,50,350,100); //右眼上面 face.lineto(350,150); //右眼右竖线 face.beziercurveto(340,200,260,200,250,150); //右眼下面 face.fillstyle = '#fff'; face.fill(); face.stroke(); face.beginpath(); face.arc(225,155,10,0,360*math.pi/180); //眼珠 face.arc(275,155,10,0,360*math.pi/180); face.fillstyle = '#333'; face.fill(); face.beginpath(); //鼻子 face.arc(250,197,25,0,360*math.pi/180); face.fillstyle = '#c93e00'; face.fill(); face.stroke(); face.beginpath(); face.arc(260,190,10,0,360*math.pi/180); var grd = face.createradialgradient(260,190,2,260,190,10); //设置内外圆原点和半径 grd.addcolorstop(0,'#fff'); grd.addcolorstop(1,'#c93e00'); face.fillstyle = grd; face.fill(); //嘴巴 face.beginpath(); face.moveto(250,222); face.lineto(250,395); face.moveto(100,320); face.beziercurveto(180,420,320,420,400,320); face.linewidth = 3; face.stroke(); //胡须 face.beginpath(); face.moveto(80,200); face.lineto(180,220); face.moveto(80,245); face.lineto(180,245); face.moveto(80,290); face.lineto(180,270); face.moveto(320,220); face.lineto(420,200); face.moveto(320,245); face.lineto(420,245); face.moveto(320,270); face.lineto(420,290); face.stroke();</script>
更多编程相关知识,请访问:编程视频!!
以上就是html5利用canvas绘制哆啦a梦头部(代码实例)的详细内容。
其它类似信息

推荐信息