使用HTML5中的canvas绘制灰太狼图像

最新推荐文章于 2023-11-08 10:37:45 发布
最新推荐文章于 2023-11-08 10:37:45 发布
阅读量1.2k 收藏 6
点赞数 3
文章标签： javascript web前端 html5 canvas 编程语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29206213/article/details/52625044
版权

大家好，我是byoneself，本次将为大家分享一下使用HTML5中的canvas绘制一个灰太狼图像，希望对大家有所帮助。

下图是效果图:


以下就是实现的代码:

<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">

  <title>Canvas绘制的灰太狼 - </title>

</head>
<body>
	<div id="num">
	<!--用来显示坐标-->	
	</div>
<canvas id="demo" width="400" height="500" style="position:absolute;left:30px;top:100px;border:1px solid #000;">当前浏览器不支持canvas</canvas>
<script>
var d = document.getElementById('demo');
function funLoad(){   
    var cxt=d.getContext('2d') ;
    cxt.beginPath() ;
    cxt.lineWidth = 2 ;
    cxt.strokeStyle = 'green' ;
    //耳朵
    cxt.moveTo(33,43) ;
    cxt.quadraticCurveTo(55,40,124,73) ;
    cxt.lineTo(68,140) ;
    cxt.moveTo(33,43) ;
    cxt.quadraticCurveTo(73,92,89,130) ;
    cxt.quadraticCurveTo(75,127,81,136) ;
    cxt.lineTo(73,136) ;
    cxt.lineTo(74,139) ;
    //耳朵左下方
    cxt.quadraticCurveTo(36,164,24,213) ;
    cxt.bezierCurveTo(52,215,49,223,41,233) ;
    cxt.quadraticCurveTo(61,235,76,243) ;
    //脸下面
    cxt.bezierCurveTo(88,350,290,350,309,252) ;
    //耳朵右下方
    cxt.quadraticCurveTo(320,239,353,234) ;
    cxt.bezierCurveTo(338,223,354,215,371,214) ;
    cxt.quadraticCurveTo(360,169,325,144) ;
    //右耳朵
    cxt.lineTo(333,121) ;
    cxt.quadraticCurveTo(317,100,341,97) ;
    cxt.lineTo(361,43) ;
    cxt.quadraticCurveTo(307,48,266,75) ;
    cxt.moveTo(361,43) ;
    cxt.quadraticCurveTo(332,72,304,133) ;
    cxt.quadraticCurveTo(318,127,313,134) ;
    cxt.quadraticCurveTo(323,132,318,140) ;
    cxt.quadraticCurveTo(324,136,325,144)
    cxt.moveTo(266,75) ;
    cxt.quadraticCurveTo(265,90,243,94) ;
    cxt.lineTo(133,112) ;
    //帽子
    cxt.quadraticCurveTo(90,116,107,91) ;
    cxt.quadraticCurveTo(147,29,223,27) ;
    cxt.quadraticCurveTo(272,38,266,75) ;
    cxt.moveTo(107,91) ;
    cxt.quadraticCurveTo(111,110,144,100) ;
    cxt.lineTo(244,80) ;
    cxt.quadraticCurveTo(264,76,267,61) ;
    cxt.moveTo(196,30) ;
    cxt.lineTo(176,51) ;
    cxt.quadraticCurveTo(224,43,240,66) ;
    cxt.quadraticCurveTo(252,55,264,53) ;
    cxt.moveTo(186,38) ;
    cxt.lineTo(198,37) ;
    cxt.moveTo(176,43) ;
    cxt.lineTo(190,43) ;
    cxt.moveTo(186,53) ;
    cxt.lineTo(194,45) ;
    cxt.moveTo(200,45) ;
    cxt.lineTo(196,54) ;
    cxt.moveTo(210,47) ;
    cxt.lineTo(205,54) ;
    cxt.moveTo(219,49) ;
    cxt.lineTo(213,54) ;
    cxt.moveTo(229,50) ;
    cxt.lineTo(222,59) ;
    cxt.moveTo(237,52) ;
    cxt.lineTo(232,65) ;
    cxt.moveTo(244,56) ;
    cxt.lineTo(250,66) ;
    cxt.moveTo(252,52) ;
    cxt.lineTo(261,62) ;
    cxt.stroke() ;
    cxt.beginPath() ;
    cxt.lineWidth = 10 ;
    cxt.moveTo(99,123) ;
    cxt.lineTo(169,164) ;
    cxt.moveTo(220,172) ;
    cxt.lineTo(291,130) ;
    cxt.stroke() ;
    cxt.beginPath() ;
    cxt.lineWidth = 2 ;
    cxt.moveTo(88,168) ;
    cxt.lineTo(174,188) ;
    cxt.moveTo(212,180) ;
    cxt.lineTo(297,199) ;
    cxt.moveTo(87,173) ;
    cxt.lineTo(126,286) ;
    cxt.moveTo(80,204) ;
    cxt.lineTo(108,191) ;
    cxt.moveTo(91,220) ;
    cxt.lineTo(111,211) ;
    cxt.moveTo(96,236) ;
    cxt.lineTo(114,226) ;
    cxt.moveTo(106,248) ;
    cxt.lineTo(119,243) ;
    cxt.moveTo(106,267) ;
    cxt.lineTo(124,259) ;
    cxt.moveTo(117,276) ;
    cxt.lineTo(126,272) ;
    cxt.moveTo(106,171) ;
    cxt.bezierCurveTo(109,200,142,204,159,185) ;
    cxt.moveTo(230,184) ;
    cxt.bezierCurveTo(233,210,267,218,284,197) ;
    cxt.moveTo(123,253) ;
    cxt.quadraticCurveTo(193,275,272,253) ;
    cxt.bezierCurveTo(260,300,120,290,123,253) ;
    cxt.stroke() ;
    cxt.beginPath() ;
    cxt.lineWidth = 1 ;
    cxt.moveTo(125,260) ;
    cxt.lineTo(134,263) ;
    cxt.lineTo(136,259) ;
    cxt.lineTo(139,265) ;
    cxt.lineTo(155,270) ;
    cxt.moveTo(237,270) ;
    cxt.lineTo(252,266) ;
    cxt.lineTo(254,258) ;
    cxt.lineTo(258,264) ;
    cxt.lineTo(268,261) ;
    cxt.stroke() ;
    cxt.beginPath() ;
    cxt.lineWidth = 2 ;
    cxt.fillStyle = 'green' ; 
    cxt.save() ;
    cxt.translate(133,179) ;
    cxt.rotate(Math.PI*2/20) ;
    cxt.arc(0,0,5,3,Math.PI*2,true) ;
    cxt.fill() ;
    cxt.restore() ;
    cxt.beginPath() ;
    cxt.save() ;
    cxt.translate(254,190) ;
    cxt.rotate(Math.PI*2/20) ;
    cxt.arc(0,0,5,3,Math.PI*2,true) ;
    cxt.fill() ;
    cxt.restore() ;
    cxt.beginPath() ;
    cxt.moveTo(190,212) ;
    cxt.bezierCurveTo(150,214,150,246,190,246) ;
    cxt.bezierCurveTo(230,246,230,214,190,212) ;
    cxt.fill() ;
    cxt.beginPath() ;
    cxt.fillStyle = '#fff' ;
    cxt.moveTo(162,224) ;
    cxt.quadraticCurveTo(171,212,180,224);
    cxt.quadraticCurveTo(171,234,162,224);
    cxt.fill() ;
    cxt.beginPath() ;
    cxt.moveTo(119,306) ;
    cxt.quadraticCurveTo(132,334,205,363) ;
    cxt.quadraticCurveTo(256,334,264,310) ;
    cxt.moveTo(110,300) ;
    cxt.quadraticCurveTo(86,334,81,370) ;
    cxt.quadraticCurveTo(67,371,66,394) ;
    cxt.bezierCurveTo(60,418,71,427,76,421) ;
    cxt.moveTo(76,399) ;
    cxt.bezierCurveTo(70,419,85,434,89,421) ;
    cxt.quadraticCurveTo(79,414,85,399) ;
    cxt.moveTo(89,421) ;
    cxt.bezierCurveTo(98,430,102,430,99,400) ;
    cxt.moveTo(101,410) ;
    cxt.quadraticCurveTo(119,419,112,400) ;
    cxt.bezierCurveTo(105,388,114,378,101,371) ;
    cxt.moveTo(100,376) ;
    cxt.quadraticCurveTo(109,324,126,315) ;
    cxt.moveTo(280,299) ;
    cxt.quadraticCurveTo(310,340,312,371) ;
    cxt.quadraticCurveTo(326,376,326,398) ;
    cxt.bezierCurveTo(330,415,326,426,318,420) ;
    cxt.moveTo(317,399) ;
    cxt.bezierCurveTo(323,419,313,433,305,422) ;
    cxt.moveTo(309,400) ;
    cxt.bezierCurveTo(310,425,291,442,292,403) ;
    cxt.moveTo(292,410) ;
    cxt.bezierCurveTo(284,416,274,413,282,397) ;
    cxt.quadraticCurveTo(280,375,293,371) ;
    cxt.moveTo(294,376) ;
    cxt.quadraticCurveTo(289,338,267,314) ;
    cxt.stroke() ;
    cxt.beginPath() ;
    cxt.lineWidth = 3 ;
    cxt.moveTo(127,319) ;
    cxt.bezierCurveTo(90,470,310,460,262,317) ;
    cxt.moveTo(188,389) ;
    cxt.lineTo(197,399) ;
    cxt.moveTo(190,402) ;
    cxt.lineTo(195,391) ;
    cxt.stroke() ;
    cxt.beginPath() ;
    cxt.save() ;
    cxt.translate(194,396) ;
    cxt.arc(0,0,10,1,Math.PI*2,false) ;
    cxt.restore() ;
    cxt.stroke() ;
    cxt.beginPath() ;
    cxt.lineWidth = 2 ;
    cxt.moveTo(144,406) ;
    cxt.lineTo(127,434) ;
    cxt.lineTo(136,449) ;
    cxt.moveTo(152,417) ;
    cxt.lineTo(142,434) ;
    cxt.moveTo(139,431) ;
    cxt.lineTo(151,450) ;
    cxt.bezierCurveTo(110,441,90,464,105,476) ;
    cxt.lineTo(156,476) ;
    cxt.bezierCurveTo(175,473,170,459,151,450) ;
    cxt.moveTo(126,455) ;
    cxt.quadraticCurveTo(106,456,108,474) ;
    cxt.moveTo(139,457) ;
    cxt.quadraticCurveTo(121,459,125,474) ;
    cxt.moveTo(244,416) ;
    cxt.lineTo(252,433) ;
    cxt.moveTo(255,430) ;
    cxt.lineTo(245,450) ;
    cxt.moveTo(254,406) ;
    cxt.lineTo(269,433) ;
    cxt.lineTo(261,448) ;
    cxt.bezierCurveTo(218,456,220,472,234,475) ;
    cxt.lineTo(289,475) ;
    cxt.bezierCurveTo(304,467,302,452,261,448) ;
    cxt.moveTo(255,457) ;
    cxt.quadraticCurveTo(275,461,268,474) ;
    cxt.moveTo(270,455) ;
    cxt.quadraticCurveTo(291,462,285,474) ;
    cxt.moveTo(198,428) ;
    cxt.quadraticCurveTo(203,453,228,458) ;
    cxt.moveTo(236,453) ;
    cxt.bezierCurveTo(213,440,214,437,248,448) ;
    cxt.bezierCurveTo(230,430,230,428,251,433) ;
    cxt.moveTo(275,450) ;
    cxt.quadraticCurveTo(287,432,287,416) ;
    cxt.quadraticCurveTo(270,420,255,412) ;
    cxt.stroke() ;
}
funLoad() ;
//以下代码实现鼠标滑过的时候显示坐标
var x=0,y=0;
var num=document.getElementById("num");
d.οnmοusemοve=d.οnmοuseenter=function(e){
	x=e.clientX-d.offsetLeft;
	y=e.clientY-d.offsetTop;
	num.innerHTML="x:"+x+"y:"+y;
}
</script><br>
 
</body>
</html>


byOnself
关注
HTML5 Canvas绘制灰太狼图像效果
06-12
这个“HTML5 Canvas绘制灰太狼图像效果”是一个利用Canvas API实现的实例，展示了如何通过编程方式创建生动的图像。下面我们将深入探讨HTML5 Canvas的基本概念、绘图方法以及如何实现灰太狼图像的绘制。 1. HTML5 ...
用canvas 绘制一个灰太狼
Oraice的专栏
11-07 1384
用canvas 绘制一个灰太狼
HTML5canvas绘画灰太狼--恶搞
dczjn9698的博客
04-10 450
直接上源代码： <html> </body> <div id='d' style="position:absolute;left:10px;top:20px;width:200px;height:50px;font-size:26px;"></div> <canvas id="demo" width="400" heigh...
使用html5 canvas绘制简单图形小作品~灰太狼
zcm1457225624的博客
09-22 3752
作者：1457225624@qq.com         时间：xxxx-xx-xx         描述：大家好！我是小张，今天我用html5，，canvas的画布画出了一个小作品，         画的不好看，，，还请原谅，，下面就是我的作品。如下图！！！         --> DOCTYPE html> html> he
利用HTML5的canvas标签实现灰太狼图像的绘制
执笔写流年殇的博客
09-23 856
Canvas绘制的灰太狼 - 当前浏览器不支持canvas var d = document.getElementById('demo'); function funLoad(){        var cxt=d.getContext('2d') ;     cxt.beginPath() ;     cxt.lineWidth = 2 ;
HTML5 Canvas绘制灰太狼图像效果.zip
09-25
在这个"HTML5 Canvas绘制灰太狼图像效果.zip"压缩包中，包含了一个实例，演示如何利用Canvas API来绘制灰太狼这个卡通角色的图像，非常适合初学者学习和爱好者探索。 首先，我们要了解Canvas的基本用法。HTML5中的`...
html5使用canvas绘制一张图片
09-28
首先，我们需要在HTML中创建一个`<canvas>`元素。这是一个具有特定`width`和`height`属性的标签，这些属性定义了画布的尺寸。例如： ```html <canvas id="canvas" width="600" height="500" style="background-...
HTML5 Canvas绘制灰太狼图片简笔画.rar
05-23
HTML5 Canvas是Web开发中的一个强大工具，它允许开发者在网页上进行动态图像绘制，创造出丰富的交互式图形体验。这个“HTML5 Canvas绘制灰太狼图片简笔画”实例是Canvas技术的一个应用示例，旨在展示如何利用...
html5使用canvas绘制太阳系效果
09-28
在HTML5中，Canvas元素是一个强大的绘图工具，允许开发者通过JavaScript来绘制图形，包括动态和交互式图像。在这个场景中，我们将讨论如何使用Canvas绘制一个太阳系的效果。首先，我们需要了解Canvas的基本用法，...
HTML5 Canvas灰太狼图形生成实例.rar
07-10
HTML5 Canvas灰太狼图形生成实例，未填充着色，不过能画出这形状，也足以看出HTML5的强大，也可看作作者水平的强大，看到这张图，小伙伴们惊呆了。
强！用CSS画个灰太狼
听雨轩
10-09 300
请用FireFox或非IE浏览器看，不听劝告者后果自负。   &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999...
Python小灰灰
最新发布
兔子王
11-08 5万+
《喜羊羊与灰太狼之我爱小灰灰》来啦！谁会拒绝一只如此呆萌的小灰灰呢~
每个人都能制作的简易版狂拍灰太狼小游戏（HTML+CSS+JavaScript）
有没有料，进来看看就知道！
04-19 1143
自制系列一完善版来了。 如果在制作过程中有任何问题你都可以私信我，我会一一答复你们的。 由于上一次发的进度条不是很完善，显得不美观，这次改进了进度条问题，使增强了游戏的体验感。制作过程很简单，每个人都能学会。 下面将是制作步骤了： 先建好目录如下： img文件夹里存放的是制作过程需要用到的图片，如果你需要可以私信我，我私发给你，不过最好自己找找图片，因为我的图片也不是很好（我是扣图的）。 下面就是把代码复制到相应的目录中： 狂拍灰太狼.html <!DOCTYPE html&...
使用python实现一个简单的学生信息管理系统
weixin_34309543的博客
09-08 3079
最近公司搬办公室，杂七杂八的事情比较多，又碰上业务要上线了。。。很多事情堆到一起来做，导致最近没什么时间学习，写博客。前两天胜利日放假，把以前用java写的学生信息管理系统用python重新写了一遍，以便于帮助python的学习。好了，废话不多说，首先进行需求分析，下面是我根据需求画的系统结构图：纯手工制图。。。。。画的不好敬请谅解。从上图来看，整个系统分为main,add,...
Canvas-绘图（贝赛尔曲线）
学如逆水行舟，不进则退
05-29 1372
1、二次贝塞尔曲线介绍   quadraticCurveTo(cpx,cpy,x,y)   cpx，cpy表示控制点的坐标；   x，y表示终点坐标；   数学公式表示如下：   二次方贝兹曲线的路径由给定点P0、P1、P2的函数B（t）追踪：      2、二次贝赛尔曲线实例     Js代码   "-//W3C//DTD XHT
数学专业转行前端 用canvas贝塞尔函数话灰太狼
瓦季姆的博客
01-31 441
今天刚刚开通博客，决定写点东西，作为一名数学毕业生转行IT，对计算比较感兴趣，最近才接触前端技术，就用canvas画了点东西，希望大家喜欢 //定义canvas元素 var canvas = document.getElementById("can"); //选定canvas元素 var cxt = canvas.getContext("2d"); //指定canvas画布绘制
Canvas基本知识点二：曲线图形
weixin_34008784的博客
08-28 185
本次主要介绍canvas中绘制圆形、弧线、二次贝塞尔曲线和三次贝塞尔曲线。一些曲线图形封装的方法，可以参考github.com/yxjz/Canvas。一、圆形介绍（一）基本语法语法：cxt.beginPath(); cxt.arc(x,y,半径,开始角度，结束角度，anticlockwise); cxt.closePath();复制代码说明：1、x和y x：表示圆心横坐标 y：表示的圆心的纵...
python画灰太狼
09-02
通过数据增强操作可以对数据集进行扩充，包括裁剪、旋转、翻转、增加噪声、变暗、变亮等操作，可以将数据集扩充为原来的30倍。这些数据增强操作可以直接使用，只需要修改文件路径名即可。[1] 如果你要用Python画灰太狼，你可以使用Python的绘图库（如Matplotlib）来实现。你可以参考这篇博客文章，其中有关于如何使用Python绘制图像的详细教程。在你的代码中，你可以使用相关的图像处理函数来加载灰太狼的图像，并使用绘图函数将其画出来。你可以根据需要设置图像的大小、位置、颜色等属性，以及添加任何其他的图像处理效果。 需要注意的是，为了能够绘制出灰太狼的图像，你需要具备灰太狼的图像文件，并将其路径名正确地传入代码中。这样，你就可以使用Python来画出灰太狼了。<span class="em">1</span><span class="em">2</span> #### 引用[.reference_title] - *1* [python进行数据增强](https://download.csdn.net/download/doyoboy/88278532)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [HTML5canvas绘画灰太狼--恶搞](https://blog.csdn.net/dczjn9698/article/details/101888125)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值