JavaScript中使用画布实现笑脸火柴人

2023-10-29

在这之前,根本不知道JavaScript具体到底有多重要,现在才明白JavaScript也很强大,从网上看了几个js写的网页小游戏,我都惊呆了,以后一定要好好学习js。。。。

<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript">
function drawAdidas(){
  var c=document.getElementById('myCanvas');
		var cxt=c.getContext('2d');
		cxt.save();
		cxt.beginPath();
  cxt.arc(100,50,30,0,Math.PI*2,true);
  cxt.fill();
  cxt.beginPath();
  cxt.strokeStyle='#c00';
  cxt.lineWidth=3;
  cxt.arc(100,50,20,0,Math.PI,false);
  cxt.stroke();
  cxt.beginPath();
  cxt.fillStyle="#c00";
  cxt.arc(90,45,3,0,Math.PI*2,true);
  cxt.fill();
  cxt.moveTo(113,45);
  cxt.arc(110,45,3,0,Math.PI*2,true);
  cxt.fill();
  cxt.stroke();
  
  cxt.moveTo(100,80);
  cxt.lineTo(100,150);
  cxt.moveTo(100,100);
  cxt.lineTo(60,120);
  cxt.moveTo(100,100);
  cxt.lineTo(140,120);
  cxt.moveTo(100,150);
  cxt.lineTo(80,190);
  cxt.moveTo(100,150);
  cxt.lineTo(140,190);
  cxt.stroke();
}
 window.addEventListener("load",drawAdidas,true);
</script>
</head>
<body>
<canvas id="myCanvas" width="230" height="200" style="border:1px solid blue">
    Your browser does not support the canvas element.
</canvas>
</body>
</html>


本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

JavaScript中使用画布实现笑脸火柴人 的相关文章

随机推荐

  • OC门与OD门

    OC门与OD门 OC Open Collector 集电极开路 OD Open Drain 漏极输出 集电极开路输出的结构如下图所示 右边的那个三极管集电极什么都不接 所以叫做集电极开路 左边的三极管为反相使用 使输入为 0 时 输出也为
  • 底层进阶

    在知乎上关注了好多图形学大佬 感觉现在知乎的技术氛围要比掘金推荐旧文好多了 经常会推送感兴趣的领域内容 而且还可以和作者私信交流 这段时间看到有大佬分享 GPU 架构相关的内容 做图像渲染的还是要懂 GPU 才行的 毕竟是和它打交道嘛 这位
  • springboot @CreatedDate @LastModifiedDate 自动生成创建时间,修改时间

    CreatedDate或 LastModifiedDate 在实体类的属性上加上上面的注解 即可不用处理时间的问题 在插入时会自动生成创建时间 修改时自动更新修改时间 搭配 Column updatable false 使用 注解起作用还需
  • C++ 随机数的制作

    include
  • Spring security安全登录-当AJAX遇上Redirect

    前言 最近做平台引入spring security做为安全认证框架 在登录的时候使用的ajax的请求方式 最开始的做法是调用登录的接口 成功后再前端使用window location href index html的方式跳转到希望的页面 考
  • kali linux 2020.4 自带浏览器英文改中文

    刚开始用kali linux 可能一些伙伴也会像我一样遇到英文不通的情况 比如 系统自带的火狐浏览器是英文的 要变成中文直接敲入 sudo apt install firefox esr l10n zh cn y 然后重启一下火狐浏览器就可
  • 【Unity+MySQL】实现简单的注册登录系统

    目录 1 安装Unity引擎和Navicat软件 2 安装MySQL8 0数据库 2 1 下载msi文件 2 2 安装MySQL Server 8 0 2 3 配置环境变量 2 4 安装MySQL服务 2 5 开启MySQL服务 2 6 修
  • 软件外包开发项目管理工具

    随着软件项目的规模越做越大 项目管理人员需要使用工具管理项目进度 从而更有成效的管理好软件开发进度 软件开发的进度管理工具有很多 今天和大家分享一些常用的系统工具 希望对大家有所帮助 北京木奇移动技术有限公司 专业的软件外包开发公司 欢迎交
  • Hololens 学习-----1

    ww 学习资料 基本操作 链接 https learn microsoft com zh cn hololens hololens2 basic usage 链接 https learn microsoft com zh cn window
  • Java中Collection集合和Map集合详解(进阶三)

    目录 友情提醒 第一部分 单列集合 第一章 单列集合体系 Collection接口 1 1 单列集合是什么 与数组的区别在哪 1 2 单列集合体系与分类 第二章 单例集合体系Collection下的List接口 Set接口 2 0 List
  • JAVA随机生成十个不重复的整数(Arraylist,Set)

    随机生成十个不重复的整数有许多方法 这里我只写出两种 第一种 Set 先上代码 import java util HashSet import java util Set public class Demo01 public static
  • (Java)leetcode-337 House Robber III(打家劫舍III)

    题目描述 在上次打劫完一条街道之后和一圈房屋后 小偷又发现了一个新的可行窃的地区 这个地区只有一个入口 我们称之为 根 除了 根 之外 每栋房子有且只有一个 父 房子与之相连 一番侦察之后 聪明的小偷意识到 这个地方的所有房屋的排列类似于一
  • CAN芯片_ TJA1051T/3

    前不久画了块板子 STM32F407VET6加CAN芯片的 如下图 这个电路是从正点原子抄过来的 但是板子打出来发现用不了 换上正点原子STM32F429开发板上的CAN芯片后就能正常工作了 仔细观察后发现两个芯片不太一样 我们买的是TJA
  • Windows 10 安装 PostgreSQL 12.x 报错 ‘psql‘ 不是内部或外部命令 & 由于找不到文件libintl-9.dll等问题

    目录 序言 一 问题总结 问题 1 psql 不是内部或外部命令 也不是可运行的程序或批处理文件 问题 2 由于找不到文件libintl 9 dll 无法继续执行代码 重新安装程序可能会解决此问题 1 卸载 2 安装 3 安装 Stack
  • 8年经验之谈 —— 35岁以上的测试开发工程师都去哪里了?

    测试开发工程师就是吃青春饭 35岁就是测试开发工程师的天花板 没有工作机会了 测试开发工程师趁早转行 不然迟早失业 网上对测试开发工程师不友好的言论非常多 真的是这样吗 如果不是这样 那么35岁以上的测试开发工程师去哪里了呢 行业内转岗 一
  • 一篇搞定pandas语法,建议收藏

    导语 如果说大数据里面hive是屠龙刀 那么pandas则是倚天剑 帮助我们对数据数据挖掘 数据分析 数据清洗 本篇介绍了Pandas 一些基础的语法 以及使用技巧 建议收藏 目录 数据准备 Dataframe 基础操作 2 1 查看 2
  • Android App保活的方式

    背景 在Android系统中 当应用程序进入后台或者被用户关闭后 系统会自动回收该应用程序的资源 以达到优化系统性能的目的 但是 有些应用程序需要在后台长时间运行 比如音乐播放器 即时通讯等 这时就需要使用一些技术手段来保持应用程序的运行状
  • JAVA实现文件上传

    利用JAVA实现文件上传 Demo01 servlet下的图片上传功能 前端代码 upload html h3 文件上传 h3
  • C#中按位与,按位或

    在工作中遇到按位或组合权限串 一直不是特别明白 今天终于花了半个下午的时间搞明白其中的道理 首先每一个权限数都是2的N次方数 如 k1 2 添加 k2 4 删除 k3 8 修改 如此定义功能权限数 当需要组合权限时 就需要对各个所拥有的权限
  • JavaScript中使用画布实现笑脸火柴人

    在这之前 根本不知道JavaScript具体到底有多重要 现在才明白JavaScript也很强大 从网上看了几个js写的网页小游戏 我都惊呆了 以后一定要好好学习js