本章节讲解Canvas如何结合 Openlayer  使用,首先我们讲解Canvas的绘图基础。

我们初始化地图的时候可以看见,实际上Openlayer的地图就是用Canvas实现绘制的。

image.png

Canvas绘制基本概念

什么是canvas?HTML5 <canvas>   元素用于图形的绘制,区别于css,它的绘制通过 JavaScript  来完成绘制。

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

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

绘制矩形

image.png

2.1设置canvas元素

<!-- 1、设置canvas元素 --><canvas id="canvas" width="200" height="200"></canvas><script>

2.2获取canvas

   /* 2、获取canvas */    const canvas = document.getElementById("canvas");

2.3获取上下文

返回一个对象,对象包含绘制图形的方法和属性​​​​​​​

/* 3、getContext()返回一个对象,对象包含绘制图形的方法和属性 */    const ctx = canvas.getContext("2d");

2.4执行绘制​​​​​​​

     /* 4、执行绘制fillRect(x,y,width,height) x,y*/    ctx.fillRect(10,10,100,100);    ctx.fillStyle= "#333"

2.5完整代码示例:

<!DOCTYPE html><html lang="en">  <head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title>  </head>  <body>    <!-- 1、设置canvas元素 -->    <canvas id="canvas" width="200" height="200"></canvas>    <script>      /* 2、获取canvas */      const canvas = document.getElementById("canvas");      /* 3、getContext()返回一个对象,对象包含绘制图形的方法和属性 */      const ctx = canvas.getContext("2d");      /* 4、执行绘制fillRect(x,y,width,height) x,y*/      ctx.fillRect(10, 10, 100, 100);      ctx.fillStyle = "#333";    </script>  </body></html>

绘制线

canvas 是一个二维网格

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

上面的 fillRect 方法拥有参数 (0,0,100,,100)。

意思是:在左上角开始 (0,0)的位置,绘制100*100的图形

图片

3.1路径

在Canvas上画线,我们将使用以下两种方法:

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

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

绘制线条我们必须使用到 "link" 的 stroke() 方法,执行绘制。

下面我们来试一下在canvas中实现线的绘制

图片

3.2设置canvas元素​​​​​​​

 <!-- 1、设置canvas元素 -->    <canvas id="canvas" width="200" height="200"></canvas>    <script>

3.3获取canvas元素​​​​​​​

/* 2、获取canvas */const canvas = document.getElementById("canvas");

3.4获取上下文​​​​​​​

/* 3、获取上下文 */const ctx = canvas.getContext("2d");

3.5设置起点和终点

起点​​​​​​​

/* 4、moveTo设置起点坐标 */ctx.moveTo(10, 10);

终点​​​​​​​

/* 5、设置终点坐标 lineTo */ctx.lineTo(100, 100);

3.6执行绘制​​​​​​​

/* 6、执行绘制 */ctx.strokeStyle = "#ff2d51";ctx.stroke();

完整代码:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Document</title></head><body>    <!-- 1、设置canvas元素 -->    <canvas id="canvas" width="200" height="200"></canvas>    <script>        /* 2、获取canvas */        const canvas = document.getElementById("canvas");        /* 3、获取上下文 */        const ctx = canvas.getContext("2d");        /* 4、moveTo设置起点坐标 */        ctx.moveTo(10, 10);        /* 5、设置终点坐标 lineTo */        ctx.lineTo(100, 100);        /* 6、执行绘制 */        ctx.strokeStyle = "#ff2d51";        ctx.stroke();    </script></body></html>

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

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

相关文章

深度学习——01 深度学习简介

1 什么是深度学习&#xff1f;人工智能是个大范畴&#xff0c;目标是打造智能机器和程序&#xff1b; 机器学习是实现人工智能的一种途径&#xff0c;它能让机器在不被明确编程的情况下自主学习&#xff1b;而深度学习&#xff0c;是机器学习的一个分支&#xff0c;它是基于深度…

自然语言处理( NLP)基础

一、基本概念自然语言处理也就是Natural Language Processing&#xff0c;简称NLP。NLP就是人工只能和语言学领域的一个分支&#xff0c;涉及到计算机与人类语言之间的相互作用。主要目标是让计算机能够理解、解释和生成人类语言的数据。1 自然语言处理的基本介绍NLP包括但不限…

云原生作业(nginx)

目录 1 Web 服务基础介绍 1.1 Web 服务介绍 1.1.1 Apache 经典的 Web 服务端 1.1.2 Nginx-高性能的 Web 服务端 1.1.3 用户访问体验和性能 1.1.4 服务端 I/O 流程 1.2 I/O 模型 1.2.1 I/O 模型相关概念 1.2.2 网络 I/O 模型 1.2.3 五种 IO 对比 1.2.4 I/O 的具体实现…

NY198NY203美光固态闪存NY215NY216

NY198NY203美光固态闪存NY215NY216技术架构与核心创新突破美光NY系列&#xff08;含NY198/NY203/NY215/NY216&#xff09;作为新一代企业级存储解决方案&#xff0c;其底层采用232层NAND闪存三维堆叠工艺&#xff0c;如同垂直建造数字世界的摩天大楼&#xff0c;在有限芯片面积…

後端開發技術教學(四) 數據交互延伸

書接上回&#xff1a;後端開發技術教學(三) 表單提交、數據處理-CSDN博客 必要資源&#xff1a; trae中文版下載網址: TRAE - The Real AI Engineer phpStudy 2018 : phpStudy - Windows 一键部署 PHP 开发环境 小皮出品 前言 大家好&#xff0c;我是小楓。書接上期說到的後…

华清远见25072班C语言学习day7

重点内容&#xff1a;二维整形数组&#xff1a;定义&#xff1a;数据类型 数组名[行数][列数];数组中元素的访问&#xff1a;通过行标和列标来访问、行标从0开始&#xff0c;列标从0开始初始化和赋值&#xff1a;int arr1[2][3]{1,2,3,4,5,6}; -->二维数组完全初始化int arr…

FPGA实现Aurora 64B66B数据回环传输,基于GTX高速收发器,提供2套工程源码和技术支持

目录1、前言Aurora 64B66B是啥&#xff1f;官方有Example&#xff0c;为何要用你这个&#xff1f;工程概述免责声明2、相关方案推荐我已有的所有工程源码总目录----方便你快速找到自己喜欢的项目我这里已有的 GT 高速接口解决方案本方案在Aurora 8B10B上的应用3、工程详细设计方…

实用硬件设计规范要点-原理图

此处所涉及的并非指导硬件工程师如何绘制原理图&#xff0c;而是旨在规范原理图的模板&#xff0c;统一原理图的设计方式&#xff0c;确保原理图具备良好的可阅读性&#xff0c;并统一与下一环节——PCB LAYOUT的接口。具体的硬件设计方法&#xff0c;诸位需在未来的工作中加以…

用 Apache Iceberg 与 Apache Spark 在 Google Cloud 打造高性能、可扩展的数据湖仓

大数据分析版图不断演进&#xff0c;组织正寻求更灵活、可扩展且具成本效益的方式来管理与分析海量数据。这一追求催生了数据湖仓范式&#xff0c;它将数据湖的低成本存储与灵活性&#xff0c;与数据仓库的数据管理能力和事务一致性相结合。站在这场变革中心的是 Apache Iceber…

【PyTorch学习笔记 - 02】 Datasets DataLoaders

前言 处理数据样本的代码可能会变得杂乱无章且难以维护&#xff1b;为了获得更好的可读性和模块化&#xff0c;我们理想的情况是将数据集代码与模型训练代码解耦。PyTorch 提供了两个数据处理类&#xff1a; torch.utils.data.DataLoader 和 torch.utils.data.Dataset&#x…

JavaWeb 30 天入门:第七天 —— 异常处理机制

在前六天的学习中&#xff0c;我们掌握了 Java 的基础语法、面向对象核心特性、抽象类与接口等知识。今天我们将学习 Java 中的异常处理机制&#xff0c;这是保证程序健壮性的关键技术。在 JavaWeb 开发中&#xff0c;无论是用户输入错误、数据库连接失败还是网络异常&#xff…

编译器默认生成的c++类六大成员函数

编译器默认生成的c类六大成员函数 编译器默认生成的六大成员函数 当你定义一个空类时&#xff0c;例如&#xff1a; class Empty {};如果代码中没有显式定义任何成员函数&#xff0c;C编译器会在需要时&#xff08;例如&#xff0c;代码中实际调用了这些函数&#xff09;为你…

人工智能概念:常见的大模型微调方法

文章目录一、微调技术的底层逻辑1.1 预训练与微调的关系1.2 核心目标&#xff1a;适配任务与数据二、经典微调方法详解2.1 全量微调&#xff08;Full Fine-Tuning&#xff09;2.2 冻结层微调&#xff08;Layer-Freezing Fine-Tuning&#xff09;2.3 参数高效微调&#xff08;Pa…

动态路由协议(一)

1. 动态路由 概述 静态路由在大网络里太麻烦&#xff08;设备多、配置量大&#xff0c;拓扑变了还要手动改&#xff09; 静态路由是由工程师手动配置和维护的路由条目&#xff0c;命令行简单明确&#xff0c;适用于小型或稳定的网络。静态路由有以下问题&#xff1a; 无法适…

LINUX812 shell脚本:if else,for 判断素数,创建用户

问题 [rootweb ~]# for((i2;i<n;i)) > if [ $n -ne $i ] && [ $((n%i)) -eq 0 ];then -bash: 未预期的符号 if 附近有语法错误 您在 /var/spool/mail/root 中有邮件 [rootweb ~]#[rootweb ~]# cat judgeprimeok.sh declare -i n read -p "please type the n…

游戏中角色持枪:玩家操控角色,角色转向时枪也要转向

角色持有枪&#xff0c;玩家&#xff08;你&#xff09;操控角色&#xff0c;那么&#xff0c;在角色转向时&#xff0c;枪也要转向。 先看看简单情况&#xff1a;假定角色只面向左或右方向&#xff0c;pygame中用这句来实现&#xff1a;pos self.facing * self.gun_offset s…

深度学习入门Day8:生成模型革命——从GAN到扩散模型

一、开篇&#xff1a;创造力的算法革命从昨天的Transformer到今天的生成模型&#xff0c;我们正从"理解"世界迈向"创造"世界。生成对抗网络(GAN)和扩散模型(Diffusion Model)代表了当前生成式AI的两大主流范式&#xff0c;它们让机器能够生成逼真的图像、音…

基于WRF-Chem的不同气溶胶的辐射效应的研究

前言目前我对于气溶胶辐射效应的理解就是设计敏感性实验&#xff0c;基础实验打开气溶胶参与辐射开关&#xff08;aer_ra_feedback&#xff09;&#xff0c;其他的实验则关闭气溶胶参与辐射过程开关&#xff0c;也有去掉某些气溶胶的影响&#xff0c;如黑碳&#xff08;BC&…

专题:2025人形机器人与服务机器人技术及市场报告|附130+份报告PDF汇总下载

原文链接&#xff1a;https://tecdat.cn/?p43583 当特斯拉Optimus在工厂里精准分拣电池&#xff0c;当普渡机器人在酒店完成跨楼层配送&#xff0c;一个万亿级的智能革命正在拉开序幕。服务机器人与人形机器人不再是实验室里的概念&#xff0c;而是正在重塑制造业、服务业的“…

JS 模块化与打包工具

一、模块化体系&#xff1a;ESM vs CJS 深入1.语法与静态性(1)ESM:静态语法&#xff0c;可被打包器做 Tree-shakingexport function play() {}export default ...import { play } from ./mod.js(2)CJS:运行时 require() , 分析能力弱&#xff0c;不利于 Tree-shaking2.Node 解析…