当前位置: 首页 > news >正文

canvas使用

canvas使用

1 canvas绘制基本

1 概念

HTML5<canvas>元素用于图形的绘制,区别于css,它的绘制通过javascript来完成绘制的

<canvas>标签只是图形容器,必须使用及保本来绘制图形

Canvas API主要聚焦与2D图形。同时<canvas>元素的WebGL API则用于绘制硬件加速的2D和3D图形

2 绘制矩形

<canvas id="canvas" width="200" height="200"></canvas>
<script>/* 获取画布 */var canvas = document.getElementById("canvas");/* 获取canvas上下文 getContent('2d') 可以返回一个对象,该对象提供了绘图的方法和属性 */const ctx = canvas.getContext('2d');/* 填充颜色 */ctx.fillStyle = '#ff2d51';/* 绘制矩形fillRect(x,y,width,height) x,y 分别是横轴 纵轴起点位置,width height 表示绘制的宽,高大小*/ctx.fillRect(10,10,100,100);
</script>

3 canvas中的坐标

canvas是一个二维网络

canvas的左上角坐标为(0,0)

绘制矩形fillRect(x,y,width,height) x,y 分别是横轴 纵轴起点位置,width height 表示绘制的宽,高大小

4 绘制途径

所谓的路径:就是连续的坐标点的集合

在canvas上画线,可以使用一下两种方法

  • moveTo(x,y) 定义线条开始坐标
  • lineTo(x,y) 定义线条结束坐标

绘制线条必须使用到stroke()方法,执行绘制

<canvas id="canvas" width="200" height="200"></canvas>
<script>/* 获取画布 */var canvas = document.getElementById("canvas");/* 获取canvas上下文 getContent('2d') 可以返回一个对象,该对象提供了绘图的方法和属性 */const ctx = canvas.getContext('2d');/* 绘制路径 */ctx.moveTo(0,0)ctx.lineTo(100,100)/* 填充颜色 */ctx.strokeStyle = '#ff2d51';ctx.stroke();
</script>

5 绘制圆

<canvas id="canvas" width="200" height="200"></canvas>
<script>/* 获取画布 */var canvas = document.getElementById("canvas");/* 获取canvas上下文 getContent('2d') 可以返回一个对象,该对象提供了绘图的方法和属性 */const ctx = canvas.getContext('2d');/* 绘制路径 */ctx.beginPath()/* arc(x,y,radius,startAngle,endAngle) 2*Math.PI=圆的周长 */ctx.arc(100,100,50,0,Math.PI*2)ctx.closePath()/* 填充颜色 */ctx.fillStyle = '#ff2d51';ctx.fill();/* 边颜色 */ctx.strokeStyle = '#333';/* 边宽 */ctx.lineWidth = 5;ctx.stroke();
</script>
1 绘制多个圆
<canvas id="canvas" width="400" height="400"></canvas>
<script>/* 获取画布 */var canvas = document.getElementById("canvas");/* 获取canvas上下文 getContent('2d') 可以返回一个对象,该对象提供了绘图的方法和属性 */const ctx = canvas.getContext('2d');/* 绘制路径 */ctx.beginPath()/* arc(x,y,radius,startAngle,endAngle) 2*Math.PI=圆的周长 */ctx.arc(200,200,100,0,Math.PI*2)ctx.closePath()/* 填充颜色 */ctx.fillStyle = '#ff2d51';ctx.fill();// 后绘制 覆盖先绘制的ctx.beginPath()/* arc(x,y,radius,startAngle,endAngle) 2*Math.PI=圆的周长 */ctx.arc(200,200,50,0,Math.PI*2)ctx.closePath()/* 填充颜色 */ctx.fillStyle = '#333';ctx.fill();ctx.stroke();
</script>
2 绘制动画的圆
<canvas id="canvas" width="400" height="400"></canvas>
<script>/* 获取画布 */var canvas = document.getElementById("canvas");/* 获取canvas上下文 getContent('2d') 可以返回一个对象,该对象提供了绘图的方法和属性 */const ctx = canvas.getContext('2d');var increateFlag = true;var radius = 50function draw(){/* 清除指定矩形内的形状 */ctx.clearRect(0,0,canvas.width,canvas.height)/* 绘制路径 */ctx.beginPath()/* arc(x,y,radius,startAngle,endAngle) 2*Math.PI=圆的周长 */ctx.arc(200,200,radius,0,Math.PI*2)ctx.closePath()/* 填充颜色 */ctx.fillStyle = '#ff2d51';ctx.fill();ctx.stroke();if(radius > 100){increateFlag = false;}else if(radius < 50){increateFlag = true;}if(increateFlag){radius++;}else{radius--;}}// draw();setInterval(draw,20);
</script>
3 绘制多圈动画
<canvas id="canvas" width="400" height="400"></canvas><script>/* 获取画布 */var canvas = document.getElementById("canvas");/* 获取canvas上下文 getContent('2d') 可以返回一个对象,该对象提供了绘图的方法和属性 */const ctx = canvas.getContext('2d');var increateFlag = true;var radius = 50function draw(){/* 清除指定矩形内的形状 */ctx.clearRect(0,0,canvas.width,canvas.height)/* 绘制路径 */ctx.beginPath()/* arc(x,y,radius,startAngle,endAngle) 2*Math.PI=圆的周长 */ctx.arc(200,200,radius,0,Math.PI*2)ctx.closePath()/* 填充颜色 */ctx.fillStyle = '#ff2d51';ctx.fill();// 后绘制 覆盖先绘制的/* 绘制路径 */ctx.beginPath()/* arc(x,y,radius,startAngle,endAngle) 2*Math.PI=圆的周长 */ctx.arc(200,200,25,0,Math.PI*2)ctx.closePath()/* 填充颜色 */ctx.fillStyle = 'blue';ctx.fill();ctx.stroke();if(radius > 100){increateFlag = false;}else if(radius < 50){increateFlag = true;}if(increateFlag){radius++;}else{radius--;}}// draw();setInterval(draw,20);</script>

相关文章:

canvas使用

canvas使用 1 canvas绘制基本 1 概念 HTML5<canvas>元素用于图形的绘制&#xff0c;区别于css,它的绘制通过javascript来完成绘制的 <canvas>标签只是图形容器&#xff0c;必须使用及保本来绘制图形 Canvas API主要聚焦与2D图形。同时<canvas>元素的Web…...

PMP认证考试证书领取的通知

各位考生&#xff1a; 2022年6月、7月、8月PMI认证考试证书领取工作已经开始&#xff0c;您可通过以下两种方式领取证书&#xff1a; 1.联系本人所在培训机构&#xff0c;通过培训机构向考点统一代领。 2.在2023年10月20日-10月31日内&#xff0c;登录本网站报名系统个人账户…...

华为云HECS云服务器docker环境下安装nacos

华为云HECS云服务器&#xff0c;安装docker环境&#xff0c;查看如下文章。 华为云HECS安装docker-CSDN博客 一、拉取镜像 docker pull nacos/nacos-server二、宿主机创建挂载目录 执行如下命令&#xff1a; mkdir -p /usr/local/nacos/logs mkdir -p /usr/local/nacos/con…...

Oracle数据库修改序列,Oracle中的主键值和序列中的值对应不上时的处理方式

select max(stu.id) maxid from student stu; //查询student表中id的最大值select XXX_SEQ.nextval from dual; //查询student表中id对应序列XXX_SEQ的下一个值alter sequence XXX_SEQ increment by 1000; //将序列XXX_SEQ步长改为1000&#xff0c;对应 student表中id的最大值s…...

Verilog基础:避免混合使用阻塞和非阻塞赋值

相关阅读 Verilog基础https://blog.csdn.net/weixin_45791458/category_12263729.html?spm1001.2014.3001.5482 “避免在一个always块中混杂阻塞赋值和非阻塞赋值”&#xff0c;这条原则是著名的Verilog专家Cliff Cummings在论文SUNG2000中提出的&#xff0c;这个观点在公众讨…...

04、MySQL-------MyCat实现分库分表

目录 九、MyCat实现分库分表1、分库分表介绍&#xff1a;横向&#xff08;水平&#xff09;拆分**垂直分表**&#xff1a;水平分表&#xff1a;**分库分表** 纵向&#xff08;垂直&#xff09;拆分分表字段选择 2、分库分表操作&#xff1a;1、分析图&#xff1a;2、克隆主从3、…...

开源软件-禅道Zentao

禅道Zentao 简介漏洞复现SQL注入漏洞**16.5****router.class.php SQL注入** **v18.0-v18.3****后台命令执行** 远程命令执行漏洞&#xff08;RCE&#xff09;后台命令执行 简介 是一款开源的项目管理软件&#xff0c;旨在帮助团队组织和管理他们的项目。Zentao提供了丰富的功能…...

Linux生产者消费者模型

生产者消费者模型 生产者消费者模型生产者消费者模型的概念生产者消费者模型的特点生产者消费者模型优点 基于BlockingQueue的生产者消费者模型基于阻塞队列的生产者消费者模型模拟实现基于阻塞队列的生产消费模型 生产者消费者模型 生产者消费者模型的概念 生产者消费者模式就…...

【Qt-20】Qt信号与槽

一、什么是信号和槽 信号是特定情况下被发射的事件&#xff0c;发射信号使用emit关键字&#xff0c;定义信号使用signals关键字&#xff0c;在signals前面不能使用public、private、protected等限定符&#xff0c;信号只用声明&#xff0c;不需也不能对其进行定义实现。另外&am…...

“智能+”时代,深维智信如何借助阿里云打造AI内容生成系统

云布道师 前言&#xff1a; 随着数字经济的发展&#xff0c;线上数字化远程销售模式越来越成为一种主流&#xff0c;销售流程也演变为线上视频会议、线下拜访等多种方式的结合。根据 Gartner 报告&#xff0c;到 2025 年 60% 的 B2B 销售组织将从基于经验和直觉的销售转变为数…...

selenium 自动化测试——WebDriver API

控制浏览器 控制浏览器窗口大小&#xff1a;set_window_size()方法 设置全屏模式下运行&#xff1a;maximize_window()方法 from selenium import webdriver from selenium.webdriver.common.by import By import timedriver webdriver.Chrome() driver.get("http://w…...

【实战】学习 Electron:构建跨平台桌面应用

文章目录 一、Electron 简介二、Electron 的优势1. 学习曲线平缓2. 丰富的生态系统3. 跨平台支持4. 开源和社区支持 三、Electron 的使用1. 安装 Node.js2. 安装 Electron3. 创建项目4. 初始化项目5. 安装依赖6. 创建主进程文件7. 创建渲染进程文件8. 打包应用程序9. 运行应用程…...

Python开发之二维数组空缺值的近邻填充

Python开发之二维数组空缺值的填充 1 实现一&#xff0c;任意位置填充2 实现二&#xff0c;填充内部3 实现三&#xff0c;只填充边缘&#xff0c;不包括四个角 前言&#xff1a;主要实现二维数据里面某一个数据的缺失&#xff0c;用缺失的近邻数据进行均值填充&#xff0c;可以…...

vue使用pdf 导出当前页面,(jspdf, html2canvas )

需要安装两个插件 npm install html2canvas jspdfyarn add html2canvas jspdf<div class"app-container" id"pdfPage"><!--这个放你需要导出的内容--> </div><el-button size"mini" click"onExportPdf">导出…...

【oracle删除表 回滚操作】

oracle数据回滚 oracle表在被误删后&#xff0c;一定时间内&#xff0c;可以采取以下方法进行恢复: 1、先查询数据库当前时间 select to_char(sysdate,‘yyyy-mm-dd hh24:mi:ss’) from dual;2、通过当前时间往前推时间&#xff0c;选择想要恢复的时间点 select * from 表名…...

Vue3 + TypeScript

Vue3 TS开发环境创建 1. 创建环境 vite除了支持基础阶段的纯TS环境之外&#xff0c;还支持 Vue TS开发环境的快速创建, 命令如下&#xff1a; $ npm create vitelatest vue-ts-pro -- --template vue-ts 说明&#xff1a; npm create vitelatest 基于最新版本的vite进行…...

软件测试/测试开发丨南科大计算机系本科生获“火焰杯”软件测试高校就业选拔赛一等奖

2022年12月2日&#xff0c;计算机系党总支书记、副系主任王琦副教授在工学院南楼551会议室为19级徐驰同学颁发第二届“火焰杯”软件测试开发选拔赛一等奖奖项&#xff0c;为刘烨庞助理教授颁发赛事优秀指导老师奖项。徐驰同学于2022年4月获得该赛事全国总决赛第一名&#xff0c…...

访问 github 问题解决方法

一、macOS版 PS. Windows 版的还没试&#xff0c;不过应该也差不多 1.基本信息 硬件&#xff1a;MacBook Pro 2017 (A1707) 系统&#xff1a;macOS 13.6 (Ventura) 应用&#xff1a;SwitchHosts 4.1.2 (Releases oldj/SwitchHosts GitHub) hosts内容网站&#xff1a;ht…...

供应QCA8075原装芯片

长期供应各品牌原装芯片&#xff1a; SST39VF040-70-4I-NH AR9344 DC3A BGA USB2422 QFN24 W9751G6KB-251 RTL8211EG-VB-CG HI3535-RBCV100 MX25L25635FMI-10G USB2240I-AEZG EM620FV8BS-70LF HXI15H4G160AF-13K 1PQ8064/BGA-519 USB4604I-1080HN SCB15H2G160A…...

在Maven中配置代理服务器的详细教程

在Maven中配置代理服务器的详细教程如下&#xff1a; 首先&#xff0c;确保您已经安装了Maven。创建一个新的Maven项目。在命令行中输入以下命令&#xff1a; mvn archetype:generate -DgroupIdcom.example -DartifactIdmy-app -DarchetypeArtifactIdmaven-archetype-quickst…...

后进先出(LIFO)详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

AI-调查研究-01-正念冥想有用吗?对健康的影响及科学指南

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动&#xff08;如演唱会、马拉松赛事、高考中考等&#xff09;期间&#xff0c;城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例&#xff0c;暖城商圈曾因观众集中离场导致周边…...

基于Flask实现的医疗保险欺诈识别监测模型

基于Flask实现的医疗保险欺诈识别监测模型 项目截图 项目简介 社会医疗保险是国家通过立法形式强制实施&#xff0c;由雇主和个人按一定比例缴纳保险费&#xff0c;建立社会医疗保险基金&#xff0c;支付雇员医疗费用的一种医疗保险制度&#xff0c; 它是促进社会文明和进步的…...

2024年赣州旅游投资集团社会招聘笔试真

2024年赣州旅游投资集团社会招聘笔试真 题 ( 满 分 1 0 0 分 时 间 1 2 0 分 钟 ) 一、单选题(每题只有一个正确答案,答错、不答或多答均不得分) 1.纪要的特点不包括()。 A.概括重点 B.指导传达 C. 客观纪实 D.有言必录 【答案】: D 2.1864年,()预言了电磁波的存在,并指出…...

汽车生产虚拟实训中的技能提升与生产优化​

在制造业蓬勃发展的大背景下&#xff0c;虚拟教学实训宛如一颗璀璨的新星&#xff0c;正发挥着不可或缺且日益凸显的关键作用&#xff0c;源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例&#xff0c;汽车生产线上各类…...

第一篇:Agent2Agent (A2A) 协议——协作式人工智能的黎明

AI 领域的快速发展正在催生一个新时代&#xff0c;智能代理&#xff08;agents&#xff09;不再是孤立的个体&#xff0c;而是能够像一个数字团队一样协作。然而&#xff0c;当前 AI 生态系统的碎片化阻碍了这一愿景的实现&#xff0c;导致了“AI 巴别塔问题”——不同代理之间…...

成都鼎讯硬核科技!雷达目标与干扰模拟器,以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...

在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用

1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...

大学生职业发展与就业创业指导教学评价

这里是引用 作为软工2203/2204班的学生&#xff0c;我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要&#xff0c;而您认真负责的教学态度&#xff0c;让课程的每一部分都充满了实用价值。 尤其让我…...