2.1使用canvas画个圆，每次点击画布弹出提示框

最新推荐文章于 2022-05-23 13:43:10 发布
最新推荐文章于 2022-05-23 13:43:10 发布
阅读量1.7k 收藏 2
点赞数
分类专栏： js 文章标签： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_38369460/article/details/79826536
版权
<body>
<canvas id="canvas" width="500" height="500" style="border:dashed 1px"></canvas>
</body>
<script>
var canvas=document.getElementById('canvas');
var ctx=canvas.getContext('2d')
var ball=function(x,y,r){
this.x=x;
this.y=y;
this.r=r;
this.draw=function(){
    ctx.beginPath();
ctx.arc(this.x,this.y,this.r,0,2*Math.PI);
ctx.stroke();
};

};
var ball=new ball(100,100,20);//创建圆的对象实例
ball.draw(); //画圆
canvas.addEventListener('mousedown',function(){//添加鼠标点击事件
alert('mouse down') //弹出文字
})

</script>

效果如图：

sinat_38369460
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Web-拾贝
oscar999的专栏
03-10 1万+
JavaScript MVC框架PK：Angular、Backbone、CanJS与Emberhttp://www.csdn.net/article/2013-04-25/2815032-A-Comparison-of-Angular-Backbone-CanJS-and-Ember一个好的js method 方法查询的网站， 有browser兼容的介绍http://help.dottoro.co...
使用threejs开发微信小游戏全过程
同是天涯程序猿
03-20 6517
我年前至今至今对微信小游戏尝了尝鲜，从开发到上线全流程做了一款小游戏。特做个记录分享给大家。 ​ 长文警告！全文共8527字，阅读此文会耗费不少时间。可收藏备用查看。 小游戏目前只支持JavaScript一种语言，但JS的支持也并不完全，最主要的区别是小游戏BOM 和 DOM API，小游戏提供了canvas，支持2d和webgl，可操作性还是挺高的。需要注意的是小游戏可以同时创建多个...
基于HTML5 Canvas 实现弹出框
lhh_12345的博客
06-01 4491
用户鼠标移入时，有弹出框出现，这样的场景很常见。这在处理HTML元素实现时简单，但是如果是对HTML5 Canvas 构成的图形进行处理，这种方法不再适用，因为Canvas使用的是另外一套机制，无论在Canvas上绘制多少图形，Canvas都是一个整体。而图形本身实际都是Canvas的一部分，不可单独获取，所以也就无法直接给某个图形增加JavaScript事件。然而，在HT for Web中，这种
Android 图标上面添加提醒(一)使用Canvas绘制
844604778
08-21 269
在我们开发一些如通讯录、社交等应用或者应用添加新功能模块时，会考虑在对应的图标上加上未读信息的数量，或者是新功能提醒的图标，这样不占太大空间还能达到提示的目的. 之前在MMS分析部分，也有人问过我这种提醒的实现. 关于这种提醒的添加，我总结了下,有大概几种方法可以实现: 1. 在对应的布局放置TextView或者ImageView. 2. 用Canvas在原来Icon的bitmap基础上进行绘...
canvas绘制信息提示框
ZJF的博客
05-28 1944
需求场景：运维一个好早之前的项目，需要在通过iclient开发的地图上展示marker图标的同时，展示marker里的一些属性信息，没找到好用的api，所以就通过canvas自己来动态的画出来，画圆角矩形，再以marker方式添加到地图上，看起来还不错。其他gis框架有遇到差不多需求的，也可以使用这个方法来实现。 /** * 绘制提示框tooltips * @param text 文字内容 * @param fontsize 字体大小 * @param fontcolor 字体颜色 *
基于HTML5 Canvas 实现弹出框效果
09-28
主要介绍了基于HTML5 Canvas 实现弹出框效果,需要的朋友可以参考下
HTML5 Canvas气温折线图表 带Tooltip提示框
08-23
今天要给大家带来一款基于HTML5 Canvas的折线图表应用，它主要用来显示指定日期的气温变化趋势，当我们将鼠标滑过折线图上时，图表上即可显示一个Tooltip提示框，提示框中显示当前的天气状况及气温情况。当然这款HTML5图表也可以在其他地方使用。
Canvas详解
热门推荐
发果叁
05-23 3万+
一、canvas 简介 1.1 什么是 canvas？（了解） 是 HTML5 提供的一种新标签 <canvas></canvas> 英 ['kænvəs] 美 ['kænvəs] 帆布 画布 Canvas 是一个矩形区域的画布，可以用 JavaScript 在上面绘画。控制其每一个像素。 canvas 标签使用 JavaScript 在网页上绘制图像，本身不具备绘图功能。 canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 HTML5 之前的 web 页
canvas基础简单易懂教程（完结，多图）
qq_45562973的博客
04-14 1万+
Python微信订餐小程序课程视频 https://blog.csdn.net/m0_56069948/article/details/122285951 Python实战量化交易理财系统 https://blog.csdn.net/m0_56069948/article/details/122285941 目录* Canvas学习 + 一、 Canvas概述 - 1.1 Hello world - 1.2 Canvas的像素化 - 1.3 Canvas的动画思想 - 1.4 面向对象思维实现canvas动
后台管理项目总结三 富文本插件；弹出层的使用；定义参数对象；layui中的jump函数；
m0_55170432的博客
04-20 1503
--------------------- 文章类别 ------------------- 1.1 点击编辑按钮展示修改文章分类的弹出层 为编辑按钮添加 btn-edit 类名如下： <button type="button" class="layui-btn layui-btn-xs btn-edit" data-id=" {{$value.Id}}">编辑</button> 定义 修改分类 的弹出层： <!-- 修改分类的弹出层 -->
html5点击图片弹出详细信息特效
11-10
html5点击图片弹出详细信息特效
9种经典的tooltip信息提示框
11-01
经典的tooltip信息提示框，依赖于jq，方便易于维护，本文的tooltip信息提示框不借助任何插件,只要引入样式即可显示css3酷炫的效果。在手机浏览器、微信或app里面演示是完全没问题的。
利用html5的canvas写一个写字板弹框
web小白的博客
07-08 242
效果图 所用到的素材 代码块html <!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"&gt
canvas绘制一个可以让鼠标hover在点上的时候弹出小窗的折线图
zhq_zvik的博客
10-16 1975
<template> <div> <Card :type="3" :performanceData='performanceData' /> <div class="card-container"> <div class="card-title">周正确率走势</div> <...
canvas 多层弹框
上官hao的博客
06-08 915
思路是创建两个画布,隐藏弹出的画布,在基础画布点击元素时，创建一个矩形或圆形，判断点击位置是否在区域内，实现点击判断，初始化弹出层并控制弹出层显示/隐藏1：创建两个canvas画布HTML&lt;canvas id="worksite_schema" width="100" height="800"&gt;&lt;/canvas&gt; &lt;canvas id="detail_schema&a
使用canvas在图片上画圆圈，并可点击圆圈在圆圈下方画垂直线（适配移动端）
xuan的博客
08-07 2101
一、UI 二、实现 <div class="carBrightSpot"> <!-- 轮播图 --> <div class="block-swiper"> <div class="wrapper"> <swiper :options="swiperOption" id="sw...
canvas给图片画框框
weixin_43994675的博客
08-17 4171
<template> <div class="item-img"> <canvas id="myCanvas" width="1280" height="650"> Your browser does not support the HTML5 canvas tag. </canvas> </div> </template> <script> export default { data
canvas画布取消点击事件
最新发布
07-07
Canvas画布是一个HTML5元素，它提供了一种在网页上绘制图形的功能。如果你想要在Canvas上处理用户交互，并且希望取消某个特定区域的点击事件，你可以通过监听`click`事件并在事件处理函数中检查鼠标位置是否在你想要阻止点击的地方。 首先，你需要获取到Canvas的2D渲染上下文，然后创建一个矩形区域作为阻止点击的目标。在这个矩形区域内的点击事件将不会触发默认的行为： ```javascript var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); // 定义阻止点击的矩形区域 var blockedAreaRect = {x: 0, y: 0, width: 100, height: 100}; canvas.addEventListener('click', function(event) { var rect = canvas.getBoundingClientRect(); if (!rect || !rect.contains(event.clientX, event.clientY)) { // 如果鼠标不在阻止区域内，则执行常规处理逻辑 handleClick(event); } }, false); function handleClick(event) { // 这里是你原本的点击事件处理逻辑 } ``` 在这个例子中，当用户点击时，会先检查点击点是否在`blockedAreaRect`内，如果不在，就会调用`handleClick`函数。如果你想完全禁用Canvas的所有点击事件，可以设置阻止冒泡(`event.stopPropagation();`)和阻止默认行为(`event.preventDefault();`)。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值