使用canvas画小猪佩奇

1第一步 创建html页面，将canvas 标签引入 我们创建一个宽度（width） 为400px,高度为（height） 500px 的canvas 画布，为了让画布居中，帮他加些样式tyle="border: 1px solid #808080; margin-left:400px;<canvas id="mycanvas" width="400" height="500" style="border: 1px solid #808080; margin-left:400px;"></canvas>2第二步写上 <script></script>然后j**ascript 代码注意 ：var ct = document.getelementbyid('mycanvas').getcontext('2d');这里是 开始， 每个canvas 都要写上这句话，不然无效 ct.beginpath() //开始 ct.linewidth = "3"; // 宽度 3cm 的线 ct.strokestyle = "pink"; // 线段颜色为粉红 //起点 ct.moveto(75, 15); //控制范围 结束 //context.quadraticcurveto(cpx, cpy, x, y); ct.quadraticcurveto(220, 26, 220, 160); //第一步 坐标轴 ct.moveto(219, 141); ct.quadraticcurveto(240, 300, 70, 250); //第三步 // ct.stroke() ct.moveto(76, 253); ct.quadraticcurveto(16, 220, 74, 111); ct.moveto(73, 112); ct.quadraticcurveto(60, 112, 31, 83); ct.moveto(31, 83); ct.quadraticcurveto(23, 26, 75, 15); ct.moveto(75, 15); ct.quadraticcurveto(108, 32, 99, 61); ct.moveto(99, 61); ct.quadraticcurveto(66, 101, 31, 81); ct.stroke();注意，这里你需要一张小猪佩奇照片然后大致把他头画出来了3 // 鼻子的两个孔 ct.beginpath(); ct.arc(48, 48, 6, 0 * math.pi, 2.5 * math.pi); ct.stroke(); ct.beginpath(); ct.arc(77, 48, 6, 0 * math.pi, 2.5 * math.pi); ct.stroke(); //耳朵 //左耳朵 ct.beginpath(); ct.moveto(149, 31); ct.quadraticcurveto(155, 0, 189, 6); ct.moveto(189, 6); ct.quadraticcurveto(188, 30, 170, 44); //右耳朵 ct.moveto(188, 59); ct.quadraticcurveto(198, 24, 222, 32); ct.moveto(222, 32); ct.quadraticcurveto(255, 54, 199, 75); ct.stroke(); //嘴巴 ct.beginpath(); ct.arc(93, 178, 30, 0 * math.pi, 2.5 * math.pi); ct.stroke(); //眼睛 ct.beginpath(); ct.strokestyle = " #bdbdbd"; ct.arc(141, 67, 14, 0 * math.pi, 2.5 * math.pi); ct.stroke(); ct.beginpath(); ct.strokestyle = "#000000"; ct.arc(136, 64, 6, 0 * math.pi, 2.5 * math.pi); ct.stroke(); ct.beginpath(); ct.strokestyle = " #bdbdbd"; ct.arc(170, 88, 14, 0 * math.pi, 2.5 * math.pi); ct.stroke(); ct.beginpath(); ct.strokestyle = "#000000"; ct.fillstyle = "#ff0000"; ct.arc(165, 87, 6, 0 * math.pi, 2.5 * math.pi); ct.stroke(); // 粉红嘴腮 ct.beginpath(); ct.strokestyle = " #cd8c95"; ct.arc(178, 147, 20, 0 * math.pi, 2.5 * math.pi); ct.stroke();4 //身体 ct.beginpath(); ct.strokestyle = "red"; ct.moveto(195, 245); ct.quadraticcurveto(215, 215, 244, 410); ct.moveto(244, 410); ct.quadraticcurveto(244, 410, 38, 410); ct.moveto(38, 410); ct.quadraticcurveto(11, 410, 76, 251); ct.stroke(); //两只手 //左手 ct.beginpath(); ct.strokestyle = "pink"; ct.moveto(58, 294); ct.quadraticcurveto(50, 288, 12, 238); ct.moveto(56, 300); ct.quadraticcurveto(56, 300, 16, 260); ct.lineto(3, 269); ct.lineto(11, 250); ct.lineto(3, 228); ct.lineto(15, 241); ct.stroke(); //右手 ct.beginpath(); ct.moveto(223, 292); ct.quadraticcurveto(266, 288, 287, 271); ct.moveto(287, 271); ct.quadraticcurveto(236, 233, 279, 245); ct.moveto(279, 245); ct.quadraticcurveto(255, 200, 295, 247); ct.moveto(295, 247); ct.quadraticcurveto(288, 200, 306, 226); ct.moveto(306, 226); ct.quadraticcurveto(311, 250, 308, 248); ct.moveto(308, 248); ct.quadraticcurveto(344, 200, 334, 245); ct.moveto(334, 245); ct.quadraticcurveto(311, 280, 300, 280); ct.moveto(300, 280); ct.quadraticcurveto(311, 280, 224, 303); ct.stroke(); //左脚 ct.beginpath(); ct.moveto(94, 409); ct.quadraticcurveto(94, 409, 96, 451); ct.moveto(96, 451); ct.quadraticcurveto(53, 429, 56, 461); ct.moveto(56, 461); ct.quadraticcurveto(56, 461, 107, 464); ct.lineto(106, 409); //右脚 ct.moveto(183, 411); ct.lineto(182, 447); ct.quadraticcurveto(124, 434, 136, 464); ct.lineto(196, 463); ct.lineto(195, 409); ct.stroke(); //尾巴 ct.beginpath(); ct.linewidth = "7"; ct.strokestyle = "pink"; ct.linecap = "round"; ct.moveto(238, 360); ct.quadraticcurveto(266, 380, 267, 360); ct.quadraticcurveto(254, 330, 250, 380); ct.quadraticcurveto(254, 420, 290, 369); ct.stroke();我承认自己的审美观不太好，但是也还是看的过去，对吧，。。。嗯，这个佩奇，需要自己微调一下地方，自己定位一下，就可以了5好了，到这里就完了哦，感谢你的阅读哦，觉得好，就点个赞吧，这样我也有动力继续写下去哦end 20210311