用canvas画一个简易的机器猫头像

最新推荐文章于 2022-07-04 09:37:36 发布
最新推荐文章于 2022-07-04 09:37:36 发布
阅读量821 收藏 1
点赞数 2
分类专栏： canvas html css 文章标签： canvas css3 html html5 定位
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Serena_tz/article/details/108713494
版权
html 同时被 3 个专栏收录
39 篇文章 1 订阅
订阅专栏
css
32 篇文章 0 订阅
订阅专栏
canvas
5 篇文章 0 订阅
订阅专栏

用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>
    <style>
        #canvas{
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: 100px auto;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="620" height="620"></canvas>
    <script>
        var canvas=document.getElementById("canvas");
        var pen=canvas.getContext("2d");
        // 开始画大脸盘子
        pen.lineWidth=5;
        pen.strokeStyle="#4d4f50";
        pen.fillStyle="#07beea";
        pen.beginPath();
        pen.arc(315,315,188,0,2*Math.PI);
        pen.closePath();
        pen.stroke();
        pen.fill();
        // 开始画腮帮子
        pen.lineWidth=3;
        pen.fillStyle="#fff";
        pen.beginPath();
        pen.arc(315,340,123,0,2*Math.PI);
        pen.closePath();
        pen.stroke();
        pen.fill();
        // 开始画眼睛
        pen.lineWidth=4;
        pen.fillStyle="#fff";
        pen.beginPath();
        pen.strokeRect(245,226,65,35)
        pen.fillRect(245,226,65,35)
        pen.strokeRect(317,226,65,35)
        pen.fillRect(317,226,65,35)
        pen.closePath();
        // 开始画眼珠子
        pen.fillStyle="#000000";
        pen.beginPath();
        pen.arc(278,243,12,0,2*Math.PI);
        pen.arc(350,243,12,0,2*Math.PI);
        pen.closePath();
        pen.fill();
        // 开始画大红鼻子
        pen.lineWidth=2;
        pen.strokeStyle="#000";
        pen.fillStyle="#ff0000";
        pen.beginPath();
        pen.arc(313,295,26,0,2*Math.PI);
        pen.closePath();
        pen.fill();
        pen.stroke();
        // 画小嘴中线
        pen.beginPath();
        pen.moveTo(313,320)
        pen.lineTo(313,420)
        pen.closePath();
        pen.stroke();
        // 画微笑
        pen.beginPath();
        pen.arc(315,330,89,30*Math.PI/180,150*Math.PI/180);
        pen.stroke();
        // 画胡须
        pen.beginPath();
        // 左边
        pen.moveTo(275,328);
        pen.lineTo(193,328);
        pen.moveTo(275,338);
        pen.lineTo(193,358);
        pen.moveTo(275,318);
        pen.lineTo(193,300);
        // 右边
        pen.moveTo(439,328);
        pen.lineTo(357,328);
        pen.moveTo(439,358);
        pen.lineTo(357,338);
        pen.moveTo(439,300);
        pen.lineTo(357,318);
        pen.closePath();
        pen.stroke();
    </script>
</body>
</html>
Serena_tz
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
canvas实操 之 绘制机器猫&&实现防伪刮图
孤寒者的博客
05-17 3万+
时间是检验真理的唯一标准！！！ canvas实操 之 绘制机器猫&&实现防伪刮图。
HTML5 canvas哆啦A梦机器猫图形代码.zip
05-27
HTML5 canvas哆啦A梦机器猫图形代码是利用HTML5 canvas技术绘制的机器猫。
HTML5 canvas机器猫绘图实例.rar
07-10
HTML5 canvas机器猫绘图实例，Canvas绘出可爱的机器猫特效，看样子很逗人，连胡子也画出来了，不错不错。看上去就那么几笔，但实际上这个图形是不规则的，因此用传统的CSS是无法实现的，现在有了HTML css3 技术，画出这种效果轻松多了哦。
python机器猫代码_canvas绘制机器猫代码实例
weixin_39834084的博客
12-05 441
[HTML] 纯文本查看 复制代码运行代码蚂蚁部落var mycanvas = document.getElementById('mycanvas');var f = mycanvas.getContext('2d');var mycanvas = document.getElementById('mycanvas');var context = mycanvas.getContext('2d')...
HTML5 Canvas机器猫图形特效.zip
07-04
HTML5 Canvas机器猫图形特效是一款卡通可爱的叮当猫图形实例代码。
canvas实现一个简易画板
04-18
本文将深入探讨如何使用JavaScript和HTML5的Canvas API来创建一个简易画板，并介绍如何将画板上的内容导出为图片。 首先，我们需要在HTML文档中创建一个`<canvas>`元素，它是画布的基础。例如： ```html <canvas ...
js 使用canvas制作一个简易的画板.pdf
12-16
使用 JavaScript，可以通过 `document.getElementById` 方法获取 Canvas 元素，并将其赋值给一个变量。例如：`const canvas = document.getElementById("canvas")` knowledge point 3: 获取 Canvas 2D 绘图上下文 ...
JS+canvas画一个圆锥实例代码
01-19
我的第一个 HTML 页面</title> </head> <body> <canvas id='cvs' width='1000' height=800> </canvas> [removed] const cvs =document.getElementById('cvs'); // 计算画布的宽度 const width =...
vue-canvas:一个简单vue canvas画板的demo
05-10
Vue Canvas 是一个基于 Vue.js 的轻量级画板组件，旨在提供一个简易的画布功能，用户可以在网页上进行自由绘图。这个项目是开发者为了展示如何在 Vue 框架中集成 HTML5 Canvas 元素而创建的一个示例。在 Vue 应用中...
html机器猫游戏源码,利用HTML5实现Canvas机器猫图形特效
weixin_39583655的博客
05-31 196
特效描述：利用HTML5实现 Canvas 机器猫 图形特效。利用HTML5实现Canvas机器猫图形特效代码结构1. HTML代码//auth ：Simple-Wuvar mycanvas = document.getElementById('mycanvas');var f = mycanvas.getContext('2d');var mycanvas = document.getEleme...
HTML5 canvas哆啦A梦机器猫图形特效代码
03-20
HTML5 canvas哆啦A梦机器猫图形代码是利用HTML5 canvas技术绘制的机器猫。
HTML5 canvas可爱猫咪表情3D动画
05-01
HTML5 canvas可爱猫咪表情3D动画基于Zdog1.0.1制作，猫咪表情动画，支持鼠标拖拽3D旋转。
使用Canvas类绘制android机器人
08-17
使用Canvas类绘制android机器人
canvas机器猫走路动画js特效
ICode联盟
07-04 153
下载地址基于canvas实现的网页动画特效，机器猫走路的效果。dd:
用html5制作叮当猫,html5 canvas 实现一个简单的叮当猫头部
weixin_42378973的博客
06-17 230
face.fillStyle= ‘#07beea‘;//设置填充颜色face.fill();//填充face.lineWidth= 2;//轮廓线宽度face.strokeStyle= ‘#333‘;//轮廓线颜色face.stroke();//画轮廓线face.beginPath();//重置当前绘画路径face.moveTo(160,450);//画笔移动到起始点face.bezierCurv...
java绘图机器猫_canvas哆啦A梦图形代码
weixin_32933155的博客
02-17 1197
HTML5 canvas哆啦A梦机器猫图形代码是利用HTML5 canvas技术绘制的机器猫。canvas画图的基本知识context:一直觉得这个翻译成“上下文”真够蛋疼的，context是一个封装了很多绘图功能的对象，获取这个对象的方法是var context =canvas.getContext("2d");也许这个2d勾起了大家的无限遐想，但是很遗憾的告诉你html5还只是个少女，不提供3...
哆啦A梦蓝胖子来啦，html5+div+css3代码绘制机器猫
热门推荐
08-20 1万+
哆啦A梦蓝胖子来啦，之前就有大神画过蓝胖子。本站隆重推出机器猫超盟版。现在主流浏览器对css3支持良好，您可以通过Chrome,Firfox,Safari,IE9+等浏览器完美预览。本站后期将推出动画版本，尽请期待！ 在线demo地址：http://www.aweb.cc/Subject/index/channel/pokonyan.html 作者：lovebslq
用canvas画出可爱的哆啦A梦
FleshyAPP的博客
05-11 986
用canvas画出可爱的哆啦A梦 提示：这里可以添加本文要记录的大概内容： 例如：本文就介绍了canvas案例的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、canvas是什么？ HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 二、使用步骤 1.哆啦A梦基本代码 代码如下（示例）： <!DOCTYPE html> <html l
用canvas 画一个橙留香的头像
最新发布
04-27
好的，以下是代码实现： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>橙留香头像</title> </head> <body> <canvas id="avatar" width="300" height="300"></canvas> <script> const canvas = document.getElementById('avatar'); const ctx = canvas.getContext('2d'); // 画头像背景 ctx.fillStyle = '#FDB813'; ctx.fillRect(0, 0, canvas.width, canvas.height); // 画橙留香头像的脸 ctx.fillStyle = '#F7CBA0'; ctx.beginPath(); ctx.arc(canvas.width / 2, canvas.height / 2, 120, 0, 2 * Math.PI); ctx.fill(); // 画橙留香头像的眼睛 ctx.fillStyle = 'white'; ctx.beginPath(); ctx.arc(canvas.width / 2 - 45, canvas.height / 2 - 20, 30, 0, 2 * Math.PI); ctx.fill(); ctx.beginPath(); ctx.arc(canvas.width / 2 + 45, canvas.height / 2 - 20, 30, 0, 2 * Math.PI); ctx.fill(); ctx.fillStyle = '#292F33'; ctx.beginPath(); ctx.arc(canvas.width / 2 - 45, canvas.height / 2 - 20, 15, 0, 2 * Math.PI); ctx.fill(); ctx.beginPath(); ctx.arc(canvas.width / 2 + 45, canvas.height / 2 - 20, 15, 0, 2 * Math.PI); ctx.fill(); // 画橙留香头像的嘴巴 ctx.fillStyle = '#C73D3A'; ctx.beginPath(); ctx.arc(canvas.width / 2, canvas.height / 2 + 40, 50, 0.2 * Math.PI, 0.8 * Math.PI); ctx.fill(); // 画橙留香头像的鼻子 ctx.fillStyle = '#292F33'; ctx.beginPath(); ctx.arc(canvas.width / 2, canvas.height / 2, 30, 0.4 * Math.PI, 0.6 * Math.PI); ctx.fill(); ctx.beginPath(); ctx.arc(canvas.width / 2, canvas.height / 2 + 10, 5, 0, 2 * Math.PI); ctx.fill(); // 画橙留香头像的脖子 ctx.fillStyle = '#F7CBA0'; ctx.fillRect(canvas.width / 2 - 60, canvas.height / 2 + 100, 120, 80); // 画橙留香头像的衣服 ctx.fillStyle = '#C73D3A'; ctx.beginPath(); ctx.moveTo(canvas.width / 2 - 120, canvas.height / 2 + 180); ctx.lineTo(canvas.width / 2 + 120, canvas.height / 2 + 180); ctx.lineTo(canvas.width / 2 + 100, canvas.height / 2 + 300); ctx.lineTo(canvas.width / 2 - 100, canvas.height / 2 + 300); ctx.closePath(); ctx.fill(); </script> </body> </html> ``` 效果如下： ![avatar](https://img-blog.csdnimg.cn/2021070717022814.png)
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值