前端Canvas入门——Canvas的一些注意事项

news2024/11/15 7:23:10

如果我们使用标签的方式去创建Canvas,可以发现:

在我们创建画笔的时候,是不会有任何提示的。

这意味着,你需要记住所有API代码——这就很烦人。

那么,又没有一种优雅的、不失格调的方法?

那就是使用JS去创建canvas,然后添加到body中即可:

    <script>
        // 使用JS的方式创建 canvas 画布
        const canvas = document.createElement('canvas')

        // 设置 画布 宽高
        canvas.width = 400
        canvas.height = 400

        // 添加到网页中
        document.body.append(canvas)
        
        // 获取 画笔
        const ctx = canvas.getContext('2d')

        // 画一个图形
        ctx.arc(200, 100, 100, 0, Math.PI * 1)

        ctx.fillStyle = 'red'
        ctx.fill()

    </script>

这个时候,你可以惊奇地发现——居然有提示了!

 

所以说,这个通过JS的方式去创建Canvas确实牛。

不过,还是想说,对于一个初学者来说,还是多打几下吧。

这样好记住每个API的含义和用法~

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

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

相关文章

内网对抗-代理通讯篇不出网或不可达SockS全协议规则配置C2正反向上线解决方案

知识点 1、代理隧道篇-代理通讯网络不可达-正反向连接上线 2、代理隧道篇-代理通讯网络不可达-SockS代理配置 实现步骤 1、在被控机器上获取下一级网段 2、在被控及其上建立SockS节点 3、在工具上配置连接属性和规则触发演示案例-代理技术-正反向监听/SockS配置-网络不可达…

LabVIEW航空发动机试验器数据监测分析

1. 概述 为了适应航空发动机试验器的智能化发展&#xff0c;本文基于图形化编程工具LabVIEW为平台&#xff0c;结合航空发动机试验器原有的软硬件设备&#xff0c;设计开发了一套数据监测分析功能模块。主要阐述了数据监测分析功能设计中的设计思路和主要功能&#xff0c;以及…

Ubuntu使用Nginx部署uniapp打包的项目

使用uniapp导出web项目&#xff1a; 安装&#xff1a; sudo apt install nginx解压web.zip unzip web.zip移动到/var/www/html目录下&#xff1a; sudo cp -r ~/web/h5/ /var/www/html/重启Nginx&#xff1a; sudo service nginx restart浏览器访问&#xff1a;http://19…

Docker安装RabbitMQ(带web管理端)

1.拉取带web管理的镜像 可以拉取rabbitmq对应版本的web管理端&#xff0c;比如&#xff1a;rabbitmq:3.9.11-management&#xff0c;也可以直接拉取带web管理端的最新版本 rabbitmq:management. docker pull rabbitmq:3.9.11-management 注意&#xff1a;如果docker pull ra…

图像处理:使用 OpenCV-Python 卡通化你的图像(2)

一、说明 在图像处理领域&#xff0c;将图像卡通化是一种新趋势。人们使用不同的应用程序将他们的图像转换为卡通图像。如今&#xff0c;玩弄图像是许多人的爱好。人们通常会点击图片并添加滤镜或使用不同的东西自定义图像并将其发布到社交媒体上。但我们是程序员&#xff0c;…

基于重叠群稀疏的总变分信号降噪及在旋转机械故障诊断中的应用(MATLAB)

基于振动分析的故障诊断方法基本流程主要由以下五个步骤组成&#xff0c;分别是信号采集、信号处理、特征提取、状态识别与诊断结果。这五个步骤中信号采集与特征提取是故障诊断中最为重要的步骤&#xff0c;而故障微弱特征信息又是其中最难解决的问题。“故障微弱特征信息”站…

【Pro Controller连接PC】

软件下载连接 教学视频 安装64位驱动 按键修改

麦克风设计指南

前言&#xff1a; 本指南基于乐鑫的 ESP32-S3 系列语音开发板。 整机 mic 要求 麦克风电器性能推荐 麦克类型&#xff1a;全向型 MEMS 麦克风 SMD-4P,2.8x1.9mm MEMS 麦克风 顶视图 MEMS 麦克风 底视图 灵敏度 1 Pa 声压下模拟麦灵敏度不低于 -38 dBV&#xff0c;数字麦灵…

详细分析Sql Server中的declare基本知识

目录 前言1. 基本知识2. Demo3. 拓展Mysql4. 彩蛋 前言 实战探讨主要来源于触发器的Demo 1. 基本知识 DECLARE 语句用于声明变量 声明的变量可以用于存储临时数据&#xff0c;并在 SQL 查询中多次引用 声明变量&#xff1a;使用 DECLARE 语句声明一个或多个变量变量命名&a…

无人机之遥控器分类篇

一、传统遥控器 传统无人机遥控器一般包括开关键、遥控天线等基础装置。但是会随着无人机具体的应用和功能而开发不同的按键。它的信号稳定性远超对比其他遥控&#xff0c;而且遥控距离也更远&#xff08;一般遥控范围在100米或以上&#xff09;传统遥控器对于初学者来说比较难…

单体、分布式、微服务、Serverless及新兴部署模式分析

在数字化时代&#xff0c;软件架构的选择对于企业的技术战略至关重要。从单体架构到Serverless&#xff0c;再到服务网格和服务化模型&#xff0c;每一种架构模式都反映了特定时期内技术发展和业务需求的特点。本文将对这些架构模式的优缺点进行讨论&#xff0c;供大家参考。 部…

C++ | Leetcode C++题解之第231题2的幂

题目&#xff1a; 题解&#xff1a; class Solution { private:static constexpr int BIG 1 << 30;public:bool isPowerOfTwo(int n) {return n > 0 && BIG % n 0;} };

C#开发:Git的安装和使用

一、安装git 二、如何克隆代码&#xff1f; 1.找到某个本地目录&#xff0c;右键-gitbash 2. 输入以下代码&#xff08;红色是地址&#xff0c;在gitlab获取或联系管理员获取&#xff0c;下图为复制地址&#xff09;&#xff1a; git clone http://xxxxxxxxx.git 输入帐号和令…

【RAG检索增强生成】有道QAnything深度解析与实践

目录 引言1、QAnything简介2、技术解析2.1 RAG技术核心2.2 QAnything架构2.3 模型与算法 3、应用场景3.1 企业知识管理3.2 教育与学术研究3.3 客户服务 4、部署实践4.1 环境准备4.2 安装QAnything4.3 启动运行4.4 访问UI界面4.4 API使用4.4.1 新建知识库&#xff08;POST&#…

美团收银Android一面凉经(2024)

美团收银Android一面凉经(2024) 笔者作为一名双非二本毕业7年老Android, 最近面试了不少公司, 目前已告一段落, 整理一下各家的面试问题, 打算陆续发布出来, 供有缘人参考。今天给大家带来的是《美团收银Android一面凉经(2024)》。 应聘岗位: 美团餐饮PaaS平台Android开发工程师…

我的第128天创作纪念日

&#x1f308;个人主页&#xff1a;是店小二呀 &#x1f308;C语言笔记专栏&#xff1a;C语言笔记 &#x1f308;C笔记专栏&#xff1a; C笔记 &#x1f308;初阶数据结构笔记专栏&#xff1a; 初阶数据结构笔记 &#x1f308;喜欢的诗句:无人扶我青云志 我自踏雪至山巅 文章…

从LeetCode215看排序算法

目录 LeetCode215 数组的第K个最大元素 ① 第一反应&#xff1a;java的内置排序Arrays.sort() ② 冒泡排序 ③归并排序&#xff08;先分解再合并&#xff09; ④快速排序&#xff08;边分解边排序&#xff09; ⑤堆排序 LeetCode215 数组的第K个最大元素 给定整数数组 nums…

谈谈软件交互设计

谈谈软件交互设计 交互设计的由来 交互设计(Interaction Design)这一概念,最初是由IDEO创始人之一Bill.Moggridge(莫格里奇)1984年在一次会议上提出。他设计了世界上第一台笔记本电脑Compass,并写作出版了在交互设计领域影响深远的《Designing Interactions》一书,被称…

【分库】分库的核心原则

目录 分库的核心原则 前言 分区透明性与一致性保证 弹性伸缩性与容错性设计 数据安全与访问控制机制 分库的核心原则 前言 在设计和实施分库策略时&#xff0c;遵循一系列核心原则是至关重要的&#xff0c;以确保系统不仅能够在当前规模下高效运行&#xff0c;还能够随着…

Aop切面编程(2)--代理模式

1、代理模式的理解&#xff1a;不修改A对象的代码的基础上&#xff0c;对A代码块进行拓展。通过创建ProxyA代理对象&#xff0c;拓展A对象并调用A对象的核心功能&#xff1b; 即&#xff1a;不修改对象的源码基础上&#xff0c;创建代理对象&#xff0c;进行功能的附加和增强&…