canvas绘制美国国旗(USA Flag)

在这里插入图片描述

查看专栏目录

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

文章目录

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

如何使用canvas绘制绘制美国国旗呢?思路很简单,绘制矩形,绘制五角星,上下做一个布局就可以了。美国国旗的形状是长方形;国旗的长宽之比为19:10,由红、白、蓝三色组成;画面格局由两部分组成,旗的左上方蓝底上排列着50颗白色的星,6颗一排与5颗一排相间排列,共排9行;旗的其余部分是13道红白相间的条子,有7道红色横条以及6道白色横条。

示例效果图

在这里插入图片描述

示例源代码(共88行)

/*
* @Author: 大剑师兰特(xiaozhuanlan),还是大剑师兰特(CSDN)
* @此源代码版权归大剑师兰特所有,可供学习或商业项目中借鉴,未经授权,不得重复地发表到博客、论坛,问答,git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2024-01-24
*/
<template><div class="djs_container"><div class="top"><h3>canvas绘制美国国旗</h3><div>大剑师兰特, 还是大剑师兰特,gis-dajianshi</div><h4><el-button type="primary" size="mini" @click="draw()">绘制</el-button><el-button type="danger" size="mini" @click="clearCanvas()">清除</el-button></h4></div><div class="dajianshi "><canvas id="dajianshi" ref="mycanvas" width="980" height="490"></canvas></div></div>
</template>
<script>export default {data() {return {ctx: null,canvas: null,}},mounted() {this.setCanvas()},methods: {clearCanvas() {this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);},setCanvas() {this.canvas = document.getElementById('dajianshi');if (!this.canvas.getContext) return;this.ctx = this.canvas.getContext("2d");},draw() {// 美国国旗: 长宽 494*260 ;蓝色 198*140 ,从200*100处开始绘制// 绘制7个红条 for (let i = 0; i < 7; i++) {let y = 100 + 40 * i;this.drawRect(this.ctx, 200, y, 494, 20, '#B31942');}// 绘制6个白条for (let i = 0; i < 6; i++) {let y = 120 + 40 * i;this.drawRect(this.ctx, 200, y, 494, 20, 'white');}// 绘制蓝底this.drawRect(this.ctx, 200, 100, 198, 140, '#0B3162');// 绘制50个星星	- 6个一行for (let j = 0; j < 5; j++) {let y = 120 + j * 26;for (let i = 0; i < 6; i++) {let x = 220 + 32 * i;this.drawStar(this.ctx, x, y, 8, 3, 0, 'white', 'transparent');}}// 绘制50个星星	- 5个一行for (let j = 0; j < 4; j++) {let y = 136 + j * 24;for (let i = 0; i < 5; i++) {let x = 236 + 32 * i;this.drawStar(this.ctx, x, y, 8, 3, 0, 'white', 'transparent');}}},drawRect(ctx, x, y, w, h, fillColor) {ctx.beginPath();ctx.fillStyle = fillColor;ctx.fillRect(x, y, w, h);},drawStar(ctx, x, y, R, r, angle, fillColor, strokeColor) { //中心点x,中心点y,大半径R,小半径r,旋转角度anglectx.beginPath();for (var i = 0; i < 5; i++) {ctx.lineTo(Math.cos((18 + i * 72 - angle) / 180 * Math.PI) * R + x, -Math.sin((18 + i * 72 - angle) /180 * Math.PI) * R + y);ctx.lineTo(Math.cos((54 + i * 72 - angle) / 180 * Math.PI) * r + x, -Math.sin((54 + i * 72 - angle) /180 * Math.PI) * r + y);}ctx.closePath();ctx.fillStyle = fillColor;ctx.strokeStyle = strokeColor;ctx.lineWidth = 3;ctx.lineJoin = "round";ctx.fill();ctx.stroke();}}}
</script>
<style scoped>.djs_container {width: 1000px;height: 680px;margin: 50px auto;border: 1px solid #991188;position: relative;}.top {margin: 0 auto 0px;padding: 10px 0;background: #991188;color: #fff;}.dajianshi {margin: 5px auto 0;border: 1px solid #ccc;width: 980px;height: 490px;background-color: #eee;}
</style>

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.mzph.cn/news/643502.shtml

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

相关文章

8 容器化微服务

文章目录 DockerSpring Boot和Buildpacks在Docker中运行系统Docker化微服务Docker化前端Docker化配置导入器Docker Compose使用Docker扩展系统共享Docker镜像小结 前面的文章&#xff1a; 1、1 一个测试驱动的Spring Boot应用程序开发 2、2 使用React构造前端应用 3、3 试驱动的…

通信入门系列——复变函数

本节目录 一、复变函数 1、复数 2、复数的四则运算 二、复指数函数 三、欧拉公式本节内容 一、复变函数 1、复数 复数单位i&#xff0c;也就是满足i^2-1&#xff0c;将zxiy表示为复数z&#xff0c;x和y为任意的实数&#xff0c;称为复数z的实部和虚部。由复数zxiy对应的点(x,y…

虚拟歌姬学习:DiffSinger,让GitHub下载快的方法!

《三分钟上手DiffSinger》系列 ——基础篇https://www.bilibili.com/video/BV1ug4y1S7Dk/?spm_id_from333.337.search-card.all.click&vd_source124076d7d88eee393a1d8bf6fc787efa 下载DiffSinger 建议用edge浏览器还有steam&#xff0c;有时只是慢&#xff0c;但是还是…

# 安徽锐锋科技IDMS系统简介

IDMS 由安徽锐锋科技独立开发 该系统负责和海算以及UE\UNITY的无缝衔接并具备远程数据库访问、高速数据库的自动创建及数据存储、支持MQTT等多种物联网接口&#xff0c;支持多种算法。主要完成由于物料、人员、生产、故障、不良异常、订单异常带来的生产损失&#xff0c;通过海…

macOS跨进程通信: TCP Socket 创建实例

macOS跨进程通信: TCP Socket 创建实例 一&#xff1a; 简介 Socket 是 网络传输的抽象概念。 一般我们常用的有Tcp Socket和 UDP Scoket&#xff0c; 和类Unix 系统&#xff08;包括Mac&#xff09;独有的 Unix Domain Socket&#xff08;UDS&#xff09;。 Tcp Socket 能够…

web安全学习笔记【05】——反弹Shell、正反向连接

思维导图 #知识点&#xff1a; 1、Web常规-系统&中间件&数据库&源码等 2、Web其他-前后端&软件&Docker&分配站等 3、Web拓展-CDN&WAF&OSS&反向&负载均衡等 ----------------------------------- 1、APP架构-封装&原生态&H5&am…

解决TCP粘包问题

粘包问题已经在上一篇博客中写到具体可以看----------- 以下是利用分包解决粘包问题的步骤&#xff1a; 消息长度前缀&#xff1a; 在每个数据包前加入消息长度信息。 定义协议格式&#xff1a; 明确定义通信协议的格式&#xff0c;包括消息头和消息体。 封包&#xff1a; 将…

Java研学-代理模式

一 概述 1 分类 静态代理&#xff1a;在程序运行前就已经存在代理类的字节码文件&#xff0c;代理对象和真实对象的关系在运行前就确定了。&#xff08;代理类及对象要自行创建&#xff09;   动态代理&#xff1a;代理类是在程序运行期间由 JVM 通过反射等机制动态的生成的…

电脑数据恢复软件哪个有效好用?十大电脑数据恢复软件排行

在数字时代&#xff0c;数据就是一切。从珍贵的家庭照片和重要的工作文档到最喜欢的音乐和电影&#xff0c;我们的生活越来越多地存储在各种设备上。系统崩溃、意外删除或恶意病毒都可能使您的宝贵数据瞬间消失。这就是数据恢复工具的用武之地。 十大电脑数据恢复软件排行 这些…

Integer.valueOf方法详解

Integer.valueOf 是 Java 中 Integer 类的一个静态方法&#xff0c;它用于将给定的字符串或基本数据类型转换成一个 Integer 对象。 使用场景 从字符串转换&#xff1a;将字符串形式的数字转换为 Integer 对象。 Integer num Integer.valueOf("123");从基本数据类…

论文阅读2---多线激光lidar内参标定原理

前言&#xff1a;该论文介绍多线激光lidar的标定内参的原理&#xff0c;有兴趣的&#xff0c;可研读原论文。 1、标定参数 rotCorrection&#xff1a;旋转修正角&#xff0c;每束激光的方位角偏移&#xff08;与当前旋转角度的偏移&#xff0c;正值表示激光束逆时针旋转&…

关于一个QT程序的简单破解思路(不需要分析信号和槽的方法,通用所有程序的破解思路)

几年前,公司买了台国产贴片机,里面的主程序是QT编写,运行在WINDOW XP系统上。主程序打开的界面,如图: 我来简单介绍下程序界面,各位读者不需要搞明白功能,只要知道大体的流程即可。 分析主界面: 一、左边的列表&#xff1a; 贴片生产文件,里面包括了贴片时元器件的坐标、飞达…

C#winform上位机开发学习笔记11-串口助手接收数据用波形显示功能添加

1.功能描述 接收串口数据&#xff0c;并将收到的十六进制数据用坐标系的方式将数据波形展示出来 2.代码部分 步骤1&#xff1a;定义链表&#xff0c;用于数据保存 //数据结构-线性链表private List<byte> DataList new List<byte>(); 步骤2&#xff1a;定义波…

shell脚本2

在自定义变量当中&#xff0c;不可以以数字开头 变量追加值 在变量名后要写的东西 read -p &#xff1a;交互式输入变量值&#xff0c;然后使用变量 自定义变量 export 全局变量 如果想要bash里面的所有进程都能看见变量&#xff0c;加入export 父进程 子进程…

计算机毕业设计 基于SpringBoot的民宿租赁系统的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…

Sentinel 新版本发布,提升配置灵活性以及可观测配套

作者&#xff1a;屿山 基本介绍 Sentinel 是阿里巴巴集团开源的&#xff0c;面向分布式、多语言异构化服务架构的流量治理组件&#xff0c;承接了阿里巴巴近 15 年的双十一大促流量的核心场景&#xff0c;例如秒杀、冷启动、消息削峰填谷、集群流量控制、实时熔断下游不可用服…

考研C语言刷题基础篇之分支循环结构基础(二)

目录 第一题分数求和 第二题&#xff1a;求10 个整数中最大值 第三题&#xff1a;在屏幕上输出9*9乘法口诀表 第四题&#xff1a;写一个代码&#xff1a;打印100~200之间的素数 第五题&#xff1a;求斐波那契数的第N个数 斐波那契数的概念&#xff1a;前两个数相加等于第三…

2023 工业 AR 关键词:纵深和开拓

2023 年&#xff0c;以虚实融合、工业元宇宙为代表的“新数字化”升级在工业制造领域达成共识。 ▲五部委联合印发元宇宙行动计划 通过发展元宇宙赋能新型工业化 而相对过去几年的行业渗透广、落地场景多样的 AR 业务拓展与合作&#xff0c;#纵深和#开拓&#xff0c;成为 2023…

80端口被占用解决思路

普及一个概念&#xff1a;80端口是 HTTP&#xff08;HyperText Transport Protocol)即超文本传输协议开放的&#xff0c;此为上网冲浪使用次数最多的协议&#xff0c;主要用于WWW&#xff08;World Wide Web&#xff09;即万维网传输信息的协议。 我们使用 http 域名访问时都会…

Vue3 ref与reactive

✨ 专栏介绍 在当今Web开发领域中&#xff0c;构建交互性强、可复用且易于维护的用户界面是至关重要的。而Vue.js作为一款现代化且流行的JavaScript框架&#xff0c;正是为了满足这些需求而诞生。它采用了MVVM架构模式&#xff0c;并通过数据驱动和组件化的方式&#xff0c;使…