canvas绘制网格线示例

在这里插入图片描述

查看专栏目录

canvas示例教程100+专栏,提供canvas的基础知识,高级动画,相关应用扩展等信息。canvas作为html的一部分,是图像图标地图可视化的一个重要的基础,学好了canvas,在其他的一些应用上将会起到非常重要的帮助。

文章目录

    • 示例效果图
    • 示例源代码(共109行)
    • canvas基本属性
    • canvas基础方法

如何使用canvas绘制网格线呢?方法其实很简单,就是绘制一些等距间隔的横线和竖线,形成一个网格。通常在地图的绘制当中会用到,下面是大剑师的一个示例,供参考:

示例效果图

在这里插入图片描述

示例源代码(共109行)


/*
* @Author: 大剑师兰特(xiaozhuanlan),还是大剑师兰特(CSDN)
* @此源代码版权归大剑师兰特所有,可供学习或商业项目中借鉴,未经授权,不得重复地发表到博客、论坛,问答,git等公共空间或网站中。
* @Email: 2909222303@qq.com
* @weixin: gis-dajianshi
* @First published in CSDN
* @First published time: 2024-01-02
*/
<template><div class="djs_container"><div class="top"><h3>canvas绘制网格线</h3><div>大剑师兰特, 还是大剑师兰特,gis-dajianshi</div><h4><el-button type="primary" size="mini" @click="draw()">绘制</el-button></h4></div><div class="dajianshi "><canvas id="dajianshi" ref="mycanvas" width="980" height="490"></canvas></div></div>
</template>
<script>export default {data() {return {ctx: null,canvas: null,}},mounted() {this.setCanvas()},methods: {setCanvas() {this.canvas = document.getElementById('dajianshi');if (!this.canvas.getContext) return;this.ctx = this.canvas.getContext("2d");},draw() {this.drawGrid(this.ctx, 0, 0, 50, 980, 490, 50, "orange");},// 参数说明:// ctx:画布// x1:起始x位置// y1:起始y位置// step1:横向间隔// x2:终止x位置// y2:终止y位置// step1:竖向间隔// color:颜色值						drawGrid(ctx, x1, y1, step1, x2, y2, step2, color) {ctx.save();ctx.lineWidth = 0.5;ctx.strokeStyle = color;ctx.fillStyle = color;let x, y;// 画竖线for (x = x1; x < x2; x += step1) {ctx.beginPath();ctx.moveTo(x, y1);ctx.lineTo(x, y2);ctx.stroke();ctx.closePath();}// 画横线for(y=y1;y<y2;y+=step2){ctx.beginPath();ctx.moveTo(x1, y);ctx.lineTo(x2, y);ctx.stroke();ctx.closePath();}				ctx.restore();}}}
</script><style scoped>.djs_container {width: 1000px;height: 680px;margin: 50px auto;border: 1px solid green;position: relative;}.top {margin: 0 auto 0px;padding: 10px 0;background: #333;color: #fff;}.dajianshi {margin: 5px auto 0;border: 1px solid #ccc;width: 980px;height: 490px;background-color: #f9f9f9;}
</style>

canvas基本属性

属性属性属性
canvasfillStylefilter
fontglobalAlphaglobalCompositeOperation
heightlineCaplineDashOffset
lineJoinlineWidthmiterLimit
shadowBlurshadowColorshadowOffsetX
shadowOffsetYstrokeStyletextAlign
textBaselinewidth

canvas基础方法

方法方法方法
arc()arcTo()addColorStop()
beginPath()bezierCurveTo()clearRect()
clip()close()closePath()
createImageData()createLinearGradient()createPattern()
createRadialGradient()drawFocusIfNeeded()drawImage()
ellipse()fill()fillRect()
fillText()getImageData()getLineDash()
isPointInPath()isPointInStroke()lineTo()
measureText()moveTo()putImageData()
quadraticCurveTo()rect()restore()
rotate()save()scale()
setLineDash()setTransform()stroke()
strokeRect()strokeText()transform()
translate()

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

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

相关文章

docker 部署教学版本

文章目录 一、docker使用场景及常用命令1&#xff09;docker使用场景2&#xff09;rocky8(centos8)安装 docker3&#xff09;docker 常用命令补充常用命令 二、 单独部署每个镜像&#xff0c;部署spring 应用镜像推荐&#xff08;2023-12-18&#xff09;1、 安装使用 mysql1.1 …

高可用解决方案 Keepalived 概述

概述 Keepalived 介绍 Keepalived 是 Linux 下一个轻量级别的高可用解决方案&#xff0c;通过 **VRRP 协议&#xff08;虚拟路由冗余协议&#xff09;**来实现服务或者网络的高可用&#xff0c;可以利用其来解决单点故障。 起初是为 LVS 设计的&#xff0c;一个 LVS 服务会有 …

canvas实现文字自动换行,段落居中,单行的时候居中

canvas实现文字自动换行&#xff0c;段落居中,单行的时候居中方法&#xff0c;主要用到以下方法&#xff1a; /****绘制自动换行的字符串****///ctx_2d getContext("2d") 对象 //lineheight 段落文本行高 //bytelength 设置单字节文字一行内的数量 …

计算机毕业论文内容参考|基于智能搜索引擎的图书管理系统的设计与实现

文章目录 摘要前言绪论课题背景国内外现状与趋势课题内容相关技术与方法介绍系统分析系统设计系统实现系统测试总结与展望摘要 本文介绍了基于智能搜索引擎的图书管理系统的设计与实现。该系统旨在提供一个高效、智能化的图书管理平台,帮助用户更快、更准确地找到所需的图书资…

2024年PMP报考需要什么条件?怎么报名?

一、PMP是什么 PMP 是项目管理的入门级证书&#xff0c;全称是项目管理专业人士资格认证&#xff0c;由美国项目管理协会&#xff08;PMI&#xff09;举办的&#xff0c;受到全球200多个国家的认可&#xff0c;从1999 年到现在已经有20多年发展历史了。 顾名思义&#xff0c;…

【WPF.NET开发】预览事件

本文内容 先决条件预览标记为“已处理”的事件通过控件解决事件禁止问题 预览事件&#xff0c;也称为隧道事件&#xff0c;是从应用程序根元素向下遍历元素树到引发事件的元素的路由事件。 引发事件的元素在事件数据中报告为Source 。 并非所有事件场景都支持或需要预览事件。…

物理内存不够怎么办???centos9下如何设置大的swap空间

在做数据分析时&#xff0c;大家除了cpu速度不够以外&#xff0c;还有就是内存经常会爆掉&#xff0c;下面就介绍一下如何利用硬盘空间给物理内存扩容。 当然硬盘的速度要慢很多&#xff0c;如果要使用硬盘扩容也建议使用性能较高的ssd盘来做。 在CentOS 9系统下设置或增加大的…

【大数据面试知识点】分区器Partitioner:HashPartitioner、RangePartitioner

Spark HashParitioner的弊端是什么&#xff1f; HashPartitioner分区的原理很简单&#xff0c;对于给定的key&#xff0c;计算其hashCode&#xff0c;并除于分区的个数取余&#xff0c;如果余数小于0&#xff0c;则用余数分区的个数&#xff0c;最后返回的值就是这个key所属的…

阶段十-分布式-nginx服务器

一、Nginx简介 Nginx 是高性能的 HTTP 和反向代理的服务器&#xff0c;处理高并发能力是十分强大的&#xff0c;能经受高负载的考验,有报告表明能支持高达 50,000 个并发连接数。tomcat并发数量理论值是500&#xff0c;实际也就300左右。 1.2 正向代理 正向代理代理的是客户…

步进电机转速数码管显示

/*----------------------------------------------- 内容&#xff1a;本程序用于测试4相步进电机常规驱动 使用1-2相励磁 1-2相激励功率增倍&#xff0c;步进角度减半&#xff0c;抖动减少 顺序如下 a-ab-b-bc-c-cd-d-da 又称4相8拍 数码管…

世微 DW01 4.2V锂电池保护电路芯片 专业电源管理芯片

一、 描述 DW01A 是一个锂电池保护电路&#xff0c;为避免锂电池因过充电、过放电、电流过大导致电池寿命缩短或电池被损坏而设计的。它具有高精确度的电压检测与时间延迟电路。 二、 主要特点 工作电流低&#xff1b; 过充检测 4.3V&#xff0c;过充释放 4.05V&#xff1b; 过…

缅怀一代传奇!TVP创始委员陈皓与他的《左耳听风:传奇程序员练级攻略》

引言 中文技术圈时常被一种浮躁所困扰。互联网企业历经跑马圈地的红利期后&#xff0c;开始在精细化运营的路上艰难求索&#xff1b;圈子里的程序员们&#xff0c;也被日益放缓的业务需求和不断内卷的行业态势所影响&#xff0c;职业困境、年龄危机成了老生常谈的话题。 成长往…

188.【2023年华为OD机试真题(C卷)】中文分词模拟器(字典树动态规划算法—JavaPythonC++JS实现)

请到本专栏顶置查阅最新的华为OD机试宝典 点击跳转到本专栏-算法之翼:华为OD机试 🚀你的旅程将在这里启航!本专栏所有题目均包含优质解题思路,高质量解题代码,详细代码讲解,助你深入学习,深度掌握! 文章目录 188.【2023年华为OD机试真题(C卷)】中文分词模拟器(…

CSMM(软件开发能力成熟度模型)办理需要什么条件?

CSMM&#xff08;软件开发能力成熟度模型&#xff09;的办理通常需要企业满足一定的条件&#xff0c;这些条件包括但不限于&#xff1a; 1. 企业资质&#xff1a;申请CSMM认证的企业需要具备合法的营业执照和相关的行业资质。 2. 软件开发能力&#xff1a;企业需要有一定的软件…

three.js 多通道组合

效果&#xff1a; 代码&#xff1a; <template><div><el-container><el-main><div class"box-card-left"><div id"threejs" style"border: 1px solid red"></div><div style"border: 1px so…

AI大模型引领未来智慧科研暨ChatGPT在地学、GIS、气象、农业、生态、环境等领域中的高级应用

以ChatGPT、LLaMA、Gemini、DALLE、Midjourney、Stable Diffusion、星火大模型、文心一言、千问为代表AI大语言模型带来了新一波人工智能浪潮&#xff0c;可以面向科研选题、思维导图、数据清洗、统计分析、高级编程、代码调试、算法学习、论文检索、写作、翻译、润色、文献辅助…

C语言中关于while语句的理解以及getchar和putchar

while是一个循环语句&#xff0c;关于while的一些理解可以看下面这串代码 #include <stdio.h> int main() {int i 0;scanf("%d", &i);printf("输入十以内的数字&#xff0c;从输入的数字开始一直数到十&#xff1a;");while (i<10){printf(…

php ext-sodium 拓展安装 linux+windows

php编译安装(linux)&#xff0c;可以参考&#xff1a;php编译安装 一、windows soduim源码包自带&#xff0c;直接修改php.ini&#xff0c;取消extensionsodium注释即可 二、linux 1.安装依赖 apt-get install libsodium-dev2.进入源码目录 这里写自己的源码目录 cd /us…

6种版本的并查集(java实现版)

目录 引入 并查集的具体讲解及代码实现 Quick Find Quick Union 基于size的优化 代码实现 基于rank的优化 代码实现 路径压缩 代码实现 更多关于路径压缩的并查集 引入 由孩子指向父亲的这种特殊的树结构可以很高效的处理连接问题&#xff0c;在一个复杂的图中&…

音视频技术开发周刊 | 326

每周一期&#xff0c;纵览音视频技术领域的干货。 新闻投稿&#xff1a;contributelivevideostack.com。 全球最强「开源版Gemini」诞生&#xff01;全能多模态模型Emu2登热榜&#xff0c;多项任务刷新SOTA 最强的全能多模态模型来了&#xff01;就在近日&#xff0c;智源研究院…