Web前端画图

最新推荐文章于 2024-08-10 22:42:49 发布

婉菡

最新推荐文章于 2024-08-10 22:42:49 发布

阅读量1k

点赞数 4

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/gcyqweasd/article/details/107499896

版权

本文介绍了如何利用JavaScript在Web前端实现简易的卡通形象绘制，包括皮卡丘和哆啦A梦。通过JavaScript的绘图API，可以创建出有趣的互动图形，为网页增添生动元素。

摘要由CSDN通过智能技术生成

简易皮卡丘

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<canvas id="myCanvas" width="660" height="476" style="background-color:#FFE600" >
		
		</canvas>
		<script type="text/javascript">
		    var c=document.getElementById("myCanvas");
		    var cxt=c.getContext("2d");
		    //右眼
		    cxt.fillStyle="#000";
		    cxt.beginPath();
		    cxt.arc(200,188,30,0,Math.PI*2,true);
		    cxt.closePath();
		    cxt.fill();
		    cxt.fillStyle="#FFF";
		    cxt.beginPath();
		    cxt.arc(188,175,11,0,Math.PI*2,true);
		    cxt.closePath();
		    cxt.fill();
		    //左眼
		    cxt.fillStyle="#000";
		    cxt.beginPath();
		    cxt.arc(450,188,30,0,Math.PI*2,true);
		    cxt.closePath();
		    cxt.fill();
		    cxt.fillStyle="#FFF";
		    cxt.beginPath();
		    cxt.arc(438,175,11,0,Math.PI*2,true);
		    cxt.closePath();
		    cxt.fill();
		    //两个晒红
		    cxt.fillStyle="#FF0000";
		    cxt.beginPath();
		    cxt.arc(488,275,35,0,Math.PI*2,true);
		    cxt.closePath();
		    cxt.fill();
		    cxt.fillStyle="#FF0000";
		    cxt.beginPath();
		    cxt.arc(162,275,35,0,Math.PI*2,true);
		    cxt.closePath();
		    cxt.fill();
		    //鼻子
		    cxt.fillStyle="#000";
		    cxt.beginPath();
		    cxt.moveTo(328,200);
		    cxt.arc(328,200,11,