广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 精选 >canvas简易绘图的实现示例
  • 209

0
分享到

canvas简易绘图的实现示例

2023-06-09 13:06:12 209人浏览 安东尼
摘要

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

小编给大家分享一下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简易绘图的实现示例”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网精选频道！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: canvas简易绘图的实现示例

本文链接: https://www.lsjlt.com/news/256271.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

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

下载Word文档
去做题
猜你喜欢
  • canvas简易绘图的实现示例
    小编给大家分享一下canvas简易绘图的实现示例，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！图片如下：代码如下：<!DOCTYPE html&g...
    99+
    2023-06-09
  • gomockserver的简易实现示例
    目录前言代码步骤1步骤2步骤3步骤4最终效果最后前言 学习golang也一段时间了，看了一些书，上周又看了一本入门级的《Go语言趣学指南》，是时候检验成果了。 目的：通过读取本地mo...
    99+
    2022-11-11
  • C#实现简易画图板的示例代码
    编程环境 VS2019、C# 画板功能演示 实现简单画图 打开功能 可打开jpg格式的文件 保存功能 可将绘画的内容保存为jpg文件 颜色选择功能 用户可自由选择所需的颜色...
    99+
    2022-11-12
  • 简易的redux createStore手写实现示例
    目录1.首先创建一个store2.其次创建一个my-redux书写getState()方法书写dispatch方法书写subscribe方法特别注意：3.创建一个Test组件进行检测...
    99+
    2022-11-13
    手写redux createStore redux createStore
  • python区块链简易版交易实现示例
    目录说明引言比特币交易交易输出发送币余额查看总结说明 本文根据https://github.com/liuchengxu/blockchain-tutorial的内容，用python...
    99+
    2022-11-11
  • go 实现简易端口扫描的示例
    我在代码里定义了两个通道，分别用于生产端口和限制连接数，如果不限制连接数，容易被对方检测到或导致对方服务器不能正常运行。 // 生产端口 var port = make(chan...
    99+
    2022-11-12
  • Qt实现简易计时器的示例代码
    目录一、项目介绍二、项目基本配置三、UI界面设计四、主程序实现4.1 mainwindow.h头文件4.2 mainwindow.cpp源文件五、效果演示一、项目介绍 计时器实现四个...
    99+
    2022-11-13
  • python自制简易mysql连接池的实现示例
    目录连接池是什么? 为什么需要连接池? 连接池的原理是什么? 使用python语言自制简易mysql连接池 开始使用 自定义配置文件名 & 配置标签 ...
    99+
    2022-11-12
  • Node.js实现的简易网页抓取功能示例
    现今，网页抓取已经是一种人所共知的技术了，然而依然存在着诸多复杂性， 简单的网页爬虫依然难以胜任Ajax轮训、XMLHttpRequest，WebSockets，Flash Sockets等各种复杂技术所开...
    99+
    2022-06-04
    示例 简易 功能
  • Python实现简易凯撒密码的示例代码
    目录概念及原理实现过程破解原理及实现概念及原理 根据百度百科上的解释，凯撒密码是一种古老的加密算法。 密码的使用最早可以追溯到古罗马时期，《高卢战记》有描述恺撒曾经使用密码来传递信息...
    99+
    2022-11-11
  • Android实现绘制LocationMarkerView图的示例代码
    目录LocationMarkerView图的绘制绘制整公里的文字添加动画LocationMarker是运动轨迹上Start、End, 以及整公里点上笔者自定义绘制的一个MarkerV...
    99+
    2023-02-10
    Android绘制LocationMarkerView图 Android LocationMarkerView图 Android LocationMarkerView
  • Python实现动态绘图的示例详解
    目录示例FuncAnimation三维情况示例 matplotlib中的animation提供了动态绘图功能，下面列举一个最简单的动态绘制三角函数的例子，来初步演示一下。 impor...
    99+
    2023-05-19
    Python实现动态绘图 Python动态绘图 Python绘图
  • Vue3+Canvas实现简易的贪吃蛇游戏
    目录前言规则思路流程图代码实现技术栈基本变量定义初始化食物绘制蛇头/蛇身绘制碰撞算法、边界条件积分计算、暂停，继续等功能后记前言 贪吃蛇作为一个经典的小游戏，是很多人儿时的记忆，当时...
    99+
    2022-11-13
  • HTML5中canvas基本绘图之绘制阴影效果的示例分析
    小编给大家分享一下HTML5中canvas基本绘图之绘制阴影效果的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！<canvas></ca...
    99+
    2023-06-09
  • 基于统计的交易策略简易实现VNPY的示例分析
    这篇文章将为大家详细讲解有关基于统计的交易策略简易实现VNPY的示例分析，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。交易思维是基于历史数据中，一组数据比如100天中，K线中最高点或者最低点...
    99+
    2023-06-02
  • Mysql实现简易版搜索引擎的示例代码
    目录前言简介ngram 全文解析器创建全文索引检索方式1、自然语言检索（NATURAL LANGUAGE MODE）2、布尔检索（BOOLEAN MODE）与 Like 对比总结前言...
    99+
    2022-11-12
  • Qt实现简易毛玻璃效果的示例代码
    目录现有功能运行结果源码frosted_glass_label.hfrosted_glass_label.cppmain.cpp现有功能 1.用模糊功能实现简易的毛玻璃效果。 2.鼠...
    99+
    2022-11-13
  • Python实现甘特图绘制的示例详解
    目录前期准备页面的结构代码部分主页面的开发-Section 1主页页面的开发-Section 2相信大家在平常实际工作当中，需要对整体的项目做一个梳理，这时如果有一个网页应用能够对整...
    99+
    2023-05-15
    Python绘制甘特图 Python甘特图
  • WPF实现绘制3D图形的示例代码
    目录关键概念视口相机光源材质3D对象命中测试（鼠标交互）3D对象中2D控件渲染外部导入3D模型WPF的3D功能可以在不编写任何c#代码的情况下进行绘制，只需要使用xaml即可完成3D...
    99+
    2023-03-02
    WPF绘制3D图形 WPF 3D图形 WPF 3D
  • 如何通过Canvas+JS实现简易的时钟
    今天就跟大家聊聊有关如何通过Canvas+JS实现简易的时钟，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。之前学习了下html5中的canvas元素，为了练练手就实现了一个简易的时钟...
    99+
    2023-06-17
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作