canvas绘制图形

目录

1、canvas绘制矩形

2、canvas绘制线

3、canvas绘制圆

4、canvas绘制多圈动画圆


HTML5<canvas>元素用于图形的绘制,Canvas API主要聚焦于2D图形。

1、canvas绘制矩形

canvas是一个二维网格,左上角坐标为(0,0),横轴为x轴,纵轴为y轴。

<!-- 设置canvas元素 -->
<canvas id = "canvas" width="200" height="200"></canvas>...// 获取canvas元素
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// 执行绘制,fillRect(x,y,width,height)
ctx.fillRect(10,10,100,200);
ctx.fillstyle = "#333";

2、canvas绘制线

moveTo(x,y)定义线条开始坐标;

lineTo(x,y)定义线条结束坐标。

<!-- 设置canvas元素 -->
<canvas id = "canvas" width="200" height="200"></canvas>...// 获取canvas元素
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.moveTo(10,20);
ctx.lineTo(400,500);
ctx.strokeStyle = "##ff2d51";
ctx.stroke();

3、canvas绘制圆

arc(x,y,r,startAngle,endAngle,anticlockwise):以(x,y)为圆心,r为半径,从startAngle弧度开始到endAngle弧度结束,anticlockwise为布尔值,true表示逆时针,false表示顺时针。

<!-- 设置canvas元素 -->
<canvas id = "canvas" width="200" height="200"></canvas>...// 获取canvas元素
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(150,150,100,0,Math.PI*2);
ctx.closePath();
// 填充颜色
ctx.fillStyle = "#333";
ctx.fill();
// 描边颜色
ctx.strokeStyle = "#ff2d51";
// 描边宽度
ctx.lineWidth = 10;
ctx.stroke();

4、canvas绘制多圈动画圆

<!-- 设置canvas元素 -->
<canvas id = "canvas" width="200" height="200"></canvas>...var radius = 50;
var increase = true;// 获取canvas元素
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");function draw() {// 清楚给定矩形内的形状ctx.clearRect(0, 0, canvas.width, canvas.height);ctx.beginPath();ctx.arc(150, 150, radius, 0, Math.PI * 2);ctx.closePath();ctx.fillStyle = "#ff2d51";ctx.fill();ctx.beginPath();ctx.arc(150, 150, 50, 0, Math.PI * 2);ctx.closePath();ctx.fillStyle = "#333";ctx.fill();if (radius > 100) {increase = false;} else if (radius < 50) {increase = true;}if (increase) {radius++;console.log("banjings");} else {radius--;}
}
setInterval(draw, 20);

 

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

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

相关文章

【笔记】KaiOS OTA APN 方案(OMADM)

一、【需求】功能逻辑 OMADM 机制根据节点信息修改对应的APN&#xff0c;因此代码也通过Node消息管控实现。 _listenOpApnSettingsopCheckIsInProgressAndSaveNodeValuesaveAndUpdateApnValue this.operatorVariantHandlers[simslot.index].applySettings(mcc, mnc/*, false*…

C#,入门教程(38)——大型工程软件中类(class)修饰词partial的使用方法

上一篇&#xff1a; C#&#xff0c;入门教程(37)——优秀程序员的修炼之道https://blog.csdn.net/beijinghorn/article/details/125011644 一、大型&#xff08;工程应用&#xff09;软件倚重 partial 先说说大型&#xff08;工程应用&#xff09;软件对源代码的文件及函数“…

用 Python 制作可视化 GUI 界面,一键实现证件照背景颜色的替换

今天&#xff0c;我们来分享一下如何通过Python的十来行代码来替换证件照的背景颜色&#xff0c;那么在最后&#xff0c;小编也会将上述的流程制作成一个GUI界面来方便大家使用。关于界面的大致模样其实和先前的相差不大&#xff0c;大家应该都看过上一篇的内容 界面大体的样子…

实战-ApacheSuperset未授权访问漏洞(CVE-2023-27524)

声明&#xff1a; 该文章仅供网络安全领域的学习使用&#xff0c;请勿利用文章内的相关技术从事任何非法行为。 测试资产为国外 IP&#xff0c;存在漏洞的 IP 地址已做打码处理。 我们只进行 poc&#xff0c;请勿进行任何非法入侵和攻击。 知攻善防&#xff0c;遇强则强。 开发…

MYSQL索引实例

1.用SQL语句创建学生表student&#xff0c;定义主键&#xff0c;姓名不能重名&#xff0c;性别只能输入男或女&#xff0c;所在系的默认值是“计算机”。 mysql> create table student(-> Sno int primary key auto_increment,-> Sname varchar(255) not null unique…

MacOS受欢迎的数据库开发工具 Navicat Premium 15 中文版

Navicat Premium 15 Mac是一款数据库管理工具&#xff0c;提供了一个全面的解决方案&#xff0c;用于连接、管理和维护各种数据库系统。以下是Navicat Premium 15 Mac的一些主要功能和特点&#xff1a; 软件下载&#xff1a;Navicat Premium 15 中文版下载 多平台支持&#xff…

kettle 同步gbase8t数据到mysql时clob类型乱码

一、问题 使用kettle 同步gbase8t数据到mysql时clob类型乱码。 varchar类型不乱码。 环境&#xff1a;win10 kettle:9.x 二、解决 1 &#xff08;有效&#xff09;修改kettle编码格式 打开kettle的安装目录&#xff0c;进入data-integration目录记事本编辑spoon.bat搜索PE…

【PyTorch】PyTorch之Tensors索引切片篇

文章目录 前言一、ARGWHERE二、CAT、CONCAT、CONCATENATE三、CHUNK四、GATHER五、MOVEDIM和MOVEAXIS六、PERMUTE七、RESHAPE八、SELECT九、SPLIT十、SQUEEZE十一、T十二、TAKE十三、TILE十四、TRANSPOSE十五、UNBIND十六、UNSQUEEZE十七、WHERE 前言 介绍常用的PyTorch之Tenso…

软件工程研究生后期总结

写这篇随笔的时候&#xff0c;我已经处于研究生阶段的后期&#xff0c;只剩下一个硕论答辩即可结束研究生生涯。趁有闲暇时间&#xff0c;我希望可以从实习、兼职、论文和求职等几个角度重新整理一下研究生后期的工作和收获&#xff0c;以及对未来工作和生活做出展望。 首先简…

【VUE】记录一次 VUE中配置生产环境和开发环境方法

前言 我这里 使用Vue CLI&#xff08;Vue Command Line Interface&#xff09;创建Vue.js项目是一种简单的方式&#xff0c;它提供了一个交互式的命令行工具来帮助你初始化和管理Vue.js项目。 并且我这个项目需要区分生产环境和开发环境。这里具体完整记录下&#xff0c;整个…

第15届蓝桥杯嵌入式省赛准备第二天总结笔记(使用STM32cubeMX创建hal库工程+按键输入)

一.查看电路图 按键是使用的PB0,PB1,PB2,PA0四个引脚&#xff0c;然后使用CubeMX配置引脚&#xff0c;4个脚都配置为输入模式和上拉。 程序生成之后把不用的删掉&#xff0c;需要的留下&#xff0c;这里我把函数名改了。 然后写按键扫描读取程序&#xff0c;这里参考的正点原子…

Vue中ElementUI结合transform使用时,修复el-select弹框定位不准确问题

在大屏开发中&#xff0c;比如将1920*1080放到更大像素&#xff08;3500*2400&#xff09;大屏上演示&#xff0c;此时需要使用到transform来对页面进行缩放&#xff0c;但是此时发现弹框定位出错问题&#xff0c;无法准备定位到实际位置。之前写过一篇讲解的是ElementUI中的&l…

【Android】自定义View onDraw()方法会调用两次

问题 自定义了View后&#xff0c;在构造函数中设置画笔颜色&#xff0c;发现它没起效&#xff0c;但是在onDraw()里设置颜色就会起效&#xff0c;出问题的代码如下&#xff1a; public RoundSeekbarView(Context context, Nullable AttributeSet attrs) {super(context, attrs…

视频美颜SDK与人工智能的结合:技术突破与挑战

本篇文章&#xff0c;小编将与大家共同探讨美颜SDK与人工智能结合背后的技术原理、创新应用以及面临的挑战。 一、技术原理&#xff1a;人工智能在美颜中的应用 视频美颜SDK通过整合深度学习和计算机视觉技术&#xff0c;能够更准确地识别人脸特征、肤色、表情等信息&#xff…

深入理解傅里叶变换

目录 1. 什么是傅里叶变换 2. 为什么要分解为正弦波的叠加参考资料 1. 什么是傅里叶变换 高等数学中一般是从周期函数的傅里叶级数开始介绍的&#xff0c;这里也不例外。 简单的说&#xff0c;从高中我们就学过一个理想的波可以用三角函数来描述&#xff0c;但是实际上的波可…

MAC iterm 显示git分支名

要在Mac上的iTerm中显示Git分支名&#xff0c;您需要使用一个名为“Oh My Zsh”的插件。Oh My Zsh是一个流行的Zsh框架&#xff0c;它提供了许多有用的功能和插件&#xff0c;包括在终端中显示Git分支名。 以下是在iTerm中显示Git分支名的步骤&#xff1a; 1、安装Oh My Zsh&…

Git入门详细教程

一、Git概述&#x1f387; Git官网 Git是一个开源的分布式版本控制系统&#xff0c;用于跟踪文件的变化和协作开发。它允许多个开发者在同一项目中共同工作&#xff0c;并能够有效地管理代码的版本和历史记录。Git可以帮助开发团队更好地协作&#xff0c;追踪代码变更&#xf…

什么是比特币?

比特币 比特币 &#xff08;英语&#xff1a;Bitcoin&#xff0c;缩写&#xff1a;BTC &#xff09;是一种基于 去中心化&#xff0c;采用 点对点网络&#xff0c;开放源代码&#xff0c;以 区块链 作为底层技术的 加密货币。比特币由 中本聪&#xff08;Satoshi Nakamoto&…

Nginx前后端分离部署springboot和vue项目

Nginx前后端分离部署springboot和vue项目&#xff0c;其实用的比较多&#xff0c;有的小伙伴对其原理和配置还一知半解&#xff0c;现在就科普一下&#xff1a; 1、准备后端项目 后端工程无论是微服务还是单体&#xff0c;一般最终都是jar启动&#xff0c;关键点就是把后端服…

go mock模拟接口的实现

简介 mock翻译过来是‘模拟’的意思&#xff0c;也就是模拟接口返回的信息&#xff0c;用已有的信息替换接口返回的信息&#xff0c;从而提供仿真环境&#xff0c;实现模拟数据下的功能测试&#xff1b; 在多人合作编码时&#xff0c;你写的一个函数func DoSth(People)用到了别…