`

Canvas判断区间点击生效

 
阅读更多 
<!doctype html>
<html>
<head></head>
<body>
<canvas id="canvas" width="500" height="500" style = "border:1px solid red"></canvas>
<script>
var rect={x:100,y:100,w:40,h:20};//定义要画的矩形的位置属性
var canvas=document.getElementById('canvas');
var cxt=canvas.getContext('2d');
cxt.fillRect(rect.x,rect.y,rect.w,rect.h);//绘制矩形
canvas.onclick=function(e){//给canvas添加点击事件
    e=e||event;//获取事件对象
    //获取事件在canvas中发生的位置
    var x=e.clientX-canvas.offsetLeft;
    var y=e.clientY-canvas.offsetTop;
    //如果事件位置在矩形区域中
    if(x>=rect.x&&x<=rect.x+rect.w&&y>=rect.y&&y<=rect.y+rect.h){
        window.open('链接地址');//打开指定链接
    }
}
</script>
</body>
</html>
分享到：
| 数据仓库与数据集市
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Canvas 鼠标点击生成小圆点

    当用户点击Canvas时，会触发`mousedown`事件，我们可以在这个事件的回调函数中处理点击逻辑： ```javascript canvas.addEventListener('mousedown', (event) =&gt; { // 获取鼠标在Canvas上的坐标 const rect = ...

    前端canvas案例，判断鼠标位置是否在物体内。html+js实现。可直接运行

    canvas案例，判断鼠标位置是否在物体内。html+js实现。可直接运行

    前端canvas 判断两个物体是否碰撞 html+js

    内容概要：canvas 判断两个物体是否碰撞 实现技术：htm+js实现。双击浏览器打开即可看效果 能学到什么：canvas技术 适用人群： 前端canvas学习新手

    canvas类似画板的功能，在地图上选择区域。判断重合、覆盖、交叉。

    canvas类似画板的功能，在地图上选择区域。判断重合、覆盖、交叉。 可回显

    html5中监听canvas内部元素点击事件的三种方法

    角度法基于几何学原理，通过计算点与多边形顶点构成的夹角之和来判断点击点是否在多边形内部。该方法适用于凸多边形，实现步骤如下： 1. 获取点击坐标点。 2. 计算点击点与多边形各顶点构成的向量。 3. 使用向量...

    微信小程序用canvas实现区间滑动选取，最小值最大值wx-canvas--master.zip

    在这个“微信小程序用canvas实现区间滑动选取，最小值最大值wx-canvas--master.zip”项目中，我们可以看到如何利用HTML5的Canvas API在微信小程序中创建一个区间滑动选择器，用于设定并展示最小值和最大值。...

    前端canvas例子，如何获取鼠标在canvas中的位置。

    canvas例子，如何获取鼠标在canvas中的位置。html+js。下载双击即可在浏览器运行，F12可查看源代码。

    canvas-点击四周彩球和点击出现小心心.rar

    在本压缩包“canvas-点击四周彩球和点击出现小心心.rar”中，包含两个HTML文件，它们都涉及到了HTML5的Canvas元素及其相关的JavaScript编程技术。Canvas是HTML5的一个重要特性，允许开发者在网页上绘制图形，实现...

    HTML5 Canvas点击泡沫横飞特效.zip

    在这个“HTML5 Canvas点击泡沫横飞特效”中，我们看到的是一个利用JavaScript和Canvas API创建的互动动画，当用户点击网页时，就像在水面上弹起无数彩色的气泡，给人以生动活泼的视觉体验，类似于放烟花的效果。...

    canvas 实现点击画线/打点画闭合多边形，靠近元素高亮.html

    canvas 实现点击画线/打点画闭合多边形，靠近元素高亮

    HTML5-Canvas点击泡沫横飞特效.rar

    HTML5-Canvas点击泡沫横飞特效.rar HTML5-Canvas点击泡沫横飞特效.rar HTML5-Canvas点击泡沫横飞特效.rar HTML5-Canvas点击泡沫横飞特效.rar HTML5-Canvas点击泡沫横飞特效.rar HTML5-Canvas点击泡沫横飞特效.rar ...

    HTML5 canvas鼠标点击的粒子云特效

    在这个"HTML5 canvas鼠标点击的粒子云特效"项目中，我们将探讨如何利用canvas和JavaScript来创建一个互动的粒子系统，当用户点击时产生粒子云的特效。 首先，我们需要理解canvas的基本用法。HTML5的canvas是一个可...

    html5 canvas点击刷新验证码提交表单

    4. **点击刷新验证码**：为Canvas元素添加点击事件监听器，当用户点击时，刷新验证码的显示。 ```javascript canvas.addEventListener('click', function() { drawCaptcha(); }); ``` 5. **验证用户输入**：当...

    html5 canvas鼠标点击变化圆形泡沫动画特效

    在这个“html5 canvas鼠标点击变化圆形泡沫动画特效”中，我们主要探讨以下几个核心知识点： 1. **Canvas元素**：HTML5引入的 `&lt;canvas&gt;` 元素用于在网页上绘制2D图形。通过JavaScript，我们可以获取到`canvas`的`...

    canvas点击吹风

    "canvas点击吹风"这个标题和描述可能指的是一个交互式的Canvas应用，其中用户可以通过点击屏幕来触发某种风吹动的效果。这种效果可能常见于游戏、模拟器或者动态展示等场景，给用户带来更直观的互动体验。 1. **...

    HTML5 Canvas鼠标点击页面光点放射动画特效

    在这个“HTML5 Canvas鼠标点击页面光点放射动画特效”中，我们看到的是一个利用Canvas API创建的视觉效果，当用户点击页面时，光点会从点击的位置向四面八方放射出，模拟出类似放烟花或泡沫横飞的动态场景。...

    Canvas点击跟随鼠标移动特效.zip

    这个特效允许用户在Canvas上点击后，生成的图形或效果会跟随鼠标的移动轨迹，创造出动态的光线动画。 首先，我们要理解Canvas的基本使用。在HTML中，我们通过`&lt;canvas&gt;`标签来创建一个画布，然后通过JavaScript的...

    HTML5 canvas仿屏保动态管道

    此外，为了增加真实感，可能还包含了一些额外的特性，比如随机的颜色变化、管道的弯曲或扭曲效果、碰撞检测以及可能的用户交互，例如鼠标悬停或点击触发特定行为。 在压缩包中的"guandao"文件可能包含了项目的源...

    HTML5_canvas绘制动态树视图 类似结构图.rar

    4. **交互功能**：点击节点可以触发新增或删除操作，需要在Canvas上监听鼠标事件，并更新树结构。 5. **动画效果**：新增或删除节点时，可能有淡入淡出、移动等动画效果，以提升用户体验。 6. **性能优化**：对于...

    html5 canvas动画 人物怪物移动 鼠标点击控制

    在这个“html5 canvas动画 人物怪物移动 鼠标点击控制”的实例中，我们将深入探讨如何利用HTML5 Canvas技术和JavaScript实现一个简单的游戏场景，其中人物或怪物能够根据用户的鼠标点击进行移动。 首先，Canvas元素...

Magicbox
Global site tag (gtag.js) - Google Analytics