用HTML5 canvas画叮当猫头部,HTML5利用canvas绘制哆啦A梦头部（代码实例）

朴灿烈づ我的快乐病毒、 2022-10-11 13:36 136阅读 0赞

![cbe3c7d2ff8b05c87bcd27bbce97cdda.png][]

html5的canvas是很强大的，下面本篇文章使用html5 canvas 实现一个简单的哆啦A梦头部。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

效果如下：

![81d28677cb3589a30ad34eb69c18b97f.png][]

代码如下：

您的浏览器不支持canvas

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();

更多编程相关知识，请访问：编程视频！！

[cbe3c7d2ff8b05c87bcd27bbce97cdda.png]: /images/20221005/8069b6144e744e6486f5cc12b748fe12.png
[81d28677cb3589a30ad34eb69c18b97f.png]: /images/20221005/5a717b921eeb4100baba96e489c0f81b.png

用HTML5 canvas画叮当猫头部,HTML5利用canvas绘制哆啦A梦头部（代码实例）

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 HTML5——Canvas绘制曲线

相关利用canvas画布画哆啦A梦

相关用HTML5 canvas画叮当猫头部,HTML5利用canvas绘制哆啦A梦头部（代码实例）

相关 html5 canvas word,HTML5 Canvas

相关 html5绘制div,HTML5 Canvas 绘制图像

相关 html5画一个圆点,HTML5 Canvas绘制圆点虚线实例

相关 html5 canvas画云

相关【Html5】canvas绘制圆形

相关【html5每日练习】html5 canvas画线

相关 [html5 canvas]用html5的canvas画一个可移动的方块