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>元素用于图形的绘制,区别于css,它的绘制通过javascript来完成绘制的 <canvas>标签只是图形容器,必须使用及保本来绘制图形 Canvas API主要聚焦与2D图形。同时<canvas>元素的Web…...
PMP认证考试证书领取的通知
各位考生: 2022年6月、7月、8月PMI认证考试证书领取工作已经开始,您可通过以下两种方式领取证书: 1.联系本人所在培训机构,通过培训机构向考点统一代领。 2.在2023年10月20日-10月31日内,登录本网站报名系统个人账户…...
华为云HECS云服务器docker环境下安装nacos
华为云HECS云服务器,安装docker环境,查看如下文章。 华为云HECS安装docker-CSDN博客 一、拉取镜像 docker pull nacos/nacos-server二、宿主机创建挂载目录 执行如下命令: 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,对应 student表中id的最大值s…...
Verilog基础:避免混合使用阻塞和非阻塞赋值
相关阅读 Verilog基础https://blog.csdn.net/weixin_45791458/category_12263729.html?spm1001.2014.3001.5482 “避免在一个always块中混杂阻塞赋值和非阻塞赋值”,这条原则是著名的Verilog专家Cliff Cummings在论文SUNG2000中提出的,这个观点在公众讨…...
04、MySQL-------MyCat实现分库分表
目录 九、MyCat实现分库分表1、分库分表介绍:横向(水平)拆分**垂直分表**:水平分表:**分库分表** 纵向(垂直)拆分分表字段选择 2、分库分表操作:1、分析图:2、克隆主从3、…...
开源软件-禅道Zentao
禅道Zentao 简介漏洞复现SQL注入漏洞**16.5****router.class.php SQL注入** **v18.0-v18.3****后台命令执行** 远程命令执行漏洞(RCE)后台命令执行 简介 是一款开源的项目管理软件,旨在帮助团队组织和管理他们的项目。Zentao提供了丰富的功能…...
Linux生产者消费者模型
生产者消费者模型 生产者消费者模型生产者消费者模型的概念生产者消费者模型的特点生产者消费者模型优点 基于BlockingQueue的生产者消费者模型基于阻塞队列的生产者消费者模型模拟实现基于阻塞队列的生产消费模型 生产者消费者模型 生产者消费者模型的概念 生产者消费者模式就…...
【Qt-20】Qt信号与槽
一、什么是信号和槽 信号是特定情况下被发射的事件,发射信号使用emit关键字,定义信号使用signals关键字,在signals前面不能使用public、private、protected等限定符,信号只用声明,不需也不能对其进行定义实现。另外&am…...
“智能+”时代,深维智信如何借助阿里云打造AI内容生成系统
云布道师 前言: 随着数字经济的发展,线上数字化远程销售模式越来越成为一种主流,销售流程也演变为线上视频会议、线下拜访等多种方式的结合。根据 Gartner 报告,到 2025 年 60% 的 B2B 销售组织将从基于经验和直觉的销售转变为数…...
selenium 自动化测试——WebDriver API
控制浏览器 控制浏览器窗口大小:set_window_size()方法 设置全屏模式下运行: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 实现一,任意位置填充2 实现二,填充内部3 实现三,只填充边缘,不包括四个角 前言:主要实现二维数据里面某一个数据的缺失,用缺失的近邻数据进行均值填充,可以…...
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表在被误删后,一定时间内,可以采取以下方法进行恢复: 1、先查询数据库当前时间 select to_char(sysdate,‘yyyy-mm-dd hh24:mi:ss’) from dual;2、通过当前时间往前推时间,选择想要恢复的时间点 select * from 表名…...
Vue3 + TypeScript
Vue3 TS开发环境创建 1. 创建环境 vite除了支持基础阶段的纯TS环境之外,还支持 Vue TS开发环境的快速创建, 命令如下: $ npm create vitelatest vue-ts-pro -- --template vue-ts 说明: npm create vitelatest 基于最新版本的vite进行…...
软件测试/测试开发丨南科大计算机系本科生获“火焰杯”软件测试高校就业选拔赛一等奖
2022年12月2日,计算机系党总支书记、副系主任王琦副教授在工学院南楼551会议室为19级徐驰同学颁发第二届“火焰杯”软件测试开发选拔赛一等奖奖项,为刘烨庞助理教授颁发赛事优秀指导老师奖项。徐驰同学于2022年4月获得该赛事全国总决赛第一名,…...
访问 github 问题解决方法
一、macOS版 PS. Windows 版的还没试,不过应该也差不多 1.基本信息 硬件:MacBook Pro 2017 (A1707) 系统:macOS 13.6 (Ventura) 应用:SwitchHosts 4.1.2 (Releases oldj/SwitchHosts GitHub) hosts内容网站:ht…...
供应QCA8075原装芯片
长期供应各品牌原装芯片: 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中配置代理服务器的详细教程如下: 首先,确保您已经安装了Maven。创建一个新的Maven项目。在命令行中输入以下命令: mvn archetype:generate -DgroupIdcom.example -DartifactIdmy-app -DarchetypeArtifactIdmaven-archetype-quickst…...
三维GIS开发cesium智慧地铁教程(5)Cesium相机控制
一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点: 路径验证:确保相对路径.…...
SCAU期末笔记 - 数据分析与数据挖掘题库解析
这门怎么题库答案不全啊日 来简单学一下子来 一、选择题(可多选) 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘:专注于发现数据中…...
postgresql|数据库|只读用户的创建和删除(备忘)
CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...
【SQL学习笔记1】增删改查+多表连接全解析(内附SQL免费在线练习工具)
可以使用Sqliteviz这个网站免费编写sql语句,它能够让用户直接在浏览器内练习SQL的语法,不需要安装任何软件。 链接如下: sqliteviz 注意: 在转写SQL语法时,关键字之间有一个特定的顺序,这个顺序会影响到…...
大模型多显卡多服务器并行计算方法与实践指南
一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术,以解决单机资源不足的问题。分布式训练主要分为两种模式: 数据并行:将数据分片到不同设备,每个设备拥有完整的模型副本 模型并行:将模型分割到不同设备,每个设备处理部分模型计算 现代大模型训练通常结合…...
Yolov8 目标检测蒸馏学习记录
yolov8系列模型蒸馏基本流程,代码下载:这里本人提交了一个demo:djdll/Yolov8_Distillation: Yolov8轻量化_蒸馏代码实现 在轻量化模型设计中,**知识蒸馏(Knowledge Distillation)**被广泛应用,作为提升模型…...
基于Java+MySQL实现(GUI)客户管理系统
客户资料管理系统的设计与实现 第一章 需求分析 1.1 需求总体介绍 本项目为了方便维护客户信息为了方便维护客户信息,对客户进行统一管理,可以把所有客户信息录入系统,进行维护和统计功能。可通过文件的方式保存相关录入数据,对…...
springboot整合VUE之在线教育管理系统简介
可以学习到的技能 学会常用技术栈的使用 独立开发项目 学会前端的开发流程 学会后端的开发流程 学会数据库的设计 学会前后端接口调用方式 学会多模块之间的关联 学会数据的处理 适用人群 在校学生,小白用户,想学习知识的 有点基础,想要通过项…...
【无标题】路径问题的革命性重构:基于二维拓扑收缩色动力学模型的零点隧穿理论
路径问题的革命性重构:基于二维拓扑收缩色动力学模型的零点隧穿理论 一、传统路径模型的根本缺陷 在经典正方形路径问题中(图1): mermaid graph LR A((A)) --- B((B)) B --- C((C)) C --- D((D)) D --- A A -.- C[无直接路径] B -…...
淘宝扭蛋机小程序系统开发:打造互动性强的购物平台
淘宝扭蛋机小程序系统的开发,旨在打造一个互动性强的购物平台,让用户在购物的同时,能够享受到更多的乐趣和惊喜。 淘宝扭蛋机小程序系统拥有丰富的互动功能。用户可以通过虚拟摇杆操作扭蛋机,实现旋转、抽拉等动作,增…...
