canvas绘制美队盾牌

news/2024/2/29 15:42:10/文章来源:https://blog.csdn.net/cuclife/article/details/135638407

在这里插入图片描述

查看专栏目录

canvas示例教程100+专栏,提供canvas的基础知识,高级动画,相关应用扩展等信息。canvas作为html的一部分,是图像图标地图可视化的一个重要的基础,学好了canvas,在其他的一些应用上将会起到非常重要的帮助。

文章目录

    • 语法:
    • 示例效果图
    • 示例源代码(共90行)
    • canvas基本属性
    • canvas基础方法

如何使用canvas截取视频图像呢?这里其实是监听了video的内容,将video的当前图像在canvas上面显示出来。

语法:

drawImage(image, dx, dy)
drawImage(image, dx, dy, dWidth, dHeight)
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
参数图示
在这里插入图片描述
怎样使用canvas绘制美队盾牌呢?这里面要绘制四个不同大小的同心圆,同时在中间位置绘制一个五角星。

示例效果图

在这里插入图片描述

示例源代码(共90行)

<canvas class="mycanvas" width="500" height="500">你的浏览器不支持canvas</canvas><script type="text/javascript">let mycanvas = document.querySelector('.mycanvas');let c = mycanvas.getContext('2d');//为了防止样式覆盖,从外往里画//画一个大圆c.beginPath();c.arc(, , , , Math.PI * );c.fillStyle = "#e0dedf";c.fill();c.lineWidth = ;c.strokeStyle = 'rgb(196,30,58)';c.stroke();//画一个小圆c.beginPath();c.arc(, , , , Math.PI * );c.fillStyle = "rgb(0,43,127)";c.fill();c.lineWidth = ;c.strokeStyle = 'rgb(196,30,58)';c.stroke();//画五角星c.beginPath();for(let i = ; i <5 ; i++) {c.lineTo(Math.cos(( + i * ) /  * Math.PI) *  + , -Math.sin(( + i * ) /  * Math.PI) *  + );c.lineTo(Math.cos(( + i * ) /  * Math.PI) *  + , -Math.sin(( + i * ) /  * Math.PI) *  + );}c.closePath();c.fillStyle = "#e0dedf";c.fill();c.lineWidth = ;c.strokeStyle = 'rgb(0,43,127)';c.stroke();

canvas基本属性

属性属性属性
canvasfillStylefilter
fontglobalAlphaglobalCompositeOperation
heightlineCaplineDashOffset
lineJoinlineWidthmiterLimit
shadowBlurshadowColorshadowOffsetX
shadowOffsetYstrokeStyletextAlign
textBaselinewidth

canvas基础方法

方法方法方法
arc()arcTo()addColorStop()
beginPath()bezierCurveTo()clearRect()
clip()close()closePath()
createImageData()createLinearGradient()createPattern()
createRadialGradient()drawFocusIfNeeded()drawImage()
ellipse()fill()fillRect()
fillText()getImageData()getLineDash()
isPointInPath()isPointInStroke()lineTo()
measureText()moveTo()putImageData()
quadraticCurveTo()rect()restore()
rotate()save()scale()
setLineDash()setTransform()stroke()
strokeRect()strokeText()transform()
translate()

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

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

相关文章

STC8H8K蓝牙智能巡线小车——1. 环境搭建(基于RTX51操作系统)

1. 基本介绍 开发环境准备&#xff1a;Keil uVision5 烧录软件&#xff1a;STC-ISP&#xff08;V6.92A&#xff09; 芯片&#xff1a; STC8H8K64U-45I-LQFP64 芯片引脚&#xff1a; 2.创建项目 打开Keil&#xff0c;点击【Project】&#xff0c;选择【new uVersion proje…

快乐学Python,如何使用爬虫从网页中提取感兴趣的内容?

前面的内容&#xff0c;我们了解了使用urllib3和selenium来下载网页&#xff0c;但下载下来的是整个网页的内容&#xff0c;那我们又怎么从下载下来的网页中提取我们自己感兴趣的内容呢&#xff1f;这里就需要Python的另一个库来实现-BeautifulSoup。 BeautifulSoup 是一个 Py…

数据仓库(2)-认识数仓

1、数据仓库是什么 数据仓库 &#xff0c;由数据仓库之父比尔恩门&#xff08;Bill Inmon&#xff09;于1990年提出&#xff0c;主要功能仍是将组织透过资讯系统之联机事务处理(OLTP)经年累月所累积的大量资料&#xff0c;透过数据仓库理论所特有的资料储存架构&#xff0c;做…

可以在微信群里使用midjourney,gpt4,gemini,文心一言4.0,且免费

免费使用gpt4和midjourney 免费使用 参考链接&#xff1a; https://chat.xutongbao.top/

【银行测试】银行项目,信用卡业务测试+常问面试(三)

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 银行测试-信用卡业…

轻松识别Midjourney等AI生成图片,开源GenImage

AIGC时代&#xff0c;人人都可以使用Midjourney、Stable Diffusion等AI产品生成高质量图片&#xff0c;其逼真程度肉眼难以区分真假。这种虚假照片有时会对社会产生不良影响&#xff0c;例如&#xff0c;生成公众人物不雅图片用于散播谣言&#xff1b;合成虚假图片用于金融欺诈…

Angular系列教程之DOM操作

文章目录 引言1. ElementRef2. Renderer23. ViewChild结论 引言 在Angular中&#xff0c;DOM操作是开发Web应用程序的一个重要方面。通过对DOM进行操作&#xff0c;我们可以动态地修改页面内容、样式和元素行为。本文将详细介绍如何在Angular中进行DOM操作&#xff0c;并提供相…

从数据可视化到场景渲染:山海鲸的创新与实践

作为山海鲸的开发者&#xff0c;我们深知可视化模型场景渲染在数据分析和决策支持中的重要作用。因此在保证山海鲸可视化软件免费编辑、分享、部署的同时也在场景渲染方面不断优化&#xff0c;本文将介绍山海鲸在可视化模型场景渲染方面的技术革新与实践探索。 首先&#xff0…

【STM32】STM32学习笔记-USART串口数据包(28)

00. 目录 文章目录 00. 目录01. 串口简介02. HEX数据包03. 文本数据包04. HEX数据包接收05. 文本数据包接收06. 预留07. 附录 01. 串口简介 串口通讯(Serial Communication)是一种设备间非常常用的串行通讯方式&#xff0c;因为它简单便捷&#xff0c;因此大部分电子设备都支持…

Go并发快速入门:Goroutine

Go并发&#xff1a;Goroutine 1.并发基础概念&#xff1a;进程、线程、协程 (1) 进程 可以比作食材加工的一系列动作 进程就是程序在操作系统中的一次执行过程&#xff0c;是由系统进行资源分配和调度的基本单位&#xff0c;进程是一个动态概念&#xff0c;是程序在执行过程…

unity面试题

一&#xff1a;什么是协同程序&#xff1f; 在主线程运行的同时开启另一段逻辑处理&#xff0c;来协助当前程序的执行&#xff0c;协程很像多线程&#xff0c;但是不是多线程&#xff0c;Unity的协程实在每帧结束之后去检测yield的条件是否满足。 二&#xff1a;Unity3d中的碰…

汽车线束的汽配企业MES管理系统解决方案

随着科技的飞速发展和环保需求的日益提升&#xff0c;新能源汽车在全球范围内崭露头角&#xff0c;成为未来出行的主导力量。在这股浪潮中&#xff0c;中国凭借其强大的研发实力和市场敏锐度&#xff0c;迅速崛起为新能源汽车领域的佼佼者。而作为汽车数字化控制与智能化应用的…

Excel地址

解题思路&#xff1a; 根据题中歪歪和笨笨的话可以有两种解法。 1.输入的数为多大&#xff0c;则循环1多少次&#xff0c;当值为27时就要进行进位操作。这时要分情况讨论。 当集合中元素为一个时&#xff0c;如26&#xff0c;则需要变为1 1&#xff0c;集合元素个数加一。 当…

Maven 依赖传递和冲突、继承和聚合

一、依赖传递和冲突 1.1 Maven 依赖传递特性 1.1.1 概念 假如有三个 Maven 项目 A、B 和 C&#xff0c;其中项目 A 依赖 B&#xff0c;项目 B 依赖 C。那么我们可以说 A 依赖 C。也就是说&#xff0c;依赖的关系为&#xff1a;A—>B—>C&#xff0c; 那么我们执行项目 …

IC验证——perl脚本ccode_standard——c代码寄存器配置标准化

目录 1 脚本名称 2 脚本路径 3 脚本参数说明 4 脚本操作说明 5 脚本代码 1 脚本名称 ccode_standard 2 脚本路径 /scripts/bin/ccode_standard 3 脚本参数说明 次序 参数名 说明 1 address (./rfdig&#xff1b;.&#xff1b;..&#xff1b;./boot) 指定脚本执行路…

ES高级查询

ES中提供了一种强大的检索数据方式&#xff0c;这种检索方式称为Query DSL&#xff0c;这种方式的丰富查询语法让ES检索变得更强大&#xff0c;更简洁。 1.常见查询 1.1查询所有[match_all] match_all关键字&#xff1a;返回索引中的全部文档。 GET /products/_search { &…

Redis-redis.conf配置文件中的RDB与AOF持久化方式的详解与区别

RDB&#xff08;Redis Database&#xff09; RDB是Redis的默认持久化方式&#xff0c;它将内存中的数据以二进制格式写入磁盘&#xff0c;形成一个快照。RDB持久化有以下几个重要的配置选项&#xff1a; save&#xff1a;指定了保存RDB的策略&#xff0c;默认的配置是每900秒&…

域名群站开源系统分享开源域名授权系统

一、需要自己安装PHP和MYSQL服务器环境。 二、务必设置伪静态规则&#xff0c;否则将无法访问文章栏目页面。 三、启用伪静态功能&#xff0c;请在站点设置中选择使用thinkphp的伪静态规则。 四、在域名的根目录下找到”data/config.php”文件&#xff0c;填入数据库的账号和…

使用WAF防御网络上的隐蔽威胁之CSRF攻击

在网络安全领域&#xff0c;除了常见的XSS&#xff08;跨站脚本&#xff09;攻击外&#xff0c;CSRF&#xff08;跨站请求伪造&#xff09;攻击也是一种常见且危险的威胁。这种攻击利用用户已经验证的身份在没有用户知情的情况下&#xff0c;执行非授权的操作。了解CSRF攻击的机…

无需主网结算来进行 BTC 交易?Tectum 提出了新的解决方案

撰文&#xff1a;Tom&#xff0c;CryptoBooster 下载TechubNews APP&#xff0c;探索Web3的无限可能&#xff01;掌握最新动态&#xff0c;发现更多相关资讯&#xff0c;与行业领袖共同探索未来趋势。立即下载&#xff0c;开启您的Web3之旅&#xff01; 区块链发展至今&#x…