`

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案例，判断鼠标位置是否在物体内。html+js实现。可直接运行

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

    Canvas 鼠标点击生成小圆点

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

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

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

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

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

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

    本文将探讨三种方法来监听Canvas内部元素的点击事件。 1. **像素法**： 像素检测法的核心思想是利用`getImageData()`方法获取Canvas的像素数据。首先，将Canvas上的图形离屏绘制并存储像素信息。当用户点击Canvas...

    微信小程序用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. **验证用户输入**：当...

    Canvas鼠标点击网页放烟花特效.zip

    在这个“Canvas鼠标点击网页放烟花特效”项目中，开发者利用Canvas API实现了一个交互式的烟花动画，当用户在网页上点击时，就会在鼠标点击的位置触发烟花爆炸的特效，为用户带来生动有趣的体验。 Canvas API主要由...

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

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

    canvas点击吹风

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

    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