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

用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>

用canvas画一个简易的机器猫头像相关推荐

HTML关于机器猫的小游戏,完美起航-用HTML5+CSS3画一个简易的机器猫头像
用HTML5+CSS3画一个机器猫的头像,原图如下: 代码实现效果如下: 布局使用了绝对定位.相对定位以及浮动,鼻子使用了背景图像渐变的效果, 笑脸的嘴巴使用椭圆的下边框实现,胡须部分的细节处理得还是 ...
用HTML5+CSS3画一个简易的机器猫头像
原图如下: 代码实现效果如下: 布局使用了绝对定位.相对定位以及浮动,鼻子使用了背景图像渐变的效果, 笑脸的嘴巴使用椭圆的下边框实现,胡须部分的细节处理得还是不够好. 代码如下: CSS样式: .ca ...
[html] 请使用canvas画一个渐变的长方形
[html] 请使用canvas画一个渐变的长方形 // 普通canvas绘图工具类// umd适配多种引入方式 (function(root, factory) {if (typeof define ...
python程序、画一个笑脸_如何使用canvas画一个微笑的表情（代码示例）
本篇文章给大家带来的内容是关于如何使用canvas画一个微笑的表情(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 实习期间让我用canvas画一个表情,比较简单,话不多说 ...
[html] 请使用canvas画一个椭圆
[html] 请使用canvas画一个椭圆 <script> var c=document.getElementById("myCanvas"); var ctx=c. ...
怎么画图自动生成HTML,用canvas写一个简易画图工具
本文将为您描述用canvas写一个简易画图工具,具体操作方法: Document style="border:1px solid #000000;">您的浏览器不支持canv ...
用canvas画一个太极图（八卦图）
用canvas画一个太极图(八卦图) 源码展示链接: https://yanhappiness.github.io/Notes/canvas_src.html 理解什么是canvas canvas是H ...
如何利用canvas画一个圆，并且填充颜色
如何利用canvas画一个圆,并且填充颜色(小白专用,大佬勿看) canvas基础相信在此之前,你对canvas已经有一定的了解了,接下来我将介绍,如何利用canvas画一个圆. 1.新建一个htm ...
用canvas画一个五星红旗
利用canvas画一个好看的五星红旗!!! 简单,容易上手! <!DOCTYPE html> <html lang="utf-8"> <meta ht ...

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

用canvas画一个简易的机器猫头像相关推荐

最新文章

热门文章