canvas 事件

最新推荐文章于 2024-06-05 14:45:33 发布
最新推荐文章于 2024-06-05 14:45:33 发布
阅读量327 收藏
点赞数 1
<!DOCTYPE html>  
<html>  
<head>  
<title>HTML5 Canvas Demo</title>  
<!--[if IE]>  
  <script type="text/javascript" src="excanvas.js"></script>  
<![endif]-->  
<script>  
//初始时画小人   
window.οnlοad=function() {   
    var canvas = document.getElementById('myCanvas');   
    if (canvas.getContext){   
        var ctx = canvas.getContext('2d');   
        //画左边头   
        ctx.fillStyle='#1c94c4';   
        ctx.beginPath();   
        ctx.arc(105,75,35,Math.PI/2,Math.PI*1.5,false);   
        ctx.fill();   
        //画右边头           
        ctx.beginPath();   
        ctx.arc(110,75,35,Math.PI*1.5,Math.PI/2,false);   
        ctx.fill();   
        //画躯干          
        ctx.beginPath();   
        ctx.rect(80,120,55,100);   
        ctx.fill();   
        //画左臂          
        ctx.beginPath();   
        ctx.rect(25,140,50,20);   
        ctx.fill();   
        //画右臂              
        ctx.beginPath();   
        ctx.rect(140,140,50,20);   
        ctx.fill();   
        //画左腿              
        ctx.beginPath();   
        ctx.rect(80,225,20,80);   
        ctx.fill();   
        //画右腿          
        ctx.beginPath();   
        ctx.rect(115,225,20,80);   
        ctx.fill();   
        //添加事件响应   
        canvas.addEventListener('click', function(e){   
            p = getEventPosition(e);   
            reDraw(p,ctx);   
        }, false);   
    }   
}   
//得到点击的坐标   
function getEventPosition(ev){   
    var x, y;   
    if (ev.layerX || ev.layerX == 0) {   
        x = ev.layerX;   
        y = ev.layerY;   
    }else if (ev.offsetX || ev.offsetX == 0) { // Opera   
        x = ev.offsetX;   
        y = ev.offsetY;   
    }   
    return {x: x, y: y};   
}   
//重绘   
function reDraw(p,ctx){   
    arr = [   
        {x:105, y:75, width:Math.PI/2, height:Math.PI*1.5},   
        {x:110, y:75, width:Math.PI*1.5, height:Math.PI/2},   
        {x:80, y:120, width:55, height:100},   
        {x:25, y:140, width:50, height:20},   
        {x:140, y:140, width:50, height:20},   
        {x:80, y:225, width:20, height:80},   
        {x:115, y:225, width:20, height:80}        
    ]   
    //保存序号的数组，这样，即使一次点多个，也能保存——本例中只能每次点一个   
    var whichObject = [];   
    for(var i=0; i < arr.length; i++){   
        //用圆画头   
        if(i<2){   
            ctx.fillStyle='#1c94c4';   
            ctx.beginPath();   
            ctx.arc(arr[i].x,arr[i].y,35,arr[i].width,arr[i].height,false);   
            ctx.fill();   
            if(p && ctx.isPointInPath(p.x, p.y)){   
                whichObject.push(i);   
                //修改点中区域的颜色   
                ctx.fillStyle='#F39814';   
                ctx.beginPath();   
                ctx.arc(arr[i].x,arr[i].y,35,arr[i].width,arr[i].height,false);   
                ctx.fill();   
            }   
        //用矩形画躯干   
        }else{   
            ctx.fillStyle='#1c94c4';   
            ctx.beginPath();   
            ctx.rect(arr[i].x,arr[i].y, arr[i].width,arr[i].height);   
            ctx.fill();   
            if(p && ctx.isPointInPath(p.x, p.y)){   
                whichObject.push(i);   
                ctx.fillStyle='#F39814';   
                ctx.beginPath();   
                ctx.rect(arr[i].x,arr[i].y, arr[i].width,arr[i].height);   
                ctx.fill();   
            }   
        }   
    }   
    //显示点击了哪个部分   
    //alert("click:" + whichObject[0]);   
}    
</script>  
</head>  
<body>  
<div style="margin-left:30px;">  
<canvas id="myCanvas" width="600" height="500" style="border: 5px blue solid"></canvas>  
<br /><br />  
</div>  
</body>  
</html>  
风的中心
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如何在Canvas中添加事件
weixin_33881753的博客
05-20 2590
作为一个前端，给元素添加事件是一件司空见惯的事情。可是在Canvas中，其所画的任何东西都是无法获取的，更别说添加事件，那么我们对其就束手无策了吗？当然不是的！我们在平时项目中肯定都用过许多Canvas的框架，我们发现事件在这些框架中已经使用的十分成熟了，而且并没有出现特别严重的问题。那么我们可以肯定的是，事件在Canvas中并不是一个无法触及的事情。一个傻瓜式的方式我们都知道一个元素在触发一个事...
详解Canvas事件绑定
09-28
【Canvas事件绑定详解】 在HTML5中，Canvas提供了一个强大的绘图环境，允许开发者动态绘制图形、图片等。然而，由于Canvas本质上是一个位图，它并不像DOM元素那样可以直接监听和处理事件。当我们想要在Canvas上实现...
canvas点击事件
weixin_30887919的博客
09-26 564
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>canvas点击事件</title> </head> <body> <canvas id="myCanvas"...
前端canvas绘图，利用canvas在图片上面绘制标记以及给canvas添加点击事件。
最新发布
Office文件在线预览解析
06-05 350
首先需要一个承载的核心画布。
html canvas点击事件,一个不错的HTML5 Canvas多层点击事件监听实例
weixin_39628594的博客
06-05 148
最近写一个HTML5的游戏框架。今天写到一个多层点击事件的监听。觉得还是挺好玩的。于是把它从模块中抽化出来了。以下代码只是一些思想。具体实现肯定不是那么丑陋复制代码代码如下:Document.box > canvas {position: absolute;}function getRect(obj) {var x1 = obj.offsetLeft;var y1 = obj.offsetT...
canvas添加事件
weixin_30896511的博客
01-17 144
https://blog.csdn.net/xundh/article/details/78722744 转载于:https://www.cnblogs.com/lianxisheng/p/10280923.html
canvas事件嵌套处理&页面布局
03-13
名称：Canvas 事件嵌套&页面布局资源包 适用平台：UniApp 主要功能：使用Canvas进行页面布局，实现元素嵌套事件管理 主要特性： 利用canvas提升页面渲染性能。 参考mini-program-rc实现页面布局，并借助...
HTML5 Canvas的事件处理介绍
01-21
比如有一个元素，可以直接用jquery增加click事件$(‘#p1’).click(function(){…})。然而这种DOM处理方法在HTML5的Canvas里不再适用，Canvas使用的是另外一套机制，无论在Canvas上绘制多少图形，Canvas都是一个整体...
分享一个在canvas中的点击事件
柠檬说葡萄你好酸
07-29 1万+
网上看到许多写的canvas中事件，不胜其烦，觉得写的也不知道是什么 今天思考了一个分享给大家，欢迎指导改进 html &amp;amp;amp;lt;body&amp;amp;amp;gt; &amp;amp;amp;lt;canvas id=&amp;amp;quot;mycanvas&amp;amp;quot; width=&amp;amp;quot;500&amp;amp;quot; height=&amp;amp;q
一个不错的HTML5 Canvas多层点击事件监听实例
09-28
写到一个多层点击事件的监听。觉得还是挺好玩的。于是把它从模块中抽化出来了，喜欢的朋友可以参考下
html canvas 点击事件实现
qq_24902851的博客
08-29 987
canvas实现点击事件
为canvas绘制的多个图形设置点击事件
热门推荐
MooreLxr的博客
08-03 2万+
一、给Canvas元素绑定事件基础知识 由于事件只能达到Canvas元素这一层，所以，如果想进一步深入，识别点击发生在Canvas内部的哪一个图形上，就需要增加代码来进行处理。 基本思路是：给Canvas元素绑定事件，当事件发生时，检查事件对象的位置，然后检查哪些图形覆盖了该位置。只要鼠标点击在这个范围里，就可以视为点击了该矩形，也就可以手动触发矩形需要处理的点击事件。 第一步：封装一个获取...
在canvas上通过鼠标左键点击获取几个点（直角坐标），鼠标右键结束点击事件
weixin_70245286的博客
04-14 773
【代码】在canvas上通过鼠标左键点击获取几个点（直角坐标），鼠标右键结束点击事件。
HTML5 Canvas的点击区域检测以及如何监听Canvas上各种图形的点击事件
細水、長流√的专栏
03-01 4791
作者：Anton Lavrenov你是否需要一个在Canvas画布上的任意图形的点击事件监听（译者注：类似于任意一个DOM元素的点击监听事件）？但是Canvas没有此类监听器的API。你只能在整个Canvas画布上进行事件监听，而不是在画布上的任意一个元素。我将描述2种方法来解决这个问题。注意！我将不会使用，因为现在（作者写文章时间为2017年）这个api是不稳定的，并且并没有被完整的支持。但是你可以了解下。让我们从简单的canvas画布图形开始。假设我们在一个页面上绘制了几个圆圈（circle）。
fabric.js 给canvas中的元素中的按钮绑定点击事件
weixin_42579969的博客
01-06 672
fabric.js 中可以通过在 canvas 元素上使用 "click" 事件监听器来为 canvas 中的元素绑定点击事件。 例如，假设你已经在 canvas 中添加了一个按钮元素，你可以这样绑定点击事件： canvas.on('mouse:down', function(options) { if (options.target) { // 在这里处理按钮点击事件 } });...
canvas事件绑定
06-02
在canvas中，可以通过以下方式绑定事件： 1. 绑定鼠标事件： ```javascript canvas.addEventListener('mousemove', function(event) { // 处理鼠标移动事件 }); canvas.addEventListener('mousedown', function...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值