canvas画一个笑脸和画一个三角形

画一个笑脸主要用到的是画弧形的方法:arc,有五个参数:起始坐标,半径,弧形起始坐标,还有一个参数是顺时针还是逆时针。画的笑脸:虽然丑了点,但是学习了

代码:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><canvas id="myCanvas" width="500" height="500"></canvas><script>const canvas = document.getElementById('myCanvas')if (canvas.getContext) {const ctx = canvas.getContext('2d')// ctx.fillStyle = 'red'// 画一个圆形(圆心坐标,半径,起始弧度,结束弧度, 顺时针还是逆时针:true/false)ctx.beginPath()ctx.arc(150, 150, 100, 0, Math.PI * 2)// 画完之后,得填充一下,不然看不到// ctx.fill()// 只画路径ctx.stroke()// ctx.closePath()// 画笑脸的嘴角:可以使用移动画笔的操作:moveTo(x,y) 移动到指定位置// ctx.beginPath()// 移动到开始落画笔的地方,不然会带上半径一起画出来ctx.moveTo(200, 150)ctx.arc(150, 150, 50, 0, Math.PI)ctx.stroke()// ctx.closePath()// 画眼睛// ctx.beginPath()ctx.moveTo(120, 100)ctx.arc(100, 100, 20, 0, Math.PI * 2)// ctx.fill()ctx.stroke()// ctx.closePath()// 画眼睛// ctx.beginPath()ctx.moveTo(220, 100)ctx.arc(200, 100, 20, 0, Math.PI * 2)// ctx.fill()ctx.stroke()ctx.closePath()}</script></body>
</html>

 还有画一个三角形:主要用的是画线的方法:lineTo,有两个参数,起始坐标。记得画之前,先将画笔的坐标移动到某个位置

代码:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div>画一条直线</div><canvas id="myCanvas" width="500" height="500"></canvas><script>// 获取画布var canvas = document.getElementById('myCanvas')// 获取画笔var context = canvas.getContext('2d')// 画线的时候要有起点和终点context.moveTo(0, 0)// 终点: 100, 0context.lineTo(100, 0)context.lineTo(50, 100)context.lineTo(0, 0)// 画线context.stroke()context.fill()</script></body>
</html>

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/159680.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Docker 内核详解】namespace 资源隔离(四):Mount namespace Network namespace

【Docker 内核详解 - namespace 资源隔离】系列包含&#xff1a; namespace 资源隔离&#xff08;一&#xff09;&#xff1a;进行 namespace API 操作的 4 种方式namespace 资源隔离&#xff08;二&#xff09;&#xff1a;UTS namespace & IPC namespacenamespace 资源隔…

[23] T^3Bench: Benchmarking Current Progress in Text-to-3D Generation

3D生成蓬勃发展&#xff0c;主流方法通过事例比较和用户调查来评价方法好坏&#xff0c;缺少客观比较指标&#xff1b;本文提出Bench&#xff0c;首次综合比较了不同生成方法&#xff1b;具体来说&#xff0c;本文设计了质量评估&#xff08;Quality Assessment&#xff09;和对…

MyBatisPlus的学习项目页面

MyBatisPlus通过扫描实体类&#xff0c;并基于反射获取实体类信息作为数据库表信息 类名驼峰转下划线作为表名 名为id的字段作为主键 变量名驼峰转下划线作为表的字段名 常见注解 TableName&#xff1a;用来指定表名 Tableld&#xff1a;用来指定表中的主键字段信息 Tabl…

攻防世界题目练习——Web引导模式(三)(持续更新)

题目目录 1. mfw2.3.4.5. 1. mfw 进去看到网页和页面内容如下&#xff1a; 看到url的参数 ?pageabout &#xff0c;我以为是文件包含什么的&#xff0c;反复试了几次&#xff0c;想用 …/…/…/…/etc/passwd &#xff0c;但是发现.似乎被过滤了&#xff0c;实在不知道怎么做…

SpringCloud学习笔记-Nacos服务分级存储模型

Nacos服务分级存储模型 一级是服务&#xff0c;例如userservice二级是集群&#xff0c;例如杭州或上海三级是实例&#xff0c;例如杭州机房的某台部署了userservice的服务器 微服务互相访问时&#xff0c;应该尽可能访问同集群实例&#xff0c;因为本地访问速度更快。当本集…

Pygame中将鼠标形状设置为图片2-1

在Pygame中利用Sprite类的派生类将鼠标形状设置为图片&#xff0c;其原理就是将Sprite类的派生类对应图片的位置设置为鼠标的当前位置即可。其效果如图1所示。 图1 将鼠标设置为图片 从图1可以看出&#xff0c;鼠标的形状变为红色的&#xff0c;该红色的随着鼠标的移动而移动&…

前后端数据导入导出Excel

一&#xff1a;导入 Excel有读取也便有写出&#xff0c;Hutool针对将数据写出到Excel做了封装。 原理 Hutool将Excel写出封装为ExcelWriter&#xff0c;原理为包装了Workbook对象&#xff0c;每次调用merge&#xff08;合并单元格&#xff09;或者write&#xff08;写出数据&…

激发创意,打造震撼视觉效果——Adobe After Effects 2024(Ae2024)全新来袭!

想要创造独特的、令人惊叹的视觉效果吗&#xff1f;不要犹豫&#xff0c;现在就升级到全新的Adobe After Effects 2024&#xff08;Ae2024&#xff09;&#xff01;作为业界领先的动态图形和视觉效果软件&#xff0c;Ae2024将为您的创作带来前所未有的火花。 Ae2024拥有强大的…

GPT实战系列-ChatGLM2部署Ubuntu+Cuda11+显存24G实战方案

GPT实战系列-ChatGLM2部署UbuntuCuda11显存24G实战方案 自从chatGPT掀起的AI大模型热潮以来&#xff0c;国内大模型研究和开源活动&#xff0c;进展也如火如荼。模型越来越大&#xff0c;如何在小显存部署和使用大模型&#xff1f; 本实战专栏将评估一系列的开源模型&#xf…

处理ElementUI组件默认样式多次重复问题

问题截图&#xff1a; 解决办法&#xff1a; 在postcss.config.js文件里添加配置项&#xff1a; module.exports {plugins: {autoprefixer: {},cssnano: {} //添加这行代码}, } 处理结果&#xff1a; github issues&#xff1a; https://github.com/ElemeFE/element/is…

【LeetCode高频SQL50题-基础版】打卡第6天:第31~35题

文章目录 【LeetCode高频SQL50题-基础版】打卡第6天&#xff1a;第31~35题⛅前言员工的直属部门&#x1f512;题目&#x1f511;题解 判断三角形&#x1f512;题目&#x1f511;题解 连续出现的数字&#x1f512;题目&#x1f511;题解 指定日期的产品价格&#x1f512;题目&am…

让ChatGPT等模型学会自主思考!开创性技术“自主认知”框架

ChatGPT、百度文心一言、Bard等大语言模型展现出了超强的创造能力&#xff0c;加速了生成式AI的应用进程。但AI模型只能基于训练数据执行各种任务&#xff0c;无法像人类一样利用生活知识、过往经验用于复杂的推理和决策。 例如&#xff0c;在玩游戏时&#xff0c;人类可以利用…

01Maven的工作机制: Maven作为依赖管理工具以及Maven作为构建管理工具

Maven的特点及其应用 Maven是Apache软件基金会组织维护的一款专门为Java项目提供构建和依赖管理支持的工具 Maven作为依赖管理工具 管理jar包的规模: 随着我们使用的框架数量越来越多以及框架的封装程度也越来越高&#xff0c;项目中使用的jar包也就越来越多 Maven工程中依…

Qt QMovie和QLabel配合播放GIF表情包

文章目录 效果演示main函数创建MoviePlayer对象头文件movieplayer.h源文件movieplayer.cpp代码解释在Qt框架中,QMovie是用于处理动画和视频的类。所有源码已在本篇文章公布。 效果演示 main函数创建MoviePlayer对象 #include <QApplication>#include "movie

至强服务器BIOS/UEFI驱动开发笔记

至强服务器BIOS/UEFI驱动开发笔记 驱动开发基础Hello UEFI Driver 项目选择项目位置初始化驱动代码文件结构驱动程序入口和基本功能导入AMI工程AMI平台Hello UEFI Driver 编译问题测试结果打印设备列表继续开发`HelloWorldSupported`函数依赖配置使用脚本编译编译测试此DXE驱动…

RCNN系列网络的理解

R-CNN 作者 &#xff1a; Ross Girshick FAST R-CNN 作者 &#xff1a; Ross Girshick FASTER R-CNN 作者 &#xff1a; Jian Sun MASK R-CNN 作者 &#xff1a;kaiming he 一…

kong 和konga网关部署及使用

Kong是一款基于OpenResty&#xff08;Nginx Lua模块&#xff09;编写的高可用、易扩展的&#xff0c;由Mashape公司开源的API Gateway项目。Kong是基于NGINX和Apache Cassandra或PostgreSQL构建的&#xff0c;能提供易于使用的RESTful API来操作和配置API管理系统&#xff0c;…

使用XLua在Unity中获取lua全局变量和函数

1、Lua脚本 入口脚本 print("OK") --也会执行重定向 require("Test") 测试脚本 print("TestScript") testNum 1 testBool true testFloat 1.2 testStr "123"function testFun()print("无参无返回") endfunction te…

Android Framework通信:Handler

文章目录 前言一、Handler源码分析1、创建Handler2、发送消息3、取消息4、消息处理5、线程切换的方法&#xff08;Handler异步消息处理机制流程&#xff09;handler.sendMessage()handler.post()View.post()Activity中的runOnUiThread() 二、Handler高频面试题1、为什么要有Han…

React TreeSelect设置默认展开项的方法

需要实现TreeSelect组件的onTreeExpand、treeExpandedKeys方法。 代码样例如下&#xff1a; 1.TreeSelect标签部分 render() {const {codeselect} this.props;const {treeExpandedKeys} this.state ................<TreeSelectshowSearch{false}dropdownStyle{{ maxHei…