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

128kj

浏览: 601189 次
来自: ...

最近访客更多访客>>

hcmfys

caizi12

sdtvyyb_007

hanqunfeng

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript
HTML5 动画游戏

html5 html javascript 游戏

一直在学习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);
}

源码请下载。

30303.zip (1.7 KB)
下载次数: 7

查看图片附件

1
顶

0
踩

分享到：

HTML5 Canvas学习笔记(2)菜单高亮显示与像 ... | javaScript 广度优先搜索法"自动推箱子" ...

2014-06-21 17:48
浏览 2987
评论(1)
分类:Web前端
查看更多

1 楼 HelloSummerR 2016-03-23

圆心的位置是随机的，于是圆的部分会落到canvas外，那样就显示不了了，博主这边应该可以再完善一下~

发表评论

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

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论