canvas简易绘图（海绵宝宝篇）

news/2024/11/28 13:41:34/

最近在研究canvas，简单的用canvas绘制了一下卡通人物--海绵宝宝。

图片如下：


代码如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>canvas海绵宝宝</title></head><body><canvas id="canvas" width="1000" height="700" style="background: #01539f;"></canvas></body><script>var canvas = document.getElementById("canvas");var ctx = canvas.getContext("2d");with(ctx){//袖子//左beginPath();fillStyle="#fff";strokeStyle="#000";lineWidth=2;bezierCurveTo(142,253,112,263,112,303)quadraticCurveTo(120,308,150,303)fill();stroke();closePath();//右beginPath();fillStyle="#fff";strokeStyle="#000";lineWidth=2;bezierCurveTo(445,253,477,263,477,303)quadraticCurveTo(467,308,447,303)fill();stroke();closePath();//胳膊//左beginPath();fillStyle="#f5e261";strokeStyle="#000";lineWidth=2;moveTo(122,306);lineTo(110,406);lineTo(120,406);lineTo(132,306);fill();stroke();closePath();//右beginPath();fillStyle="#f5e261";strokeStyle="#000";moveTo(458,306);lineTo(470,406);lineTo(480,406);lineTo(468,306);fill();stroke();closePath();//手//左//衣服beginPath();fillStyle="#fff";strokeStyle="#000";lineWidth=5;shadowColor = "#000"; shadowOffsetX = 0; shadowOffsetY = 0; shadowBlur = 0; moveTo(145,385);lineTo(146,425);lineTo(442,425);lineTo(443,385);stroke();fill();closePath();//裤子beginPath();fillStyle="#ae6f28";strokeStyle="#000";moveTo(146,427);lineTo(147,470);lineTo(441,470);lineTo(442,427);stroke();fill();closePath();//裤子图案beginPath();fillStyle="#000";rect(156,438,60,15);rect(236,438,120,15);rect(373,438,60,15);fill();closePath();//裤腿beginPath();fillStyle="#ae6f28";strokeStyle="#000";lineWidth=2;moveTo(190,472);lineTo(190,490);lineTo(235,490);lineTo(235,472);moveTo(350,472);lineTo(350,490);lineTo(395,490);lineTo(395,472);fill();stroke();closePath();//腿beginPath();fillStyle="#fffe71";strokeStyle="#000";lineWidth=2;moveTo(208,491);lineTo(208,516);lineTo(218,516);lineTo(218,491);moveTo(368,491);lineTo(368,516);lineTo(378,516);lineTo(378,491);fill();stroke();closePath();//袜子beginPath();fillStyle="#fff";strokeStyle="#000";lineWidth=2;moveTo(208,517);lineTo(207,560);lineTo(218,560);lineTo(218,517);moveTo(368,517);lineTo(368,560);lineTo(379,560);lineTo(378,517);fill();stroke();closePath();//蓝杠beginPath();strokeStyle="#536d92";lineWidth=4;moveTo(208,523);lineTo(218,523);moveTo(368,523);lineTo(378,523);stroke();closePath();//红杠beginPath();strokeStyle="#da4751";lineWidth=4;moveTo(209,530);lineTo(218,530);moveTo(369,530);lineTo(378,530);stroke();closePath();//领带beginPath();strokeStyle="#000";lineWidth=5;fillStyle="#ef4641";moveTo(270,385);lineTo(320,385);lineTo(298,413);lineTo(292,413);lineTo(270,385);moveTo(292,415);lineTo(280,446);lineTo(295,462);lineTo(310,446);lineTo(298,415);stroke();fill();closePath();//领子beginPath();strokeStyle="#000";fillStyle="#fff";moveTo(280,393);lineTo(265,410);lineTo(218,385);moveTo(310,393);lineTo(325,410);lineTo(362,385);stroke();fill();closePath();//脸beginPath();strokeStyle="#818620";fillStyle="#f5e262";lineWidth=5;bezierCurveTo(140,50,150,60,160,50);quadraticCurveTo(170,40,180,50);quadraticCurveTo(190,60,200,50);quadraticCurveTo(210,40,220,50);quadraticCurveTo(230,60,240,50);quadraticCurveTo(250,40,260,50);quadraticCurveTo(270,60,280,50);quadraticCurveTo(290,40,300,50);quadraticCurveTo(310,60,320,50);quadraticCurveTo(330,40,340,50);quadraticCurveTo(350,60,360,50);quadraticCurveTo(370,40,380,50);quadraticCurveTo(390,60,400,50);quadraticCurveTo(410,40,420,50);quadraticCurveTo(430,60,440,50);quadraticCurveTo(450,40,460,50);quadraticCurveTo(465,60,460,70);quadraticCurveTo(450,80,460,90);quadraticCurveTo(468,100,458,110);quadraticCurveTo(446,120,456,130);quadraticCurveTo(466,140,456,150);quadraticCurveTo(444,160,454,170);quadraticCurveTo(464,180,454,190);quadraticCurveTo(442,200,452,210);quadraticCurveTo(462,220,452,230);quadraticCurveTo(440,240,450,250);quadraticCurveTo(460,260,450,270);quadraticCurveTo(438,280,448,290);quadraticCurveTo(458,300,448,310);quadraticCurveTo(436,320,446,330);quadraticCurveTo(456,340,446,350);quadraticCurveTo(434,360,444,370);quadraticCurveTo(454,380,444,390);quadraticCurveTo(435,405,424,390);quadraticCurveTo(415,380,405,390);quadraticCurveTo(395,400,385,390);quadraticCurveTo(375,380,365,390);quadraticCurveTo(355,400,345,390);quadraticCurveTo(335,380,325,390);quadraticCurveTo(315,400,305,390);quadraticCurveTo(295,380,285,390);quadraticCurveTo(275,400,265,390);quadraticCurveTo(255,380,245,390);quadraticCurveTo(235,400,225,390);quadraticCurveTo(215,380,205,390);quadraticCurveTo(195,400,185,390);quadraticCurveTo(175,380,165,390);quadraticCurveTo(155,400,145,390);quadraticCurveTo(135,380,145,370);quadraticCurveTo(153,360,143,350);quadraticCurveTo(133,340,143,330);quadraticCurveTo(151,320,141,310);quadraticCurveTo(131,300,141,290);quadraticCurveTo(149,280,139,270);quadraticCurveTo(129,260,139,250);quadraticCurveTo(147,240,137,230);quadraticCurveTo(127,220,137,210);quadraticCurveTo(145,200,135,190);quadraticCurveTo(125,180,135,170);quadraticCurveTo(143,160,133,150);quadraticCurveTo(123,140,133,130);quadraticCurveTo(141,120,131,110);quadraticCurveTo(121,100,131,90);quadraticCurveTo(139,80,129,70);quadraticCurveTo(119,60,129,50);quadraticCurveTo(137,45,140,50);stroke();fill();closePath();//眼睛beginPath();strokeStyle="#000";fillStyle="#fff";arc(249,180,45,0,Math.PI*2,true);arc(341,180,45,0,Math.PI*2,true);stroke();fill();closePath();//眼仁beginPath();strokeStyle="#000";fillStyle="#50d1f1";arc(255,180,18,0,Math.PI*2,true);stroke();fill();closePath();beginPath();strokeStyle="#000";fillStyle="#50d1f1";arc(335,180,18,0,Math.PI*2,true);stroke();fill();closePath();//眼球beginPath();strokeStyle="#000";fillStyle="#000";arc(255,180,10,0,Math.PI*2,true);stroke();fill();closePath();beginPath();strokeStyle="#000";fillStyle="#000";arc(335,180,10,0,Math.PI*2,true);stroke();fill();closePath();//眼睫毛beginPath();lineWidth=6;strokeStyle="#000";moveTo(210,122);lineTo(223,142);moveTo(247,112);lineTo(247,133);moveTo(283,117);lineTo(270,140);moveTo(307,120);lineTo(320,140);moveTo(344,112);lineTo(344,133);moveTo(380,120);lineTo(365,140);stroke();closePath();//嘴角beginPath();fillStyle="#fdd06b"lineWidth=3;strokeStyle="#ca5939";moveTo(190,230);bezierCurveTo(160,175,265,190,230,230);stroke();fill();closePath();beginPath();fillStyle="#fdd06b"lineWidth=3;strokeStyle="#ca5939";moveTo(350,230);bezierCurveTo(325,175,435,190,395,230);stroke();fill();closePath();//牙beginPath();strokeStyle="#000";lineWidth=2;fillStyle="#fff";moveTo(275,272);lineTo(275,292);lineTo(295,292);lineTo(295,272);moveTo(300,272);lineTo(300,292);lineTo(320,292);lineTo(320,271);//rect(297,252,20,20);fill();stroke();closePath();//嘴beginPath();strokeStyle="#000";lineWidth=3;bezierCurveTo(210,220,290,340,380,220);stroke();closePath();beginPath();strokeStyle="#000";lineWidth=2;bezierCurveTo(205,225,205,215,220,220);stroke();closePath();beginPath();strokeStyle="#000";lineWidth=2;bezierCurveTo(370,220,380,215,385,225);stroke();closePath();//鼻子beginPath();strokeStyle="#000";lineWidth=3;fillStyle="#f5e262";moveTo(290,215);bezierCurveTo(265,170,340,185,300,225);stroke();fill();closePath();//下巴beginPath();strokeStyle="#cb662e";lineWidth=2;bezierCurveTo(250,305,270,330,290,310);quadraticCurveTo(300,305,310,310);quadraticCurveTo(330,330,350,305);shadowColor = "#cb662e"; shadowOffsetX = 0; shadowOffsetY = -3; shadowBlur = 10; stroke();closePath();//雀斑beginPath();fillStyle="#bf7627";arc(197,205,2,0,Math.PI*2,true);fill();closePath();beginPath();fillStyle="#bf7627";arc(210,214,2,0,Math.PI*2,true);fill();closePath();beginPath();fillStyle="#bf7627";arc(218,207,2,0,Math.PI*2,true);fill();closePath();beginPath();fillStyle="#bf7627";arc(367,205,2,0,Math.PI*2,true);fill();closePath();beginPath();fillStyle="#bf7627";arc(390,206,2,0,Math.PI*2,true);fill();closePath();beginPath();fillStyle="#bf7627";arc(380,213,2,0,Math.PI*2,true);fill();closePath();//皮鞋//左beginPath();strokeStyle="#000";fillStyle="#000";lineWidth=4;shadowColor = "#000"; shadowOffsetX = 0; shadowOffsetY = 0; shadowBlur = 0; arc(180,577,11,0,Math.PI*2,true);bezierCurveTo(185,560,197,575,207,560);moveTo(207,560);lineTo(217,560);quadraticCurveTo(227,570,217,585);quadraticCurveTo(197,580,180,585);quadraticCurveTo(207,561,185,570);rect(207,585,10,4)stroke();fill();//ctx.rotate( m * Math.PI / 180)closePath();//右beginPath();strokeStyle="#000";fillStyle="#000";lineWidth=4;shadowColor = "#000"; shadowOffsetX = 0; shadowOffsetY = 0; shadowBlur = 0; arc(405,577,11,0,Math.PI*2,true);bezierCurveTo(400,560,388,575,378,560);moveTo(378,560);lineTo(368,560);quadraticCurveTo(358,570,368,585);quadraticCurveTo(388,580,405,585);quadraticCurveTo(422,561,400,570);rect(368,585,10,4)stroke();fill();//ctx.rotate( m * Math.PI / 180)closePath();//白点beginPath();strokeStyle="#f5e262";fillStyle="#c4b127";fill();EvenCompEllipse(ctx, 160, 100, 10, 15);EvenCompEllipse(ctx, 150, 150, 5, 7);EvenCompEllipse(ctx, 200, 320, 7, 10)EvenCompEllipse(ctx, 225, 350, 11, 16)EvenCompEllipse(ctx, 425, 120, 11, 16)EvenCompEllipse(ctx, 410, 320, 9, 12)EvenCompEllipse(ctx, 380, 340, 6, 9)closePath();}function EvenCompEllipse(ctx, x, y, a, b){ctx.save();//选择a、b中的较大者作为arc方法的半径参数var r = (a > b) ? a : b; var ratioX = a / r; //横轴缩放比率var ratioY = b / r; //纵轴缩放比率ctx.scale(ratioX, ratioY); //进行缩放（均匀压缩）ctx.beginPath();//从椭圆的左端点开始逆时针绘制ctx.moveTo((x + a) / ratioX, y / ratioY);ctx.arc(x / ratioX, y / ratioY, r, 0, 2 * Math.PI);ctx.closePath();ctx.stroke();ctx.fill();ctx.restore();};</script>
</html>



http://www.ppmy.cn/news/340085.html

相关文章

JS中Map的遍历（转）

JS中Map的遍历（转）

转自&#xff1a;JS中Map的遍历 1、forEach遍历 const map new Map([[key1,v1],[key2,v2],[key3,v3]]); console.log(map); map.forEach((val,key) > {console.log(val,key); // 先输出value&#xff0c;再输出key }) /** v1 key1 v2 key2 v3 key3 */ 2、for…of… for(let…
阅读更多...
python编程100例海绵宝宝-python基础1（理论基础）

python编程100例海绵宝宝-python基础1（理论基础）

1.python是什么语言 2.python的发展史 3.python2与python3的区别 4.python的语言类型 5.python的优缺点 6.IDLE是什么 7.变量是什么 一.python是什么语言&#xff1f; python是脚本语言&#xff0c;脚本语言是电脑编程语言&#xff0c;因为也能让开发者编写出让电脑听命…
阅读更多...
python turtle画海绵宝宝_24.1. turtle — 海龟绘图 — Python 3.6.12 文档

python turtle画海绵宝宝_24.1. turtle — 海龟绘图 — Python 3.6.12 文档

24.1.1.概述 Turtle graphics is a popular way for introducing programming to kids. It was part of the original Logo programming language developed by Wally Feurzig and Seymour Papert in 1966. 请想象绘图区有一只机器海龟，起始位置在 x-y 平面的 (0, 0) 点。…
阅读更多...
python画海绵宝宝代码_Python_Turtle库画一只派大星

python画海绵宝宝代码_Python_Turtle库画一只派大星

一、网上找的一个喜欢又不难画的派大星图片 画出好看的图形的方法就是找到画各种基础形状的代码，将他们拼凑起来，整体图形的布局是否合适就需要一遍一遍的试出来。 我绘制的图形中，左上方的四个心形可以跳动。 派大星.jpg 二、一些基本语法 1.turtle的绘图窗体 turtle.…
阅读更多...
python画海绵宝宝-一些简单的python例子

python画海绵宝宝-一些简单的python例子

1.【背景】 最近，派大星想要减肥，他决定控制自己的饮食，少吃一点蟹黄堡。 海绵宝宝为了帮助好朋友派大星，和派大星一起制定了一个饮食游戏。 游戏规则如下： 如果派大星一天吃超过40个蟹黄堡，就要给海绵宝宝100块； 如果派大星一天吃小于等于40个的蟹黄堡，海绵宝宝就…
阅读更多...
python编程100例海绵宝宝-宝宝的python

python编程100例海绵宝宝-宝宝的python

广告关闭 2017年12月，云+社区对外发布，从最开始的技术博客到现在拥有多个社区产品。未来，我们一起乘风破浪，创造无限可能。 前言：大家跟我一起念：python大法好，跟着本宝宝用python抢火车票！ 具体步骤：准备工作首先我们需要splinter安装：pip install splinter -i htt…
阅读更多...
python画海绵宝宝详细解说_canvas简易绘图的实现（海绵宝宝篇）

python画海绵宝宝详细解说_canvas简易绘图的实现（海绵宝宝篇）

最近在研究canvas，简单的用canvas绘制了一下卡通人物--海绵宝宝。 图片如下： 代码如下：canvas海绵宝宝 var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); with(ctx){//袖子 //左 beginPath(); fillStyle="#ff…
阅读更多...
Qt信号和槽

Qt信号和槽

一、定义 信号与槽&#xff08;Signal & Slot&#xff09;是 Qt 编程的基础&#xff0c;也是 Qt 的一大创新。因为有了信号与槽的编程机制&#xff0c;在 Qt 中处理界面各个组件的交互操作时变得更加直观和简单。 信号&#xff08;Signal&#xff09;就是在特定情况下被发…
阅读更多...
最新文章

Copyright @ 2022~2023