【canvas】canvas的基础使用(一):创建canvas

canvas

Canvas API 提供了一个通过JavaScript 和 HTML的<canvas>元素来绘制图形的方式。它可以用于动画、游戏画面、数据可视化、图片编辑以及实时视频处理等方面。
Canvas API 主要聚焦于 2D 图形。

canvas元素

<canvas> 元素可被用来通过 JavaScript(Canvas API 或 WebGL API)绘制图形及图形动画。

不同于 <img> 元素, <canvas>元素需要有闭合标签 (</canvas>).

canvas元素里的内容将在canvas api不支持的情况下显示,例如:

<canvas id="canvas" width="300" height="300">
  抱歉,你的浏览器不支持 canvas 元素
  (这些内容将会在不支持&lt;canvas%gt;元素的浏览器或是禁用了 JavaScript
  的浏览器内渲染并展现)
</canvas>

canvas元素属性

  • 本元素支持全局属性。
  • height — 该元素占用空间的高度,以 CSS 像素(px)表示,默认为 150。
  • width — 该元素占用空间的宽度,以 CSS 像素(px)表示,默认为 300。

设置css的宽高只是改变canvas元素的宽高,自带的宽高属性定义的是替换元素后画布的宽高。

直接在 html 标签中设置 width 和 height 属性或者使用 JavaScript 来指定画布尺寸,这将改变一个画布的水平像素和垂直像素数,就像定义了一张图片的大小一样。

canvas上下文

canvas上下文是使用canvasDom引用的getContext()方法获得。如果上下文没有定义则返回 null 。

在同一个 canvas 上以相同的 contextType 多次调用此方法只会返回同一个上下文。

语法:
var ctx = canvas.getContext(contextType);
var ctx = canvas.getContext(contextType, contextAttributes);

  • contextType — 上下文类型(contextType),可选值有以下选项:
    • “2d”, 建立一个 CanvasRenderingContext2D 二维渲染上下文。
    • “webgl” (或"experimental-webgl") 这将创建一个 WebGLRenderingContext 三维渲染上下文对象。只在实现WebGL 版本 1(OpenGL ES 2.0) 的浏览器上可用。
    • “webgl2” (或 “experimental-webgl2”) 这将创建一个 WebGL2RenderingContext 三维渲染上下文对象。只在实现 WebGL 版本 2 (OpenGL ES 3.0) 的浏览器上可用。
    • “bitmaprenderer” 这将创建一个只提供将 canvas 内容替换为指定ImageBitmap功能的ImageBitmapRenderingContext 。
  • 上下文属性 (contextAttributes):
    • 2d 上下文属性:
      • alpha: boolean值表明canvas包含一个alpha通道。如果设置为false, 浏览器将认为canvas背景总是不透明的,这样可以加速绘制透明的内容和图片。
    • WebGL 上下文属性:
      • alpha: boolean值表明canvas包含一个alpha缓冲区。
      • antialias: boolean值表明是否开启抗锯齿。
      • depth: boolean值表明绘制缓冲区包含一个深度至少为 16 位的缓冲区。
      • failIfMajorPerformanceCaveat: 表明在一个系统性能低的环境是否创建该上下文的boolean值。
      • powerPreference: 指示浏览器在运行 WebGL 上下文时使用相应的 GPU 电源配置。可能值如下:“default”:自动选择,默认值。“high-performance”: 高性能模式。“low-power”: 节能模式。
      • premultipliedAlpha: 表明排版引擎将假设绘制缓冲区包含预混合 alpha 通道的boolean值。
      • preserveDrawingBuffer: 如果这个值为true缓冲区将不会被清除,会保存下来,直到被清除或被使用者覆盖。
      • stencil: 表明绘制缓冲区包含一个深度至少为 8 位的模版缓冲区boolean值。

返回值:

  • CanvasRenderingContext2D 为 “2d”,
  • WebGLRenderingContext 为"webgl" 和"experimental-webgl",
  • WebGL2RenderingContext 为"webgl2" 和"experimental-webgl2", 或者
  • ImageBitmapRenderingContext 为"bitmaprenderer".
  • 如果 contextType 不是上述之一,返回null.

例子:
定义 <canvas> 元素:

<canvas id="canvas" width="300" height="300"></canvas>

通过如下代码可以获取 canvas2d 上下文:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
console.log(ctx); // CanvasRenderingContext2D { ... }

canvas坐标

以页面的左上角为 (0,0) 坐标点,坐标以像素为单位,x 轴正方向是向右,y 轴正方向是向下。
例如:
我们有一个宽高各150px的画布:
在这里插入图片描述

示例:

创建一个初始画布:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>canvas1</title>
  <style>
    #canvas {
      border: 1px solid #000;
    }
  </style>
</head>

<body>
  <canvas id="canvas"></canvas>
  <script>
    const cDom = document.getElementById("canvas")
    //  定义画布宽高
    // cDom.width = 200
    // cDom.height = 200
    const ctx = cDom.getContext("2d")
    ctx.fillStyle = 'green'

    ctx.fillRect(0, 0, cDom.width, cDom.height)
    console.log(cDom, ctx);

  </script>
</body>

</html>

画布初始宽高是300/150,我们改变了画布样式,然后使用fillRect方法绘制了一个绿色的矩形。
在这里插入图片描述

结语

结束了。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Figma】安装指南及基础操作

先前做UI设计一直都是用PS等绘图软件设计&#xff0c;但发现在纠结像素和排版问题上会花很多时间&#xff0c;再加上AI没来得及上手&#xff0c;就需要迅速出成图&#xff0c;此时通过论坛发现了figma&#xff0c;基本上可以满足足够的需求&#xff0c;并且可以在windows系统上…

程序员如何搞副业

#程序员如何搞副业&#xff1f;# 在快速发展的IT行业中&#xff0c;程序员作为技术骨干&#xff0c;通常拥有扎实的编程能力和丰富的项目经验。然而&#xff0c;随着职业生涯的深入&#xff0c;许多程序员开始思考如何进一步提升自我价值&#xff0c;实现更多的经济收益。副业成…

身份证实名认证接口的价格一般是多少呢?基于PHP身份核验接口

身份证实名认证接口分为身份证二要素、三要素、三要素人像核验接口&#xff0c;被广泛的应用于婚恋、交友、电商等等一系列行业领域&#xff0c;身份证实名认证需要实时数据&#xff0c;对于数据源来说也需要可靠&#xff0c;那么&#xff0c;身份证实名认证的价格是不是很贵呢…

Yolov8-pose关键点检测:特征融合 | CAMixing:卷积-注意融合模块和多尺度提取能力 | 2024年4月最新成果

💡💡💡本文独家改进:CAMixingBlock更好的提取全局上下文信息和局部特征,包括两个部分:卷积-注意融合模块和多尺度前馈网络; 💡💡💡如何跟YOLOv8结合:1)放在backbone后增强对全局和局部特征的提取能力;2)放在detect前面,增强detect提取能力; 提供多种改进方…

HarmonyOS实战开发-如何使用调用系统任务管理的能力。

介绍 本示例通过调用系统任务管理的能力&#xff0c;使用ohos.application.missionManager 、ohos.multimedia.image 等接口完成对系统任务执行锁定、解锁、清理、切换到前台等操作。 效果预览 使用说明 1.下拉“获取系统任务信息”&#xff0c;获取当前系统任务的包名、运行…

简单用Nodejs + express 编写接口

文章目录 get接口示范post接口示范注意点 准备工作可以看上一篇文章&#xff1a;文章链接》》 get接口示范 app.get(/, (req, res) > {res.send("Hello World"); })因为是get接口&#xff0c;所以可以直接在浏览器上请求&#xff08;端口地址接口名&#xff09;…

如何快速摸清一个行业?

作为一名职场人&#xff0c;或多或少都会遇到需要了解自己不熟悉的行业&#xff0c;比如&#xff1a; 职业选择&#xff0c;跳槽换工作时&#xff1a;哪家企业所在的行业有优势&#xff0c;未来会有更多的机会&#xff1f;哪个行业给的薪资会更高&#xff1f;行业内当下及未来的…

linux/centos/ubuntu无法开机数据恢复完美解决

生产紧急问题可私信博主解决 背景&#xff1a; 朋友跟我说他的centos7服务器开不开机了&#xff0c;给了我一张图片 他告诉运维通过xfs_repair修复无效&#xff0c;依旧启动不了 原因分析 从以上图片可知系统进入了dracut模式&#xff0c;很明显的报错/dev/mapper/centos-r…

FebHost:墨西哥.MX域名争议解决机制重要性

在全球化的浪潮中&#xff0c;有效的域名争议解决机制对于保护商标持有者的权益、防止域名系统的滥用至关重要。墨西哥&#xff0c;与其他国家一样&#xff0c;建立了一套完善的争议解决框架&#xff0c;确保商标所有者在维护其知识产权完整性时能够得到公平对待。这不仅增强了…

怎样恢复已删除的照片?教你3个方法,一键恢复!

很多人喜欢以拍照的形式记录生活&#xff0c;手机里的照片就很容易堆积成山&#xff0c;但当内存不够用时就不得不选择删除。可是这些美好的照片始终是很多人心中抹不去的记忆&#xff0c;那么该怎样恢复已删除的照片呢&#xff1f;下面几招&#xff0c;教你一键恢复&#xff0…

3.网络编程-TCP

目录 TCP 建立连接的过程是怎样的 TCP为什么是三次握手 TCP 断开连接的过程是怎样的 TCP挥手为什么需要四次 为什么TIME_WAIT等待的时间是2MSL TCP详解之滑动窗口 TCP 半连接队列和全连接队列是什么 TCP粘包&#xff0c;拆包是怎么发生的&#xff0c;如何解决 TCP是如何…

LeetCode-热题100:K 个一组翻转链表

题目描述 给你链表的头节点 head &#xff0c;每 k 个节点一组进行翻转&#xff0c;请你返回修改后的链表。 k 是一个正整数&#xff0c;它的值小于或等于链表的长度。如果节点总数不是 k 的整数倍&#xff0c;那么请将最后剩余的节点保持原有顺序。 你不能只是单纯的改变节…

小白能看懂的CyberRT学习笔记

0. 简介 Apollo Cyber RT 是专为自动驾驶场景设计的开源、高性能运行时框架。 基于中心化计算模型&#xff0c;主要价值是提升自动驾驶系统的高并发、低延迟、高吞吐。 Apollo 并不是一开始就使用 CyberRT&#xff0c;在 v3.0 之前用的都是基于 ROS 框架进行开发。但在之前的…

SQL Server详细安装使用教程

1.安装环境 现阶段基本不用SQL Server数据库了&#xff0c;看到有这样的分析话题&#xff0c;就把多年前的存货发一下&#xff0c;大家也可以讨论看看&#xff0c;思路上希望还有价值。 SQL Server 2008 R2有32位版本和64位版本&#xff0c;32位版本可以安装在Windows XP及以上…

ES11 学习

文章目录 1. Promise.allSettled2. Module 新增2.1 ! 动态导入 import()2.2 import.meta2.3 export * as obj from module 3. 字符串 matchAll()4. BigInt实际开发相关使用 5. globalThis6. 空值合并运算符7. 可选链操作符 1. Promise.allSettled Promise.allSettled() 返回一个…

【算法详解】双指针

双指针 常见的双指针有两种形式&#xff0c;一种是对撞指针&#xff0c;一种是左右指针。 1. 双指针简介 双指针&#xff08;Two Pointers&#xff09;&#xff1a;指的是在遍历元素的过程中&#xff0c;不是使用单个指针进行访问&#xff0c;而是使用两个指针进行访问&#…

【uniapp】个推H5号码认证一键登录(附代码)

前言 最近在做APP、h5产品&#xff0c;登陆注册成了难题。邮箱验证多数人不会使用&#xff0c;还是短信方便点&#xff0c;短信可以采用号码认证和验证码的方式&#xff0c;前者稍微便宜的&#xff0c;关于性价比和上手程度我推荐个推&#xff0c; 于是有了今天这篇案例记录&a…

谷歌浏览器插件开发速成指南:弹窗

诸神缄默不语-个人CSDN博文目录 本文介绍谷歌浏览器插件开发的入门教程&#xff0c;阅读完本文后应该就能开发一个简单的“hello world”插件&#xff0c;效果是出现写有“Hello Extensions”的弹窗。 作为系列文章的第一篇&#xff0c;本文还希望读者阅读后能够简要了解在此基…

爬取日本常用汉字秘籍

前言 昨天投简历时遇到了这样的一个笔试。本以为会是数据结构算法之类的没想到直接发了一个word直接提需求&#xff0c;感觉挺有意思就写了这篇文章&#xff0c;感兴趣的朋友可以看看。 1. 网页内容解析 首先&#xff0c;我们通过请求网页获取到日本常用汉字的链接列表。然后…

计算机网络——38报文完整性

报文完整性 数字签名 数字签名类比于手写签名 发送方数字签署了文件&#xff0c;前提是他是文件的拥有者/创建者可验证性&#xff0c;不可伪造性&#xff0c;不可抵赖性 谁签署&#xff0c;接收方可以向他人证明是他&#xff0c;而不是其他人签署了这个文件签署了什么&#…