如何使用css，把div设置为一个椭圆容器,在做html页面开发时，我们一般都是使用div来做容器的，如果你需要一个椭圆形的容器，我们可以使用div来实现的，下面来看一下。......
html+canvas画喜羊羊图像
来源：互联网
2023-03-16 19:10:16 444
html canvas画喜羊羊图像
工具/原料
- adobe dreamweaver
方法/步骤
新建html文档。
书写hmtl代码。canvas id="demo" width="500" height="260">/canvas>
书写css代码。
style>
#demo{display:block; border:1px solid #000; margin:100px auto;}
/style>
书写并添加js代码。
script>
function funload()
{
var ctx = document.getElementById("demo").getContext("2d");
ctx.fillStyle = "#B4C2E5";//background
ctx.fillRect(0,0,500,180);
ctx.fillStyle = "#C5E7FF";
ctx.fillRect(0,180,500,80);
ctx.beginPath();//background lines
ctx.lineWidth = 2;
ctx.strokeStyle = "#7E8DAE";
ctx.moveTo(28,0);
ctx.lineTo(28,35);
ctx.lineTo(0,35);
ctx.moveTo(99,24);
ctx.lineTo(99,53);
ctx.lineTo(140,53);
ctx.moveTo(156,16);
ctx.lineTo(181,16);
ctx.moveTo(350,0);
ctx.lineTo(350,21);
ctx.moveTo(373,0);
ctx.lineTo(373,12);
ctx.moveTo(500,24);
ctx.lineTo(419,24);
ctx.lineTo(419,152);
ctx.lineTo(400,152);
ctx.moveTo(468,55);
ctx.lineTo(486,55);
ctx.lineTo(486,38);
ctx.lineTo(449,38);
ctx.lineTo(449,55);
ctx.lineTo(468,55);
ctx.lineTo(468,67);
ctx.lineTo(449,67);
ctx.lineTo(449,84);
ctx.lineTo(486,84);
ctx.lineTo(486,67);
ctx.lineTo(468,67);
ctx.moveTo(500,180);
ctx.lineTo(390,180);
ctx.moveTo(0,180);
ctx.lineTo(130,180);
ctx.moveTo(0,147);
ctx.lineTo(117,147);
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = "#B3D5EE";
ctx.moveTo(0,186);
ctx.lineTo(125,186);
ctx.moveTo(0,196);
ctx.lineTo(37,196);
ctx.lineTo(42,190);
ctx.lineTo(82,190);
ctx.lineTo(67,205);
ctx.lineTo(27,205);
ctx.lineTo(37,196);
ctx.moveTo(76,196);
ctx.lineTo(139,196);
ctx.moveTo(35,205);
ctx.lineTo(22,214);
ctx.lineTo(0,219);
ctx.moveTo(46,205);
ctx.lineTo(8,235);
ctx.moveTo(54,205);
ctx.lineTo(47,214);
ctx.lineTo(58,221);
ctx.lineTo(44,235);
ctx.moveTo(0,235);
ctx.lineTo(178,235);
ctx.moveTo(0,250);
ctx.lineTo(171,250);
ctx.moveTo(500,186);
ctx.lineTo(384,186);
ctx.moveTo(469,186);
ctx.lineTo(487,197);
ctx.lineTo(470,197);
ctx.lineTo(500,213);
ctx.moveTo(470,197);
ctx.lineTo(449,197);
ctx.lineTo(458,203);
ctx.lineTo(448,204);
ctx.lineTo(461,212);
ctx.lineTo(500,224);
ctx.moveTo(449,197);
ctx.lineTo(439,190);
ctx.lineTo(400,190);
ctx.lineTo(409,197);
ctx.lineTo(379,197);
ctx.moveTo(409,197);
ctx.lineTo(416,203);
ctx.lineTo(458,203);
ctx.moveTo(429,203);
ctx.lineTo(439,212);
ctx.lineTo(432,221);
ctx.lineTo(446,235);
ctx.moveTo(442,203);
ctx.lineTo(482,235);
ctx.moveTo(500,235);
ctx.lineTo(340,235);
ctx.moveTo(355,236);
ctx.lineTo(370,260);
ctx.stroke();
ctx.beginPath();//head
ctx.fillStyle = "#fff";
ctx.strokeStyle = "#826E56";
ctx.moveTo(328,210);
ctx.quadraticCurveTo(295,226,260,225);
ctx.quadraticCurveTo(221,226,188,210);
ctx.quadraticCurveTo(186,213,181,212);
ctx.quadraticCurveTo(158,220,155,200);
ctx.quadraticCurveTo(138,202,137,183);
ctx.quadraticCurveTo(122,178,127,161);
ctx.quadraticCurveTo(113,146,123,131);
ctx.quadraticCurveTo(116,114,125,103);
ctx.quadraticCurveTo(116,86,133,74);
ctx.quadraticCurveTo(127,55,150,53);
ctx.quadraticCurveTo(150,29,176,29);
ctx.quadraticCurveTo(179,11,198,16);
ctx.quadraticCurveTo(212,-3,231,6);
ctx.quadraticCurveTo(240,-4,258,6);
ctx.quadraticCurveTo(276,-3,287,5);
ctx.quadraticCurveTo(307,-4,319,17);
ctx.quadraticCurveTo(339,10,343,31);
ctx.quadraticCurveTo(368,30,369,52);
ctx.quadraticCurveTo(392,57,387,75);
ctx.quadraticCurveTo(401,90,393,105);
ctx.quadraticCurveTo(403,117,395,130);
ctx.quadraticCurveTo(406,148,392,161);
ctx.quadraticCurveTo(395,180,378,187);
ctx.quadraticCurveTo(378,203,363,206);
ctx.quadraticCurveTo(355,221,337,213);
ctx.quadraticCurveTo(331,213,328,210);
ctx.moveTo(318,215);//body
ctx.quadraticCurveTo(319,221,318,226);
ctx.quadraticCurveTo(326,233,322,241);
ctx.quadraticCurveTo(330,249,328,260);
ctx.lineTo(187,260);
ctx.lineTo(193,232);
ctx.quadraticCurveTo(195,225,201,220);
ctx.quadraticCurveTo(200,216,200,214);
ctx.fill();
ctx.stroke();
ctx.beginPath();//face
ctx.fillStyle = "#FFDEB1";
ctx.strokeStyle = "#826E56";
ctx.moveTo(328,210);
ctx.quadraticCurveTo(295,226,260,225);
ctx.quadraticCurveTo(221,226,188,210);
ctx.quadraticCurveTo(192,203,189,196);
ctx.quadraticCurveTo(198,182,183,176);
ctx.quadraticCurveTo(186,162,171,158);
ctx.quadraticCurveTo(173,150,167,147);
ctx.quadraticCurveTo(175,134,169,122);
ctx.quadraticCurveTo(174,113,174,101);
ctx.quadraticCurveTo(186,98,188,84);
ctx.quadraticCurveTo(203,86,213,76);
ctx.quadraticCurveTo(219,78,224,80);
ctx.bezierCurveTo(237,97,279,96,295,77);
ctx.quadraticCurveTo(300,76,305,76);
ctx.quadraticCurveTo(312,89,329,91);
ctx.quadraticCurveTo(330,105,343,111);
ctx.quadraticCurveTo(339,126,352,134);
ctx.quadraticCurveTo(344,146,346,161);
ctx.quadraticCurveTo(331,163,334,179);
ctx.quadraticCurveTo(322,185,331,199);
ctx.quadraticCurveTo(326,205,328,210);
ctx.moveTo(133,74);//ear
ctx.bezierCurveTo(120,80,117,98,103,103);
ctx.quadraticCurveTo(110,112,121,111);
ctx.quadraticCurveTo(122,107,125,103);
ctx.quadraticCurveTo(116,86,133,74);
ctx.moveTo(387,75);
ctx.bezierCurveTo(405,80,402,98,419,103);
ctx.quadraticCurveTo(409,112,397,111);
ctx.quadraticCurveTo(395,105,393,105);
ctx.quadraticCurveTo(401,90,387,75);
ctx.fill();
ctx.stroke();
ctx.beginPath();//arm
ctx.fillStyle = "#FFDEB1";
ctx.strokeStyle = "#826E56";
ctx.moveTo(200,214);
ctx.quadraticCurveTo(182,227,174,242);
ctx.quadraticCurveTo(166,255,177,260);
ctx.quadraticCurveTo(198,254,211,246);
ctx.quadraticCurveTo(217,247,222,241);
ctx.quadraticCurveTo(217,247,218,244);
ctx.quadraticCurveTo(225,253,230,241);
ctx.quadraticCurveTo(229,236,222,236);
ctx.quadraticCurveTo(229,236,230,241);
ctx.quadraticCurveTo(235,232,223,229);
ctx.quadraticCurveTo(228,229,231,227);
ctx.moveTo(231,233);
ctx.quadraticCurveTo(239,218,216,218);
ctx.quadraticCurveTo(222,220,222,218);
ctx.bezierCurveTo(219,206,208,220,202,231);
ctx.quadraticCurveTo(188,235,174,243);
ctx.quadraticCurveTo(183,238,194,232);
ctx.quadraticCurveTo(194,224,201,220);
ctx.lineTo(200,214);
ctx.moveTo(318,215);
ctx.quadraticCurveTo(319,221,318,226);
ctx.quadraticCurveTo(326,233,322,241);
ctx.quadraticCurveTo(330,249,328,260);
ctx.lineTo(343,260);
ctx.bezierCurveTo(350,247,343,237,318,215);
ctx.moveTo(327,249);
ctx.lineTo(331,245);
ctx.fill();
ctx.stroke();
ctx.beginPath();//horn
ctx.fillStyle = "#7F5D42";
ctx.strokeStyle = "#38332F";
ctx.moveTo(144,53);
ctx.bezierCurveTo(128,32,100,19,92,20);
ctx.quadraticCurveTo(89,18,95,13);
ctx.bezierCurveTo(115,6,147,8,176,26);
ctx.quadraticCurveTo(175,29,176,29);
ctx.quadraticCurveTo(150,30,150,52);
ctx.quadraticCurveTo(144,53,145,54);
ctx.moveTo(111,27);
ctx.quadraticCurveTo(106,15,116,10);
ctx.moveTo(129,37);
ctx.quadraticCurveTo(129,20,146,13);
ctx.moveTo(143,51);
ctx.quadraticCurveTo(154,34,172,24);
ctx.moveTo(376,54);
ctx.bezierCurveTo(386,35,399,25,427,21);
ctx.quadraticCurveTo(432,18,425,14);
ctx.bezierCurveTo(408,6,388,6,343,27);
ctx.quadraticCurveTo(343,28,344,31);
ctx.quadraticCurveTo(367,32,369,51);
ctx.quadraticCurveTo(371,53,376,54);
ctx.moveTo(377,51);
ctx.quadraticCurveTo(366,34,349,24);
ctx.moveTo(391,36);
ctx.quadraticCurveTo(388,20,378,12);
ctx.moveTo(410,24);
ctx.quadraticCurveTo(411,14,404,10);
ctx.fill();
ctx.stroke();
ctx.beginPath();//eyes and nose
ctx.fillStyle = "#fff";
ctx.strokeStyle = "#826E56";
ctx.arc(213,133,22,0,Math.PI*2,true);
ctx.moveTo(325,133);
ctx.arc(303,133,22,0,Math.PI*2,true);
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.fillStyle = "#000";
ctx.arc(213,136,10,0,Math.PI*2,true);
ctx.moveTo(311,136);
ctx.arc(302,136,10,0,Math.PI*2,true);
ctx.moveTo(259,181);
ctx.bezierCurveTo(282,181,282,162,259,162);
ctx.bezierCurveTo(236,162,236,181,259,181);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = "#fff";
ctx.arc(208,132,2,0,Math.PI*2,true);
ctx.moveTo(298,132);
ctx.arc(296,132,2,0,Math.PI*2,true);
ctx.moveTo(248,171);
ctx.bezierCurveTo(254,171,254,166,248,166);
ctx.bezierCurveTo(242,166,242,171,248,171);
ctx.fill();
ctx.beginPath();//eyebrows
ctx.fillStyle = "#46403B";
ctx.moveTo(196,102);
ctx.quadraticCurveTo(218,96,236,110);
ctx.quadraticCurveTo(221,86,196,102);
ctx.moveTo(279,109);
ctx.quadraticCurveTo(297,94,320,100);
ctx.quadraticCurveTo(295,84,279,109);
ctx.fill();//mouth
ctx.beginPath();
ctx.fillStyle = "#A5422B";
ctx.strokeStyle = "#88381D";
ctx.moveTo(280,209);
ctx.bezierCurveTo(280,195,239,195,239,210);
ctx.bezierCurveTo(236,216,285,217,280,209);
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.fillStyle = "#F6846C";
ctx.moveTo(280,209);
ctx.bezierCurveTo(279,204,240,204,239,210);
ctx.bezierCurveTo(236,216,285,217,280,209);
ctx.fill();
ctx.beginPath();//neck
ctx.fillStyle = "#294473";
ctx.strokeStyle = "#294473";
ctx.moveTo(318,216);
ctx.quadraticCurveTo(265,229,233,224);
ctx.quadraticCurveTo(233,229,232,232);
ctx.quadraticCurveTo(282,238,318,215);
ctx.fill();
ctx.stroke();
ctx.beginPath();//button
ctx.fillStyle = "#FAC55D";
ctx.strokeStyle = "#413609";
ctx.arc(260,242,15,0,Math.PI*2,true);
ctx.fill();
ctx.stroke();
ctx.beginPath();
ctx.fillStyle = "#000";
ctx.strokeStyle = "#413609";
ctx.arc(261,243,4,0,Math.PI*2,true);
ctx.moveTo(261,243);
ctx.lineTo(265,255);
ctx.fill();
ctx.stroke();
ctx.beginPath();//add
ctx.strokeStyle = "#826E56";
ctx.moveTo(232,49);
ctx.quadraticCurveTo(212,62,225,81);
ctx.moveTo(295,76);
ctx.quadraticCurveTo(299,63,288,60);
ctx.quadraticCurveTo(297,67,287,67);
ctx.quadraticCurveTo(278,70,273,50);
ctx.stroke();
}
funload();
/script>
代码整体结构。
查看效果。
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
标签： HTML
上一篇：html+css3约从小到大单根线条出现最后隐藏动画 下一篇：怎么制作网页
相关文章
- 详细阅读
- 详细阅读
-
HTML5创作工具，MAKA 2.0史上最全操作指南详细阅读
HTML5创作工具，MAKA 2.0史上最全操作指南,超过15000种模板组合。还怕你没有发挥的空间吗？MAKA（中文：码卡）作为中国最早推出移动端卡片式交互模式的创新者，随着HTML5技术的日渐成熟......
2023-03-16 434 HTML
![HTML网页制作：[17]CSS常用样式字体及颜色属性](https://exp-picture.cdn.bcebos.com/ba274f598540102a99638a11b142a07aa110c5d4.jpg)