`
128kj
  • 浏览: 603929 次
  • 来自: ...
社区版块
存档分类
最新评论

HTML5 Canvas学习笔记(1)处理鼠标事件

阅读更多
    一直在学习HTML5 Canvas相关内容,游戏,动画,水平还很低,于是想写一些笔记,代码可能不全是我自已的,感谢他们。
效果图:

点击看效果:http://www.108js.com/article/canvas/1/index.html

欢迎访问博主的网站:http://www.108js.com

一、HTML代码:
<!DOCTYPE html>
<html lang="zh" >
    <head>
        <meta charset="gbk" />
        <title>HTML5 Canvas中处理鼠标事件</title>
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
        <div class="container">
            <canvas id="scene" width="600" height="400"></canvas>
        </div>
    
    </body>
</html>

二、JS代码:script.js
var canvas, ctx;
var circles = [];//所有的圆
var selectedCircle;//选中的圆
var hoveredCircle;//滑过的圆
//圆对象
function Circle(x, y, radius){
    this.x = x;
    this.y = y;
    this.radius = radius;
}

//清除canvas
function clear() {
    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}

//画圆
function drawCircle(ctx, x, y, radius) {
    ctx.fillStyle = 'rgba(255, 35, 55, 1.0)';
    ctx.beginPath();
    ctx.arc(x, y, radius, 0, Math.PI*2, true);
    ctx.closePath();
    ctx.fill();
}

//画场景
function drawScene() {
    clear();
    ctx.beginPath();
    ctx.fillStyle = 'rgba(255, 110, 110, 0.5)';
    ctx.moveTo(circles[0].x, circles[0].y);
    for (var i=0; i<circles.length; i++) {
        ctx.lineTo(circles[i].x, circles[i].y);
    }
    ctx.closePath();
    ctx.fill();
    ctx.lineWidth = 5;
    ctx.strokeStyle = 'rgba(0, 0, 255, 0.5)';
    ctx.stroke(); // 画边界,用直线连接所有圆心

    //画出所有的圆,滑过的圆半径稍大
    for (var i=0; i<circles.length; i++) {
        drawCircle(ctx, circles[i].x, circles[i].y, (hoveredCircle == i) ? 25 : 15);
    }
}

//初始化
window.onload=function(){
    canvas = document.getElementById('scene');
    ctx = canvas.getContext('2d');

    var circleRadius = 15;//每个小圆的半径
    var width = canvas.width;
    var height = canvas.height;

    var circlesCount = 7; // 圆的数目
    for (var i=0; i<circlesCount; i++) {
        var x = Math.random()*width;//随机的圆心坐标
        var y = Math.random()*height;
        circles.push(new Circle(x,y,circleRadius));
    }

    //鼠标按下事件,这是传统的事件绑定,它非常简单而且稳定,适应不同浏览器.e表示事件,this指向当前元素.
   //但是这样的绑定只会在事件冒泡中运行,捕获不行.一个元素一次只能绑定一个事件函数.
    canvas.onmousedown =function(e) {
       var e = window.event || e
       var rect = this.getBoundingClientRect();
       var mouseX =e.clientX - rect.left;//获取鼠标在canvsa中的坐标
       var mouseY =e.clientY - rect.top;
        for (var i=0; i<circles.length; i++) { //检查每一个圆,看鼠标是否落在其中
            var circleX = circles[i].x;
            var circleY = circles[i].y;
            var radius = circles[i].radius;
             //到圆心的距离是否小于半径
            if (Math.pow(mouseX-circleX,2) + Math.pow(mouseY-circleY,2) < Math.pow(radius,2)) {
                selectedCircle = i;//选中此圆
                break;
            }
        }
    }

     //鼠标移动
     canvas.onmousemove=function(e) {
       var e = window.event || e
       var rect = this.getBoundingClientRect();
       var mouseX =e.clientX - rect.left;//获取鼠标在canvsa中的坐标
       var mouseY =e.clientY - rect.top;

        if (selectedCircle != undefined) {

            var radius = circles[selectedCircle].radius;
            circles[selectedCircle] = new Circle(mouseX, mouseY,radius); //改变选中圆的位置
        }

        hoveredCircle = undefined;
        for (var i=0; i<circles.length; i++) { // 检查每一个圆,看鼠标是否滑过

            var circleX = circles[i].x;
            var circleY = circles[i].y;
            var radius = circles[i].radius;
            if (Math.pow(mouseX-circleX,2) + Math.pow(mouseY-circleY,2) < Math.pow(radius,2)) {
                hoveredCircle = i;
                break;
            }
        }
    }

   //鼠标松开
   canvas.onmouseup =function(e) {
        selectedCircle = undefined;
    };

    setInterval(drawScene, 30);
}

源码请下载。
  • 大小: 5.9 KB
1
0
分享到:
评论
1 楼 HelloSummerR 2016-03-23  
圆心的位置是随机的,于是圆的部分会落到canvas外,那样就显示不了了,博主这边应该可以再完善一下~

相关推荐

    HTML5 Canvas学习笔记(6)拼图游戏(数字版)

    在“HTML5 Canvas学习笔记(6)拼图游戏(数字版)”这篇博文中,作者分享了如何利用Canvas构建一个数字拼图游戏。下面我们将详细探讨这个知识点。 1. **HTML5 Canvas基础**: - Canvas是一个基于矢量图形的画布元素...

    《HTML5 Canvas学习笔记(10)》数钱数到手抽筋

    这篇名为“HTML5 Canvas学习笔记(10) - 数钱数到手抽筋”的博客文章,很可能是讲解如何使用Canvas来模拟数钱动画或游戏的教程。在Canvas中实现这样的功能,需要掌握以下几个关键知识点: 1. **Canvas基本概念**:...

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

    `jb51.net.txt`、`去脚本之家看看.url`等可能是资源链接或笔记,对理解粒子云特效的实现帮助较小,但可能提供了学习资源。 总的来说,通过HTML5 canvas和JavaScript,我们可以创造出各种各样的视觉效果,包括鼠标...

    html5 canvas鼠标点击液体波浪动画效果.zip

    1. **HTML5 Canvas**: HTML5 Canvas元素提供了一个二维绘图上下文,通过JavaScript API来绘制图形。在这个项目中,开发者使用canvas元素来创建一个画布,然后在上面绘制波浪动画。 2. **JavaScript**: 动画效果的...

    HTML5 Canvas在线书法练字代码.zip

    总的来说,这个项目融合了HTML5 Canvas的绘图能力,jQuery的事件处理和DOM操作,以及CSS的视觉呈现,提供了一个互动式的在线书法练习环境。用户可以在浏览器中体验书法的乐趣,而开发者则通过这些技术实现了数字化的...

    html5 canvas纸飞机跟随鼠标飞行动画特效.zip

    "html5 canvas纸飞机跟随鼠标飞行动画特效.zip"是一个利用HTML5 Canvas和jQuery实现的互动动画示例,它展示了如何通过JavaScript编程使纸飞机跟随用户的鼠标移动。这个特效代码适用于那些想要为网站添加趣味性和互动...

    Html5 Canvas绘制火苗鼠标跟随动画.rar

    它涉及到鼠标事件处理、图形绘制、动画制作等多个前端开发的关键技术,对于提升网页交互体验和学习Web开发技巧都非常有帮助。通过深入研究和修改这个代码,你不仅可以掌握这些技术,还能激发创新思维,设计出更多...

    html5 canvas跟随鼠标移动的光线动画特效.zip

    这个特效代码示例不仅展示了HTML5 Canvas的基础用法,还结合了jQuery的事件处理,是学习和实践前端动画技术的好材料。通过下载并研究`index.html`和`js`文件,你可以深入了解这些技术的应用,并可能进一步修改和扩展...

    html5 canvas粒子旋转跟随鼠标光标动画特效.zip

    在这个“html5 canvas粒子旋转跟随鼠标光标动画特效.zip”压缩包中,包含了一个利用HTML5 Canvas和jQuery实现的粒子跟随鼠标光标的特效。这个特效能够吸引用户注意力并增加网站的互动性。 首先,`index.html`是项目...

    HTML5 Canvas鼠标绘制银河系特效.zip

    至于jQuery,这个JavaScript库简化了DOM操作,事件处理和动画制作。在这个项目中,jQuery可能被用来: 1. `$(document).ready(function(){})`:页面加载完成后执行的代码块,确保所有DOM元素都已加载。 2. `$('...

    HTML5 Canvas眼睛眼珠跟随鼠标转动特效.zip

    jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理和动画制作。在这个特效中,jQuery可能被用来监听鼠标的移动事件(`mousemove`),并获取鼠标的当前位置。然后,通过JavaScript计算眼珠应该移动到的新...

    HTML5 Canvas樱花树木特效.zip

    6. **jQuery库的结合**:虽然主要依赖于Canvas,但可能也使用了jQuery库来简化DOM操作,如元素选择、事件处理等,使得代码更简洁。 7. **CSS特效**:尽管主要的视觉效果由Canvas提供,但可能还结合了CSS来设置容器...

    html5 canvas鼠标点击拖动粒子动画特效.zip

    2. 鼠标事件处理: 为了实现鼠标点击拖动的效果,我们需要监听`mousedown`、`mousemove`和`mouseup`等鼠标事件。当鼠标按下时记录初始位置,移动时更新粒子的位置,松开时停止移动。这通常通过JavaScript的事件绑定...

    HTML5 Canvas鼠标光标星星跟随动画特效.zip

    在这个“HTML5 Canvas鼠标光标星星跟随动画特效”中,我们主要探讨的是如何利用Canvas API实现一个动态效果,即星星跟随鼠标的光标移动。 首先,`index.html`文件是整个网页的结构基础,它包含了HTML元素,如`...

    H5 Canvas鼠标粒子交互式特效.zip

    jQuery是一个广泛使用的JavaScript库,它可以简化DOM操作、事件处理和动画效果。在这个特效中,jQuery可能被用来绑定事件监听器,如`$(document).mousemove(function(event) {...})`,以及执行复杂的动画效果。 CSS...

    html5 canvas鼠标圆点粒子交互式动画特效.zip

    首先,我们需要理解jQuery,这是一个广泛使用的JavaScript库,简化了DOM操作、事件处理和动画效果。在这个项目中,jQuery用于监听鼠标的移动事件,以便根据鼠标位置更新粒子的位置和行为。 接着,我们要了解jQuery...

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

    jQuery库可能被用来简化DOM操作和事件处理。`jquery插件`和`jquery特效`标签暗示了在这个项目中,jQuery可能被用于添加额外的功能或优化性能。例如,使用`.on()`方法绑定事件监听器,或者使用`.animate()`方法创建...

    HTML5 Canvas电子杂志鼠标翻书动画代码.zip

    jQuery是一个流行的JavaScript库,它简化了DOM操作,事件处理,动画以及Ajax交互,使得开发者能够更高效地编写JavaScript代码。 首先,我们来看看`index.html`文件。这个文件是网页的主体部分,包含了HTML结构和...

    html5 canvas跟随鼠标光标移动出现的圆点泡泡动画特效.zip

    在这个"html5 canvas跟随鼠标光标移动出现的圆点泡泡动画特效.zip"中,我们可以深入理解Canvas如何与JavaScript结合,实现动态视觉效果。 首先,`index.html`是整个网页的入口文件,它会引入必要的脚本和样式资源。...

Global site tag (gtag.js) - Google Analytics