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

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

原创最新推荐文章于 2023-04-03 09:52:00 发布 · 134 阅读

0 ·

CC 4.0 BY-SA版权

本文分享了一次使用HTML5 Canvas元素进行绘画的实践，通过简单的代码绘制了一个卡通人物“丁”老头，展示了Canvas在图形绘制方面的乐趣和潜力。

今天工作量不大，得空了解了一下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();

这么一看，canvas还是很好玩的哦