我的编程空间，编程开发者的网络收藏夹
学习永远不晚
位置：首页-资讯-后端开发

canvas简易绘图的实现示例

2023-06-09 13:43

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号
获取短信验证
立即预约

请填写图片验证码后获取短信验证码

看不清楚，换张图片

免费获取短信验证码

canvas简易绘图的实现示例

小编给大家分享一下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>

以上是“canvas简易绘图的实现示例”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！

免责声明：

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

阅读原文内容投诉

canvas简易绘图的实现示例

下载Word文档到电脑，方便收藏和打印～

下载Word文档

相关文章

猜你喜欢

canvas简易绘图的实现示例

小编给大家分享一下canvas简易绘图的实现示例，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！图片如下：代码如下：
2023-06-09

gomockserver的简易实现示例

2024-04-02

C#实现简易画图板的示例代码

2024-04-02

简易的redux createStore手写实现示例

这篇文章主要介绍了简易的redux createStore手写实现示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-11-13

python区块链简易版交易实现示例

2024-04-02

go 实现简易端口扫描的示例

2024-04-02

Vue3+Canvas实现简易的贪吃蛇游戏

2024-04-02

Qt实现简易计时器的示例代码

2024-04-02

如何通过Canvas+JS实现简易的时钟

今天就跟大家聊聊有关如何通过Canvas+JS实现简易的时钟，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。之前学习了下html5中的canvas元素，为了练练手就实现了一个简易的时钟
2023-06-17

Python实现动态绘图的示例详解

matplotlib中的animation提供了动态绘图功能，这篇文章主要为大家详细介绍了Python如何利用matplotlib实现动态绘图，感兴趣的可以了解一下
2023-05-19

Android实现绘制LocationMarkerView图的示例代码

LocationMarker是运动轨迹上Start、End,以及整公里点上笔者自定义绘制的一个MarkerView。这篇文章主要介绍了Android实现绘制LocationMarkerView图的示例代码，希望对大家有所帮助
2023-02-10

HTML5中canvas基本绘图之绘制阴影效果的示例分析

小编给大家分享一下HTML5中canvas基本绘图之绘制阴影效果的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！是HTM
2023-06-09

python自制简易mysql连接池的实现示例

2024-04-02

Node.js实现的简易网页抓取功能示例

现今，网页抓取已经是一种人所共知的技术了，然而依然存在着诸多复杂性， 简单的网页爬虫依然难以胜任Ajax轮训、XMLHttpRequest，WebSockets，Flash Sockets等各种复杂技术所开发出来的现代化网站。 我们以我们在
2022-06-04

Python实现简易凯撒密码的示例代码

2024-04-02

基于统计的交易策略简易实现VNPY的示例分析

这篇文章将为大家详细讲解有关基于统计的交易策略简易实现VNPY的示例分析，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。交易思维是基于历史数据中，一组数据比如100天中，K线中最高点或者最低点
2023-06-02

WPF实现绘制3D图形的示例代码

WPF的3D功能可以在不编写任何c#代码的情况下进行绘制，只需要使用xaml即可完成3D图形的渲染。本文主要讲述了WPF-3D中的关键概念，以及常用到的命中测试、2d控件如何在3D对象中进行渲染，希望大家有所帮助
2023-03-02

canvas 2d 环形统计图手写实现示例

这篇文章主要为大家介绍了canvas 2d 环形统计图手写实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-05-16

Python实现甘特图绘制的示例详解

相信在平常实际工作当中，需要对整体的项目做一个梳理，这时如果有一个网页应用能够对整体项目有一个可视化页面的展示，是不是会对你的实际工作有所帮助呢？今天小编就通过Python+Streamlit框架来绘制甘特图并制作可视化大屏，需要的可以参考一下
2023-05-15

Mysql实现简易版搜索引擎的示例代码

2024-04-02

热门标签

Linux(148)PHP(127)Java(102)正则表达式(101)JavaScript(69)最佳实践(67)jQuery(44)MySQL(39)Docker(37)C语言(36)性能优化(34)Python(34)XML(28)string(27)第三方库(23)回调函数(23)ZIP(22)数组(22)可扩展性(22)字符串比较(21)find(20)RPM(20)Go(20)grep(19)ASP.NETCore(19)XML解析器(19)事件(19)事件处理程序(19)StringBuilder(18)Nginx(18)

编程热搜

  • Python 学习之路 - Python
    一、安装Python34Windows在Python官网（https://www.python.org/downloads/）下载安装包并安装。Python的默认安装路径是：C:\Python34配置环境变量：【右键计算机】--》【属性】-
    Python 学习之路 - Python
  • chatgpt的中文全称是什么
    chatgpt的中文全称是生成型预训练变换模型。ChatGPT是什么ChatGPT是美国人工智能研究实验室OpenAI开发的一种全新聊天机器人模型，它能够通过学习和理解人类的语言来进行对话，还能根据聊天的上下文进行互动，并协助人类完成一系列
    chatgpt的中文全称是什么
  • C/C++中extern函数使用详解
    C/C++中extern函数使用详解
  • C/C++可变参数的使用
    可变参数的使用方法远远不止以下几种，不过在C,C++中使用可变参数时要小心，在使用printf()等函数时传入的参数个数一定不能比前面的格式化字符串中的’%’符号个数少，否则会产生访问越界，运气不好的话还会导致程序崩溃
    C/C++可变参数的使用
  • css样式文件该放在哪里
    css样式文件该放在哪里
  • php中数组下标必须是连续的吗
    php中数组下标必须是连续的吗
  • Python 3 教程
    Python 3 教程 Python 的 3.0 版本，常被称为 Python 3000，或简称 Py3k。相对于 Python 的早期版本，这是一个较大的升级。为了不带入过多的累赘，Python 3.0 在设计的时候没有考虑向下兼容。 Python
    Python 3 教程
  • Python pip包管理
    一、前言    在Python中， 安装第三方模块是通过 setuptools 这个工具完成的。 Python有两个封装了 setuptools的包管理工具： easy_install  和  pip ， 目前官方推荐使用 pip。    
    Python pip包管理
  • ubuntu如何重新编译内核
    ubuntu如何重新编译内核
  • 改善Java代码之慎用java动态编译
    改善Java代码之慎用java动态编译
查看更多

编程资源站

  • 资料下载
  • 历年试题
2021年下半年软考高级信息系统项目管理师高频考点精选资料
2021下半年软考高级信息系统技术知识点记忆口诀精选资料
2021下半年软考《信息系统项目管理师》考试真题及答案精选资料
2021下半年软考高级考试备考攻略精选资料
2021年软考高级《信息系统项目管理师》巩固练习题汇总精选资料
2021下半年软考高级信息系统项目管理师30个易考知识点汇总精选资料
2021下半年软考高级知识点这样记，还担心记不住吗精选资料
2021年下半年软考高级考试重点汇总精选资料
2021下半年软考高级信息系统项目管理师计算公式汇总精选资料
2021年下半年软考高级《信息系统项目管理师》模拟试题精选资料
查看更多
信息系统项目管理师选择题每日一练（2024）历年试题
2023年下半年信息系统项目管理师综合知识真题演练历年试题
查看更多

目录

本网页已闲置超过3分钟，按键盘任意键或点击空白处，即可回到网页
最新资讯更多
    友情链接编程网

    反馈

    我要
    反馈