初鉴canvas，展示个小小的小案例

最新推荐文章于 2023-04-03 09:52:00 发布

孤身不觉晚

最新推荐文章于 2023-04-03 09:52:00 发布

阅读量116

点赞数

本文链接：https://blog.csdn.net/qq_40043424/article/details/103633512

版权

今天工作量不大，得空了解了一下canvas,顺便画出了一个“丁”老头，特此展示，以待大众取乐而已！

在这里插入图片描述
好不好看？？？？

算了，辣眼就辣眼吧，看代码吧。

<canvas id="canvas" width="500" height="500"></canvas>

var canvas = document.getElementById("canvas");
			var context = canvas.getContext('2d');
            
            //先画一个头
            context.beginPath();
            context.arc(250,250,50,0,Math.PI*2);
            context.stroke();
            
            //再画两个耳朵
            context.beginPath();
            context.arc(200,200,20,0,Math.PI*2);
            context.fill();
            context.beginPath();
            context.arc(300,200,20,0,Math.PI*2);
            context.fill();
            
            //再画两只眼
            context.beginPath();
            context.arc(230,240,10,0,Math.PI*2);
            context.stroke();
            context.beginPath();
            context.arc(270,240,10,0,Math.PI*2);
            context.stroke();
            
            //补上两个眼珠子
            context.beginPath();
            context.arc(230,240,2,0,Math.PI*2);
            context.fill();
            context.beginPath();
            context.arc(270,240,2,0,Math.PI*2);
            context.fill();
            
            //再画一个三角鼻子
            context.beginPath();
            context.moveTo(250,250);//画布中指点一个点，不创建线条
            context.lineTo(240,260);//添加一个新点，然后创建从该点到画布中最后指定点的线条（该方法并不会创建线条）
            context.lineTo(260,260);//添加一个新点，然后创建从该点到画布中最后指定点的线条（该方法并不会创建线条）
            context.closePath();//末点回到起点
            context.stroke();
            
            //再画一个嘴巴
            context.beginPath();
            context.arc(250,270,15,0,Math.PI,false);
            context.stroke();