canvas绘制可爱猫咪

最新推荐文章于 2024-03-26 11:38:59 发布
最新推荐文章于 2024-03-26 11:38:59 发布
阅读量2.1k 收藏 7
点赞数 7
分类专栏： css3 html5 javascript html+css+js 文章标签： canvas h5 css3
html+css+js 同时被 3 个专栏收录
16 篇文章 0 订阅
订阅专栏
css3
12 篇文章 0 订阅
订阅专栏
javascript
12 篇文章 0 订阅
订阅专栏 
其他的废话就不多说，效果和代码都在下面<img alt="微笑" src="http://static.blog.csdn.net/xheditor/xheditor_emot/default/smile.gif" />
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小猫咪</title>
    <style>
        body{text-align: center;}
        .wrapper{height:800px;}
        canvas{margin-top: 20px;transform: scale(0.5);}
    </style>
</head>
<body>
<div class="wrapper">
    <canvas width="600" height="554" id="canvas"></canvas>
</div>
<script>
    var canvas=document.getElementById('canvas');
    if(canvas.getContext("2d")){
        var c=canvas.getContext("2d");
//        尾巴
        c.strokeStyle="#33190c";
        c.fillStyle="#ffffd9";
        c.lineWidth=6;
        c.beginPath();
        c.moveTo(433,458);
        c.lineTo(477,438);
        c.bezierCurveTo(492,433,496,453,484,463);
        c.lineTo(433,494);
        c.fill();
        c.stroke();
//身体
        c.beginPath();
        c.moveTo(255,392);
        c.lineTo(255,526);
        c.bezierCurveTo(256,555,282,557,293,530);
        c.lineTo(383,530);
        c.bezierCurveTo(392,557,419,558,428,526);
        c.quadraticCurveTo(434,523,430,393);
        c.closePath();
        c.fill();
        c.stroke();
//        肚白
        c.fillStyle="#fff";
        c.beginPath();
        c.moveTo(317,501);
        c.quadraticCurveTo(345,504,363,500);
        c.quadraticCurveTo(386,492,389,480);
        c.quadraticCurveTo(393,469,396,437);
        c.closePath();
        c.fill();
//        肚子蓝点
        c.fillStyle="#e5f8ef";
        c.beginPath();
        c.moveTo(428,459);
        c.bezierCurveTo(407,456,405,479,421,482);
        c.bezierCurveTo(393,482,394,507,427,511);
        c.quadraticCurveTo(429,485,428,459);
        c.closePath();
        c.fill();
//        左边耳朵
        c.strokeStyle="#33190c";
        c.fillStyle="#ffffd9";
        c.lineWidth=4;
        c.beginPath();
        c.moveTo(106,79);
        c.quadraticCurveTo(114,4,209,14);
        c.fill();
        c.stroke();
//        右边耳朵
        c.beginPath();
        c.lineWidth=5;
        c.moveTo(376,14);
        c.quadraticCurveTo(431,13,446,15);
        c.quadraticCurveTo(488,20,498,48);
        c.quadraticCurveTo(508,75,512,110);
        c.fill();
        c.stroke();


        c.beginPath();
        c.lineWidth=8;
        c.moveTo(470,65);
        c.lineTo(483,27);
        c.stroke();


        c.beginPath();
        c.fillStyle="#fecce5";
        c.moveTo(473,65);
        c.lineTo(483,30);
        c.bezierCurveTo(502,46,496,60,512,110);
        c.closePath();
        c.fill();


        //头
        c.lineWidth=10;
       c.beginPath();
        c.strokeStyle="#33190c";
        c.fillStyle="#ffffd9";
        c.moveTo(280,6);
        c.bezierCurveTo(476,0,535,154,541,166);
        c.lineTo(546,180);
        c.bezierCurveTo(584,304,530,368,432,392);
        c.quadraticCurveTo(210,460,90,372);
        c.quadraticCurveTo(38,324,34,314);
        c.quadraticCurveTo(1,268,38,174);
        c.quadraticCurveTo(128,8,280,6);
        c.closePath();
        c.fill();
        c.stroke();


        //脸白
        c.fillStyle="#fff";
        c.beginPath();
        c.moveTo(29,294);
        c.quadraticCurveTo(57,339,99,371);
        c.quadraticCurveTo(272,404,427,390);
        c.bezierCurveTo(500,371,567,330,549,216);
        c.bezierCurveTo(560,298,518,360,427,378);
        c.quadraticCurveTo(272,404,99,364);
        c.quadraticCurveTo(55,334,29,294);
        c.closePath();
        c.fill();


        //胡须(左边)
        c.strokeStyle="#33190c";
        c.lineWidth=7;
        c.beginPath();
        c.moveTo(6,212);
        c.lineTo(23,212);
       c.stroke();
        c.moveTo(7,211);
        c.quadraticCurveTo(5,212,7,213);
        c.stroke();


        c.beginPath();
        c.moveTo(2,246);
        c.lineTo(15,246);
        c.stroke();
        c.moveTo(6,245);
        c.quadraticCurveTo(1,246,6,247);
        c.stroke();


        c.beginPath();
        c.moveTo(6,284);
        c.lineTo(17,281);
        c.stroke();
        c.moveTo(9,282);
        c.quadraticCurveTo(4,287,6,282);
        c.stroke();
        //胡须(右边边)
        c.lineWidth=6;
        c.beginPath();
        c.moveTo(529,233);
        c.lineTo(596,246);
        c.stroke();
        c.moveTo(530,233);
        c.quadraticCurveTo(528,233,530,234);
       c.stroke();
        c.moveTo(596,246);
        c.quadraticCurveTo(597,246,596,246);
       c.stroke();


        c.beginPath();
        c.moveTo(525,263);
        c.lineTo(587,290);
        c.stroke();
        c.moveTo(526,263);
        c.quadraticCurveTo(524,263,527,264);
        c.stroke();
        c.moveTo(587,290);
        c.quadraticCurveTo(589,291,587,290);
       c.stroke();


        c.beginPath();
        c.moveTo(523,296);
        c.lineTo(581,331);
        c.stroke();
        c.moveTo(524,298);
        c.quadraticCurveTo(522,294,524,297);
        c.stroke();
        c.moveTo(581,331);
        c.quadraticCurveTo(583,332,581,331);
        c.stroke();


        //眉毛(左边)
        c.lineWidth=5;
        c.beginPath();
        c.moveTo(163,40);
        c.lineTo(182,42);
        c.moveTo(182,42);
        c.quadraticCurveTo(185,42,180,42);
        c.stroke();
        //眉毛(右边)
        c.beginPath();
        c.moveTo(374,54);
        c.quadraticCurveTo(386,43,396,57);
        c.moveTo(375,54);
        c.quadraticCurveTo(372,56,376,53);
        c.moveTo(395,56);
        c.quadraticCurveTo(397,58,395,56);
        c.stroke();


        //额头蓝点
        c.fillStyle="#e5f8ef";
        c.beginPath();
        c.moveTo(190,30);
        c.bezierCurveTo(180,57,216,65,218,20);
        c.quadraticCurveTo(203,23,190,30);
        c.closePath();
        c.fill();
        c.beginPath();
        c.moveTo(239,15);
       c.bezierCurveTo(233,70,280,60,278,11);
        c.quadraticCurveTo(257,11,239,15);
        c.closePath();
        c.fill();
       c.beginPath();
        c.moveTo(304,11);
        c.bezierCurveTo(285,48,329,74,339,15);
        c.quadraticCurveTo(322,11,304,11);
        c.closePath();
        c.fill();
        c.beginPath();
        c.moveTo(365,20);
        c.bezierCurveTo(354,47,380,53,389,28);
        c.quadraticCurveTo(378,23,366,20);
        c.closePath();
        c.fill();


        //腮红(左边)
        c.fillStyle="#ffcce6";
        c.beginPath();
        c.moveTo(110,199);
        c.quadraticCurveTo(73,179,47,198);
        c.bezierCurveTo(41,204,43,211,47,215);
        c.quadraticCurveTo(73,235,120,212);
        c.closePath();
        c.fill();
        //腮红(右边)
        c.beginPath();
        c.moveTo(428,200);
        c.quadraticCurveTo(470,186,507,210);
        c.bezierCurveTo(519,218,514,240,497,244);
        c.quadraticCurveTo(454,256,420,227);
        c.closePath();
        c.fill();
        //害羞(左边)
        c.strokeStyle="#361909";
        c.lineWidth=6;
        c.beginPath();
        c.moveTo(71,205);
        c.lineTo(65,212);
        c.moveTo(71,205);
        c.bezierCurveTo(75,200,74,202,71,205);
        c.moveTo(66,211);
        c.bezierCurveTo(63,213,62,217,66,210);
        c.moveTo(88,205);
        c.lineTo(82,212);
        c.moveTo(88,205);
        c.bezierCurveTo(90,202,91,202,88,205);
        c.moveTo(82,212);
        c.bezierCurveTo(80,215,78,216,82,212);
        c.stroke();
        //害羞(右边)
        c.beginPath();
        c.moveTo(448,218);
        c.lineTo(443,224);
        c.moveTo(448,218);
        c.bezierCurveTo(452,213,454,215,444,224);
        c.moveTo(443,224);
        c.bezierCurveTo(441,225,439,230,444,224);
        c.moveTo(466,218);
        c.lineTo(460,225);
        c.moveTo(466,219)
        c.bezierCurveTo(468,215,469,216,465,219);
        c.moveTo(460,225);
        c.bezierCurveTo(455,230,455,231,460,225);
        c.moveTo(482,220);
        c.lineTo(475,228);
        c.moveTo(482,221);
        c.bezierCurveTo(484,216,484,219,481,221);
        c.moveTo(476,227);
        c.bezierCurveTo(472,231,472,231,476,227);
        c.stroke();


        //眼睛(左边)
        c.fillStyle="#35190d";
        c.beginPath();
        c.moveTo(129,140);
        c.bezierCurveTo(206,118,215,204,172,226);
        c.bezierCurveTo(92,249,85,165,129,140);
        c.closePath();
        c.fill();
        //眼睛(右边)
        c.beginPath();
        c.moveTo(332,154);
        c.bezierCurveTo(421,108,462,208,407,240);
        c.bezierCurveTo(357,279,264,214,332,154);
        c.closePath();
        c.fill();


        //睫毛(左边)
        c.strokeStyle="#35190d";
        c.lineWidth=6;
        c.beginPath();
        c.moveTo(129,146);
        c.lineTo(129,131);
        c.stroke();
        //睫毛(右边)
        c.beginPath();
        c.moveTo(334,156);
        c.lineTo(328,146);
        c.stroke();


        //眼珠(左边)
        c.fillStyle="#fff";
        c.beginPath();
        c.moveTo(177,151);
        c.bezierCurveTo(190,152,183,166,177,164);
        c.bezierCurveTo(168,164,168,152,177,151);
        c.closePath();
        c.fill();
        //眼珠(右边)
        c.beginPath();
        c.moveTo(393,154);
        c.bezierCurveTo(406,155,402,171,393,169);
        c.bezierCurveTo(384,169,382,155,393,154);
        c.closePath();
        c.fill();


        //鼻子
        c.fillStyle="#35190e";
        c.beginPath();
        c.moveTo(237,220);
        c.bezierCurveTo(237,209,254,209,254,220);
        c.bezierCurveTo(254,231,238,231,237,220);
        c.closePath();
        c.fill();


        c.strokeStyle="#35190e";
        c.lineWidth=4;
        c.beginPath();
        c.moveTo(218,229);
        c.bezierCurveTo(222,241,239,243,245,226);
        c.moveTo(219,230);
        c.bezierCurveTo(217,228,218,228,219,230);
        c.moveTo(245,226);
        c.bezierCurveTo(254,245,279,244,285,234);
        c.moveTo(285,234);
        c.bezierCurveTo(286,232,287,232,285,234);
        c.stroke();c
        //爱心
        c.strokeStyle="#33190c";
        c.fillStyle="#fe0000";
        c.lineWidth=10;
        c.beginPath();
        c.moveTo(98,376);
        c.bezierCurveTo(70,301,156,194,246,303);
        c.bezierCurveTo(403,197,476,345,424,402);
        c.quadraticCurveTo(375,475,260,528);
        c.quadraticCurveTo(247,536,225,526);
        c.quadraticCurveTo(130,463,98,376);
        c.closePath();
        c.fill();
        c.stroke();
        //爱心中心
        c.fillStyle="#ff334c";
        c.beginPath();
        c.moveTo(109,372);
        c.bezierCurveTo(68,240,214,226,236,326);
        c.quadraticCurveTo(297,250,384,278);
        c.quadraticCurveTo(408,288,404,316);
        c.quadraticCurveTo(380,416,263,469);
        c.bezierCurveTo(241,480,220,470,202,464);
        c.quadraticCurveTo(118,416,109,372);
        c.closePath();
        c.fill();
        //白点cc.fillStyle="#fff";
        c.beginPath();
        c.moveTo(129,273);
        c.quadraticCurveTo(142,260,155,273);
        c.bezierCurveTo(151,286,125,278,129,273);
        c.closePath();
        c.fill();
        c.beginPath();
        c.moveTo(292,293);
        c.bezierCurveTo(296,283,333,271,351,278);
        c.bezierCurveTo(350,292,300,302,292,293);
        c.closePath();
        c.fill();


        //手(左边)
        c.strokeStyle="#33190c";
        c.fillStyle="#fff";
        c.lineWidth=6;
        c.beginPath();
        c.moveTo(98,377);
        c.bezierCurveTo(137,367,128,417,113,415);
        c.bezierCurveTo(97,418,74,390,98,377);
        c.closePath();
        c.fill();
        c.stroke();
        //手(右边)
        c.beginPath();
        c.moveTo(390,434);
        c.bezierCurveTo(358,407,392,366,427,388);
        c.quadraticCurveTo(416,409,393,435);
        c.closePath();
        c.fill();
        c.stroke();

    }
</script>
</body>
</html>

效果图如下：



有没有萌到你呢？萌到请赞一个

晨夕_love
关注
  • 7
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webgl 系列 —— 绘制猫
yy的博客
07-07 110
如果让你绘制如下一只猫。难道绘制很多三角形，然后指定它们的颜色？那样简直太难、太繁琐了。这时可以使用三维图形学中的技术来解决这个问题。纹理映射简单来讲就是将一张图映射（贴）到一个几何图形的表面。
Canvas动画案例演示，含动画猫、变幻线、代码雨等
cai niaoyihao_的博客
04-09 2343
Canvas API 提供了一个通过JavaScript 和 HTML的元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。 Canvas API主要聚焦于2D图形。而同样使用元素的 WebGL API 则用于绘制硬件加速的2D和3D图形
用Canvas画一只会跟着鼠标走的小狗
weixin_34055787的博客
03-01 502
以前经常看到这种效果：在网页右下角放一个人，然后他的眼珠会跟着鼠标转，效果如下：这个例子来自于CodePen，它是根据鼠标的位置设置两个眼球的transform: rotate属性做的效果。这种跟着鼠标移动的小交互一般都比较好玩，所以我突然想到，能不能做一只会跟着鼠标走的小狗，最后的效果如下所示：我们一步步来实现这个效果。1. 小狗走的动画小狗走的动画应该怎么实现呢？如果用一张gif，然后根据鼠标...
canvas-nest背景和上吊猫分享
最新发布
m0_69497411的博客
03-26 639
1.canvas-是一个基于canvas绘制的网页背景效果的插件，使用简单，但效果贼酷如果你也想你的网页拥有这个背景效果2.上吊猫 是一个基于js和css3的样式，有回到顶端的效果下面是分别展示其效果​​。
canvas拼出一只猫
Lee_Lei0213的博客
06-15 331
url：http://zjingwen.github.io/SetTimeOutGoBlog/webdemo/mac/mac.html（如果打开过慢，或者打不开，原因你懂得。）一、无聊之作利用canvas的一些属性。一维数组转换二维数组。字符串拼接。做出了这一个无聊之极的小玩野。顿时，感觉到浏览器性能的无力。也许是我方法不对把。日后总结来自为知笔记(Wiz) 转载于:https://w...
Html利用Canvas绘制图形
07-16
在这个主题中，“Html利用Canvas绘制图形”涵盖了多种形状的绘制方法，包括基础形状和复杂图案。接下来，我们将详细探讨如何使用Canvas API来实现这些图形。 1. **圆形**：在Canvas上绘制圆形，可以使用`arc()`方法...
HTML5 canvas可爱猫咪表情3D动画
05-01
这个“HTML5 canvas可爱猫咪表情3D动画”项目利用了canvas元素的强大功能，结合Zdog1.0.1库创建了一个交互式的3D动画效果，用户可以通过鼠标拖拽实现猫咪表情的3D旋转。 Zdog是一个轻量级的3D图形库，它是基于...
HTML5 Canvas捧着爱心的喵咪特效特效代码
03-20
首先，Canvas API提供了基本的绘图命令，如`fillRect()`用于填充矩形，`beginPath()`和`closePath()`用于开始和结束路径，`arc()`绘制圆形或弧线，以及`stroke()`和`fill()`分别用于描边和填充路径。在本特效中，...
HTML5 Canvas捧着爱心的喵咪特效.zip
07-05
在本实例中，开发者会使用`<canvas>`元素并在其上绘制猫咪和爱心的形状。这通常涉及到以下方法： 1. **创建画布**：在HTML中定义`<canvas>`元素，并通过JavaScript获取其2D渲染上下文，例如： ```javascript var ...
H5小游戏源码 猫咪游戏源码.zip
10-14
HTML元素如canvas用于绘制游戏画面，而链接到的CSS文件则负责样式和动画效果。 2. JavaScript文件：这是游戏的“大脑”，包含了游戏的主要逻辑。包括角色移动、碰撞检测、计分系统、用户输入响应等功能的实现，大...
用canvas画一个简易的机器猫头像
Serena_tz的博客
09-21 821
用canvas画一个机器猫的头像，原图如下： 代码实现效果如下： 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>作业2</title> <
canvas实操 之 绘制机器猫&&实现防伪刮图
热门推荐
孤寒者的博客
05-17 3万+
时间是检验真理的唯一标准！！！ canvas实操 之 绘制机器猫&&实现防伪刮图。
Android Canvas 方法总结
l_215851356的专栏
04-09 672
转载地址：http://www.jianshu.com/p/f69873371763 简介 在自定义 View的时候，我们经常需要绘制一些自己想要的效果。 这里就需要使用Canvas对象。 下面将Canvas对象常用方法做个笔记，方便记忆。 对Canvas进行操作 对Canvas的一系列操作，是指对Canvas进行旋转、平移、缩放等操作。 这些操作可以让Canva
基于canvas画布的星空效果
测试猫
12-01 1万+
canvas是html5的新标签，其画布功能尤为强大。当然了canvas在IE10以下浏览器是不兼容的，所以呢为了特效肯定是牺牲一定的兼容性。这里呢，分享一个基于canvas开发的浩瀚星河插件，其实这个源代码是网上下载的，我把它整合了一下，重新封装一些参数提供更多的可改项。 首先引入两个javascript脚本，一个是jquery插件，另一个是封装好的cosmos_canvas.js H
关于小程序canvas
qq_40816649的博客
01-29 218
接近年关大家新年快乐，这篇博客写一下小程序canvas，也算是为接下去的工作做准备吧！ 之前写过小程序，那时候也有用到过canvas但是那时候没弄好项目黄了。这次卷土重来！ wxml &lt;canvas style="width: 200px; height: 200px;" canvas-id="firstCanvas"&gt;&lt;/canvas&gt; js 以前看的博客应是...
html5 画猫全过程svg入门
家门口种果树，不怕馋
07-10 2798
下面所有信息均来自http://commons.oreilly.com/wiki/index.php/SVG_Essentials/Getting_Started SVG，代表为S calable V ector G raphics，是XML的应用程序，使得它可以在一个紧凑的，便携的形式表示图形信息。SVG利息迅速增长，各大公司已经提供工具来创建和查看SVG文件。本章开始与计算机图形学的两大系统...
可爱的猫咪怎么画？超详细教你如何绘画可爱的猫咪！
chengyixiu6110的博客
09-02 4797
猫咪怎样画？猫咪的绘画技巧，学习绘画难吗？怎样才能学好绘画？想必这些都是绘画初学者们常常在想的问题吧，想要绘画出心爱的猫咪，可是却不知道怎样最初才好，猫咪的身体结构是什么，猫咪 的动作怎样画？统统不知道 那么今日我就在网络上收集整理了一些关于怎样绘画猫咪的教程给我们，教我们怎样绘画出心爱的猫咪...
画“猫”神器
shenmifangke的专栏
02-22 4197
因为一直在关注这类运用深度学习的绘画生成技术 今天发现个画猫的……果然停不下来 网址http://affinelayer.com/pixsrv/index.html 当然不限于猫，还有其他的，建筑，包之类 pix2pix的深度学习技术，只要绘制轮廓就可以生成 画了几幅根本停不下来
可爱猫咪动画 canvas
07-13
通过使用 canvas 技术，可爱猫咪动画可以实现高度自定义的图形绘制。我们可以绘制出各种可爱的猫咪形象，包括不同颜色、品种和动作的猫咪。每一个猫咪形象都经过精心设计，呈现出了逼真的外观和动画效果。 除了静态...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值