canvas 绘制笑脸、哭脸

最新推荐文章于 2023-09-23 09:36:09 发布
最新推荐文章于 2023-09-23 09:36:09 发布
阅读量2k 收藏 8
点赞数 4
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41592652/article/details/102415422
版权

html文件如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Smiling</title>
		<style type="text/css">
		</style>
	</head>
	<body>
		<canvas id="canvas" width='640' height='480'>
			Your browser does not support the HTML5 canvas tag.
		</canvas>
		<script>
			var app = document.getElementById("canvas");
			canvas.onmouseover = function() {
				Crying();
			}
			canvas.onmouseout = function() {
				smile();
			}

			function Crying() {
				var c = document.getElementById("canvas");
				var ctx = c.getContext("2d"); //绘制2d；
				var grd = ctx.createRadialGradient(320, 240, 150, 320, 240, 200);
				grd.addColorStop(0, "red");
				grd.addColorStop(1, "white");
				ctx.fillStyle = grd;
				ctx.strokeStyle = 'black';
				ctx.beginPath();
				ctx.arc(320, 240, 200, 0, 2 * Math.PI);
				ctx.fill();
				ctx.stroke();
				ctx.closePath();
				ctx.beginPath();
				ctx.arc(240, 175, 30, 0, 2 * Math.PI);
				ctx.stroke();
				ctx.closePath();
				ctx.beginPath();
				ctx.arc(400, 175, 30, 0, 2 * Math.PI);
				ctx.stroke();
				ctx.closePath();

				ctx.beginPath();
				ctx.arc(320, 380, 100, 1 * Math.PI, 2 * Math.PI);
				ctx.stroke();
				ctx.closePath();
			}
			window.onload = function() {
				smile();
			}

			function smile() {
				var c = document.getElementById("canvas");
				var ctx = c.getContext("2d"); //绘制2d；
				var grd = ctx.createRadialGradient(320, 240, 150, 320, 240, 200);
				grd.addColorStop(0, "red");
				grd.addColorStop(1, "white");
				ctx.fillStyle = grd;
				ctx.strokeStyle = 'black';
				ctx.beginPath();
				ctx.arc(320, 240, 200, 0, 2 * Math.PI);
				ctx.fill();
				ctx.stroke();
				ctx.closePath();
				ctx.beginPath();
				ctx.arc(260, 175, 30, 0, 2 * Math.PI);
				ctx.stroke();
				ctx.closePath();
				ctx.beginPath();
				ctx.arc(380, 175, 30, 0, 2 * Math.PI);
				ctx.stroke();
				ctx.closePath();

				ctx.beginPath();
				ctx.arc(320, 240, 150, 0, -1 * Math.PI);
				ctx.stroke();
				ctx.closePath();
			}
		</script>
	</body>
</html>
huas_mcfeng
关注
  • 4
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
canvas 画笑脸
mo_gen的博客
12-16 458
代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&
利用HTML5中的Canvas绘制一张笑脸的教程
09-28
主要介绍了利用HTML5中的Canvas绘制一张笑脸的教程,使用Canvas进行绘图是HTML5中的基本功能,需要的朋友可以参考下
怎么用CSS画一个哭脸？
鱼火
09-21 2787
效果如上，代码在下 Document .first-div{ width: 300px; height: 300px; background: purple; position: absolute; left:50px; top:50px;
canvas绘制笑脸
PPone117的博客
05-08 774
HTML5用canvas绘制一个笑脸 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <canvas id='my' width = "600" height ...
canvas实现简单的画图工具中画笔效果,外加画好的笑脸
anphygvyti09102的博客
12-02 247
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas实现简单的画图工具中画笔效果,外加画好的笑脸</title> </head> <body> <canvas wi...
canvas绘制一个笑脸
最新发布
qq_45331969的博客
09-23 629
【代码】canvas绘制一个笑脸。
自定义控件之Canvas图形绘制基础练习-青春痘笑脸^_^
weixin_30546189的博客
08-10 143
对于自定义控件的意义不言而喻，所以对它的深入研究是很有必要的，前些年写过几篇关于UI效果的学习过程，但是中途比较懒一直就停滞了，而对于实际工作还是面试来说系统深入的了解自定义控件那是很有必要的，所以接下来会不断的去记录自己学习关于自定义控件一些心路历程，重点是要深入剖析其机制的原理。 而从最基础Canvas的绘制开始练习，没有扎实的基础何谈深入呢？而这里最终会实现一个人的笑脸的样子来学一些基础的...
使用canvas绘制钟表
11-06
本教程将详细介绍如何使用canvas绘制一个动态的钟表，这涉及到JavaScript和Canvas API的基础知识。 首先，我们需要在HTML页面中创建一个canvas元素，并设置其id以便在JavaScript中引用： ```html <canvas id=...
vue+canvas绘制图形
01-09
在`Canvas.vue`内部，我们将定义`<canvas>`标签，并通过JavaScript来操作其上下文（`canvas.getContext('2d')`），实现图形的绘制。 描述中提到的“封装好的绘制圆形、矩形以及不规则图形的方法”，这通常意味着...
canvas绘制动态心电图
05-08
这篇内容主要探讨如何使用Canvas来绘制动态心电图，这在医疗健康应用、生理数据监测等领域非常有用，它可以让用户在浏览器上实时查看心电图数据，效果如同监护仪一样。 首先，了解Canvas的基本操作是必要的。Canvas...
动画笑脸哭脸的变化
04-23
该实例主要是笑脸和哭脸的动画变化，对于掌握canvas,handler,Thread很有帮助
JS写滑稽笑脸运动效果
11-20
效果演示： （就这玩意儿，差点写崩了…） 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>滑稽笑脸运动</title> <meta name="author" content="marinerzp"> <style> *{padding: 0;margin: 0;} html,body{ width: 100%; height: 100%; } #main{ width: 100px; heigh
canvas绘制表盘时钟
08-31
Canvas API 是一种在网页上动态绘制图形的强大工具，它允许开发者通过JavaScript代码进行像素级别的操作，创建出丰富的视觉效果。 首先，我们创建一个HTML文件，并在`<body>`部分设置一个`<canvas>`元素，用于显示...
canvas绘制多边形
08-31
本文将深入讲解如何使用`canvas`来绘制多边形，通过示例代码详细解析绘制过程。 首先，我们需要在HTML页面中创建一个`canvas`元素，指定其宽度和高度，以便为绘图提供足够的空间： ```html <canvas id="myCanvas" ...
用canvas画一个实心描边的笑脸
dream0726的博客
07-26 1991
用canvas画一个实心描边的笑脸最近学习了HTML5，看完了教程不知道该干嘛，网上看到别人用canvas画笑脸，不过是空心的，我想画一个实心的带描边的，网上找了一些教程，看着太繁琐。于是取其精华，几经失败终于成功了。未免以后忘记，所以特意记录下来，以备日后复习。 效果如下： 代码如下：<!DOCTYPE html> <html> <head> <title>实心圆测试</title>
python程序、画一个笑脸_使用Canvas绘制一个笑脸图
weixin_39979167的博客
12-08 294
JavaScript语言：JaveScriptBabelCoffeeScript确定var data = [[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1],[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1],[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1]...
html哭脸字符,科学网—Unicode中的符号 - 丁祥欢的博文
weixin_29191081的博客
06-17 521
可是，这句话基本上是正确的，只要你提到的符号不是组合符号或者是你自己临时创造的符号，你都可以在以下文件中找到，这个文件是就是Unicode 13.0的字符集。提取码: vis3当然，你也可以在线查找，输入码值来查找一个字符(反过来不先)URL：http://www.unicode.org/charts/这个字符集收集了世界上各种语言的字符集，也包括了非常罕见的中文汉字。这些特殊的字符，可能在Wor...
vue-element：实现微信表情
好幸运
07-29 1053
一、创建emotion.json文件夹（以下字符是按照微信官方来定义的） [ "[微笑]", "[撇嘴]", "[色]", "[发呆]", "[得意]", "[流泪]", "[害羞]", "[闭嘴]", "[睡]", "[大哭]", "[尴尬]", "[发怒]", "[调皮]", "[呲牙]", "[惊讶]", "[难过]", "[酷]", "[冷汗]", "[抓狂]", "[吐]", "[偷笑]", "[可爱]",
canvas-绘制笑脸，张嘴闭嘴
qq_37155370的博客
10-11 806
canvas-绘制笑脸，张嘴闭嘴 <canvas id="c3" width="500" height="400"></canvas> <script> var c3=document.getElementById("c3"); var ctx=c3.getContext("2d"); // 闭嘴笑脸 function clo...
微信小程序怎么用canvas绘制笑脸
05-23
可以使用以下步骤在微信小程序中使用Canvas绘制笑脸： 1. 在wxml文件中添加canvas标签，设置canvas的id和宽高： ```html <canvas id="myCanvas" style="width: 300px; height: 300px;"></canvas> ``` 2. 在js文件...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值