128kj
- 浏览: 583745 次
- 来自: ...
-
文章分类
最新评论
-
lgh1992314：
相同的元素呢
一种离散化方法 -
HelloSummerR：
圆心的位置是随机的，于是圆的部分会落到canvas外，那样就显 ...
HTML5 Canvas学习笔记(1)处理鼠标事件 -
hlstudio：
好久没见到sokuban了，这有个java版的，带源码，可以参 ...
求推箱子的最小步数（java) -
肖泽文：
太好了，谢谢你。。有中文注释！
HTML5 推箱子游戏过关演示动画 -
swm8023：
删除操作，将最后一个叶子节点插入后也有可能上浮吧
彻底弄懂最大堆的四种操作(图解+程序)（JAVA）
一直在学习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);
}
源码请下载。
效果图：
点击看效果：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);
}
源码请下载。
1
顶
顶
0
踩
踩
分享到：
发表评论
-
HTML5 Canvas 旋转的“金字塔”
2015-12-24 13:25 10023效果图： 效果链接：http://www.108js.co ... -
HTML5 canvas 飘扬的五星红旗
2015-12-21 08:56 2366效果图： 效果链接： http://www.108js.co ... -
简单HTML5 Canvas Arrow旋转动画
2015-05-22 08:38 12895效果图： 效果链接： http://www.108js.c ... -
HTML5 Canvas简单透明文字动画
2015-05-22 08:17 7385效果图： 效果链接： http://www.108js.c ... -
一个非常好的HTML5 Canvas焰火效果
2014-12-28 15:56 1579效果图： 点击观看效果：http://www.108js. ... -
《HTML5 Canvas学习笔记(10)》数钱数到手抽筋
2014-12-21 14:01 3200网上看到一个游戏《数钱数到手抽筋》简单的模仿一下。 鼠标拖动或 ... -
HTML5 Canvas学习笔记(9)俄罗斯方块游戏之三（游戏面板）
2014-07-05 07:13 1371接上一遍《HTML5 Canvas学习笔记(8)俄罗斯方块游戏 ... -
HTML5 Canvas学习笔记(8)俄罗斯方块游戏之二（方块）
2014-07-04 13:08 1661接上一遍《HTML5 Canvas学习笔记(7)俄罗斯方块游戏 ... -
HTML5 Canvas学习笔记(7)俄罗斯方块游戏之一（色块）
2014-07-04 10:53 2333在网上看到一个俄罗斯方块游戏: http://www.108j ... -
HTML5 Canvas学习笔记(6)拼图游戏（数字版）
2014-06-28 17:38 2487今天网上发现了一段代码，只有界面，很不错，学习了并完成了逻辑。 ... -
HTML5 Canvas学习笔记(5)游戏得分动画
2014-06-26 17:11 1075效果图： 点击查看效果： http://www.108js ... -
HTML5 Canvas学习笔记(4)游戏界面的淡入淡出
2014-06-26 11:26 1931效果图： 点击看效果： http://www.108js. ... -
HTML5 Canvas学习笔记(3)加载游戏/动画音乐
2014-06-25 11:20 1660先要准备应付各种浏览器的声音文件，什么.mp3,.ogg ... -
HTML5 Canvas学习笔记(2)菜单高亮显示与像素字体
2014-06-23 23:13 1901看到哪，学到哪，记到哪。见谅，这些笔记就没有顺序和知识上的连贯 ... -
javaScript 广度优先搜索法"自动推箱子"（二）
2014-06-12 09:57 1292接上文： javaScript 广度优先搜索法"自动 ... -
javaScript 广度优先搜索法"自动推箱子"（一）
2014-06-12 09:45 1780用JS写了一个“广度优先搜索法”自动推箱子，理论上无论 ... -
HTML5 Canvas简单淡入淡出游戏启动界面
2014-06-05 12:22 2216欢迎访问博主的网站：http://www.108js.com ... -
HTML5 Canvas贝塞尔曲线动画
2014-05-22 08:35 1398点击这里可以查看动画效果： http://www.108js. ... -
javascript for语句最佳实践
2014-05-22 08:22 542当执行冗长的for语句时，要保持语句块的尽量简洁，例如： 糟 ... -
获取鼠标在HTML5 Canvas中的坐标
2014-05-21 16:43 2409<!DOCTYPE HTML> <html& ...
相关推荐
html5 canvas粒子背景跟随鼠标移动效果代码 html5 canvas粒子背景跟随鼠标移动效果代码
一款简单的html5 canvas绘制鼠标跟随线条动画特效，线条不断变换颜色，跟随鼠标光标移动轨迹运行。
Android—BitMap与Canvas学习笔记
NULL 博文链接：https://128kj.iteye.com/blog/2085698
《HTML 5 Canvas基础教程》从HTML5和JavaScript（以及jQuery）的基础知识讲起，全面介绍了HTML5Canvas的各种特性，包括渲染上下文、坐标系统、绘制图形、保存和恢复画布状态，以及变形、合成、处理图像和视频等，让...
html5 canvas鼠标点击水珠爆炸动画特效
鼠标在canvas上移动，显示鼠标位置
canvas例子，如何获取鼠标在canvas中的位置。html+js。下载双击即可在浏览器运行，F12可查看源代码。
一个canvas制作的人物移动，鼠标控制移动实例
html5 canvas悬浮泡泡鼠标滑过泡沫动画特效
一款趣味性十足的HTML5 Canvas眼睛眼珠跟随鼠标转动特效，仿佛有无数只眼睛盯着鼠标指针方向，还可以拖动眼睛进行碰撞哦。
《HTML5 Canvas基础教程》从HTML5和Javaｓｃｒｉｐｔ(以及jQuery)的基础知识讲起，全面介绍了HTML5 Canvas的各种特性，包括渲染上下文、坐标系统、绘制图形、保存和恢复画布状态，以及变形、合成、处理图像和视频等...
html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的星星特效html5 canvas飘洒的...
HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas核心技术源码技术代码、图形、动画与游戏开发。 Canvas开发、入门学习Canvas技术代码。 HTML5 Canvas...
html5 canvas 播放视频html5 canvas 播放视频
HTML5 Canvas泡泡悬浮鼠标特效是一款鼠标滑过泡沫动画特效下载。
十分好看的一款HTML5 Canvas鼠标移动圆点粒子跟随动画特效，鼠标移动圆点粒子出现并跟随鼠标指针移动，不动时圆点粒子则渐渐消失。
HTML5 Canvas眼睛跟随鼠标特效是一款一千只眼睛盯着你特效，通过鼠标移动控制眼睛方向位置效果。
炫酷的HTML5 canvas效果展示， 代码结构简单，有利于开发者参考使用。