canvas绘制圆点示例

在这里插入图片描述

查看专栏目录

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

文章目录

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

如何使用canvas绘制圆点呢?方法其实很简单,在某个位置(x,y),画一个半径为R的圆,填充上颜色。下面是大剑师的一个示例,供参考:

示例效果图

在这里插入图片描述

示例源代码(共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.drawDot(10,10,10,'red');this.drawDot(50,50,20,'orange');this.drawDot(200,100,30,'green');this.drawDot(500,300,50,'blue');this.drawDot(800,400,60,'purple');},/*** 绘制圆点* @param {* 必填} x x坐标* @param {* 必填} y y坐标* @param {* 必填} Radius 圆半径* @param {* 必填} color 颜色*/drawDot(x, y, Radius, color) {this.ctx.beginPath();this.ctx.arc(x, y, Radius, 0, 2 * Math.PI);this.ctx.fillStyle = color;this.ctx.fill();},}}
</script><style scoped>.djs_container {width: 1000px;height: 680px;margin: 50px auto;border: 1px solid #ff4170;position: relative;}.top {margin: 0 auto 0px;padding: 10px 0;background: #ff4170;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/591894.shtml

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

相关文章

如何移除视频中的背景音乐或人物声音

移除视频声音是将视频指定的声音移除&#xff0c;可以选择移除人物声音还是视频的背景音乐&#xff0c;方便实现二次创作。 小编给大家推荐一些方法帮助大家更轻松地移除视频中的背景音乐或人物声音&#xff0c;有兴趣的朋友请自行百度查找&#xff0c;或小程序查找 1、方法&a…

跟我用路由器学Linux编程实例

跟我用路由器学Linux编程实例 本专栏文章以梅林、openwrt等linux路由为基础硬件&#xff0c;和笔者一起学习使用shell语言。带你从编写简单的插件开始&#xff0c;学习怎么折腾路由器&#xff0c;顺便学会编程。软路由用的都是Linux基础系统&#xff0c;学会了在路由上编程&am…

P8722 [蓝桥杯 2020 省 AB3] 日期识别(C语言)

题目描述 小蓝要处理非常多的数据, 其中有一些数据是日期。 在小蓝处理的日期中有两种常用的形式&#xff1a;英文形式和数字形式。 英文形式采用每个月的英文的前三个字母作为月份标识&#xff0c;后面跟两位数字表示日期&#xff0c;月份标识第一个字母大写&#xff0c;后…

2023福建省“信息安全管理与评估“---单机取证(高职组)

2023福建省“信息安全管理与评估“---单机取证(高职组) 2023福建省“信息安全管理与评估“---单机取证(高职组):公众号:鱼影安全(有联系方式)Evidence1:Evidence2:Evidence3:Evidence4:Evidence5:Evidence6:Evidence7:Evidence8:Evidence9:Evidence10:<

从入门到精通,30天带你学会C++【第十四天:洛谷选题讲解】

彩蛋 这么长的目录应该没人看吧。 Bi------------------------------------------------------------------------------- 目录 Everyday English 前言 函数 sqrt ( ) for循环 题目网址 分析题意 思路点拨 优化程序 AC代码 AC截图 数学 if判断 题目网址 思路…

视频剪辑技巧:轻松制作短视频,一键合并、剪辑、添加背景音乐

随着社交媒体的普及&#xff0c;短视频已是分享生活、娱乐和传递信息的重要方式。如果要制作短视频&#xff0c;但又不熟悉复杂的视频编辑软件&#xff0c;那么本文将讲解一些实用的视频剪辑技巧&#xff0c;轻松制作出高质量的短视频。现在一起来看看云炫AI智剪如何批量合并视…

光纤通信系统中常见类型的损伤和均衡方法

相干光纤通信系统中常见的损伤和均衡算法 光纤通信中的系统损伤损耗色度色散 CD偏振相关损耗PMD 偏振模色散RSOP 偏振态旋转PDL 偏振相关损耗 CFO 载波频率偏移和CPN 载波相位噪声 光纤通信系统损伤均衡算法 光纤通信中的系统损伤 信道中常见的损伤包括损耗、色散和偏振相关损…

【HarmonyOS开发】分布式应用的开发实践(元旦快乐)

元旦快乐&#xff0c;再见2023&#xff0c;加油2024&#xff0c;未来可期&#xff0c;愿新的一年带来健康、幸福和成功&#xff01;&#x1f4aa; &#x1f4aa;&#x1f4aa; 多种设备之间能够实现硬件互助、资源共享&#xff0c;依赖的关键技术包括分布式软总线、分布式设备虚…

机器学习基本概念及模型简单代码(自用)

监督学习 监督学习是机器学习的一种方法&#xff0c;其中我们教导模型如何做出预测或决策&#xff0c;通过使用包含输入和对应输出的已标注数据集进行训练。这种方法的关键特点是利用这些标注数据**&#xff08;即带有正确答案的数据&#xff09;**来指导模型的学习过程。 一言…

uni-app 前后端调用实例 基于Springboot 数据列表显示实现

锋哥原创的uni-app视频教程&#xff1a; 2023版uniapp从入门到上天视频教程(Java后端无废话版)&#xff0c;火爆更新中..._哔哩哔哩_bilibili2023版uniapp从入门到上天视频教程(Java后端无废话版)&#xff0c;火爆更新中...共计23条视频&#xff0c;包括&#xff1a;第1讲 uni…

【ArcGIS微课1000例】0084:甘肃积石山地震震中100km范围内历史灾害点分布图(2005-2020)

甘肃积石山地震震中100km范围内历史灾害点分布图(2005-2020)。 文章目录 一、成果预览二、实验数据三、符号化四、地图整饰一、成果预览 本实验最终效果图如下所示: 二、实验数据 以下数据可以从本专栏配套的实验数据包中0084.rar中获取。 1. 历史灾害数据。为2005-2020时…

深度学习|10.5 卷积步长 10.6 三维卷积

文章目录 10.5 卷积步长10. 6 三维卷积![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/b5bfa24f57964b0f81f9602f5780c278.png) 10.5 卷积步长 卷积步长是指每计算一次卷积&#xff0c;卷积移动的距离。 设步长为k&#xff0c;原矩阵规模为nxn&#xff0c;核矩阵…

BIOS:计算机中的特洛伊木马

内容概述&#xff1a; 由于主板制造商在计算机启动时用来显示品牌徽标的图像分析组件相关的问题&#xff0c;多个安全漏洞&#xff08;统称为 LogoFAIL&#xff09;允许攻击者干扰计算机设备的启动过程并安装 bootkit。x86 和 ARM 设备都面临风险。主板固件供应链安全公司 Bin…

valgrind跨平台调试及其问题分析

背景 同事在项目中遇到了内存泄漏问题&#xff0c;长时间没有解决&#xff0c;领导临时让我支援一下。心想&#xff0c;应该不难&#xff0c;毕竟我之间做过valgrind的使用总结。并输出内存泄漏问题分析思路&#xff08;案例篇&#xff09;和快速定位内存泄漏的套路两篇文章&a…

【C语言】Ubuntu 22上用GTK写GUI程序

一、GTK介绍 GTK (GIMP Toolkit) 是一个多平台的图形用户界面工具包。它最初是为图像处理程序 GIMP 开发的&#xff0c;后来演变成为许多操作系统上开发图形界面应用程序的通用库。GTK 是用C语言编写的&#xff0c;并且是自由和开源软件&#xff0c;遵循LGPL (GNU Lesser Gene…

三菱MR-JE伺服脉冲轴应用参数设置

三菱MR-JE伺服在脉冲轴控制上的应用&#xff0c;常用参数设置如下&#xff1a; 1、常用参数 未完...

Linux用shell脚本执行乘法口诀表的两种方式

#!/bin/bash # *********************************************************# # # # * Author : 藻头男 # # * QQ邮箱 : 2322944912qq.com # …

nginx 配置代理ip访问https的域名配置

前言 代理服务器是一种中间服务器&#xff0c;用于转发客户端请求到目标服务器。Nginx是一款高性能的Web服务器和反向代理服务器&#xff0c;可以用于配置代理IP访问HTTPS的域名。在本篇文章中&#xff0c;我们将介绍如何使用Nginx配置代理IP访问HTTPS域名&#xff0c;并提供相…

代码训练营Day.21 | 530. 二叉搜索树的最小绝对差、501. 二叉搜索树中的众数、236. 二叉树的最近公共祖先

530. 二叉搜索树的最小绝对差 1. LeetCode链接 力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 2. 题目描述 3. 解法 中序遍历&#xff0c;记录前一个指针&#xff0c;并记录前一个指针和当前指针的绝对差值。递归。 class Solution { public:Tre…

Javascript 循环结构while do while for实例讲解

Javascript 循环结构while do while for实例讲解 目录 Javascript 循环结构while do while for实例讲解 一、while语句 二、do…while语句 三、for循环 疑难解答 我们从上一节课知道&#xff0c;JavaScript循环结构总有3种&#xff1a; &#xff08;1&#xff09;while语…