&>&&>&&>&&>&canvas做的点击鼠标移动，在鼠标周围随机颜色、大小、方向绘制五角星，漂亮.
canvas做的点击鼠标移动，在鼠标周围随机颜色、大小、方向绘制五角星，漂亮.
上传大小：3KB
canvas做的点击画布，鼠标移动，随鼠标移动，在鼠标周围(随机颜色、大小、方向、数量)绘制五角星，漂亮的游戏动画效果.
综合评分：5（1位用户评分）
所需积分：1
下载次数：8
审核通过送C币
创建者：hbwang_716
创建者：yp2008gf
创建者：luoruiyuan_1
课程推荐相关知识库
上传者其他资源上传者专辑
开发技术热门标签
VIP会员动态
您因违反CSDN下载频道规则而被锁定帐户，如有疑问，请联络:!
android服务器底层网络模块的设计方法
所需积分：0
剩余积分：720
您当前C币：0
可兑换下载积分：0
兑换下载分：
兑换失败，您当前C币不够，请先充值C币
消耗C币：0
你当前的下载分为234。
canvas做的点击鼠标移动，在鼠标周围随机颜色、大小、方向绘制五角星，漂亮.
会员到期时间：
剩余下载次数：
你还不是VIP会员
开通VIP会员权限，免积分下载
你下载资源过于频繁，请输入验证码
您因违反CSDN下载频道规则而被锁定帐户，如有疑问，请联络:!
若举报审核通过，可奖励20下载分
被举报人：
举报的资源分：
请选择类型
资源无法下载
资源无法使用
标题与实际内容不符
含有危害国家安全内容
含有反动色情等内容
含广告内容
版权问题，侵犯个人或公司的版权
*详细原因：之前那篇Canvas画图-鼠标涂鸦已经可以实现与Canvas的简单交互，这篇会介绍Canvas中实现交互性的一个重要方法isPointInPath。
Cavnas的确能实现很多很酷炫狂拽屌炸天的效果，但是交互性要差很多，简单的鼠标单击选中某个图形，都要花费一番周折。
Canvas只是一个dom节点，所有监听的事件都只能绑定在这个节点上，但是我们可能需要对Canvas上的某个元素进行操作。基本的原理就是事件还是绑定在Canvas上，通过判断点击发生的位置是否在Canvas中某个图形的路径内 (这里注意，我没有说是某个图形的区域内) ，从而进一步确定是在哪个图形上戳来戳去。
isPointInPath
为了让我们判断点击点到底是否在路径内，Canvas提供了 context.isPointInPath(x,y) 方法，参数自然是某个点的横竖坐标。
来个例子，先随便画三个矩形：
var rectList = [ [50,50,50,50], [120,120,80,60], [30,150,60,80] ];
var drawRect = function(x,y,w,h){
ctx.beginPath();
ctx.rect(x,y,w,h);
ctx.clearRect(0, 0,canvas.width(), canvas.height());
$.each(rectList, function(n,v){
drawRect(rectList[n][0],rectList[n][1],rectList[n][2],rectList[n][3]);
ctx.stroke();
另外再写个 getCanvasPoint 方法，主要把点击坐标换算成Canvas里面的坐标：
var getCanvasPoint = function(x,y) {
var canvasOffset = canvas.offset();
x: x - canvasOffset.left,
y: y - canvasOffset.top
是时候该 isPointInPath 方法登场，实现点中某个矩形的时候改变矩形边框的颜色
canvas.on(&mousedown&, function(e){
var point = getCanvasPoint(e.pageX, e.pageY);
$.each(rectList, function(n, v) {
drawRect(rectList[n][0],rectList[n][1],rectList[n][2],rectList[n][3]);
if(ctx.isPointInPath(point.x, point.y)){
moveItem =
startPos.x = point.x;
startPos.y = point.y;
ctx.strokeStyle = &#ff4444&;
ctx.strokeStyle = &#000&;
ctx.stroke();
这里我们从预定义的 rectList 中依次拿出每个长方形参数，分表是左上角的x坐标，y坐标，长，宽。然后先画出长方形的路径，画完一个用 isPointInPath 方法判断一下点击点是否在当前路径中，如果在，就给当前的改颜色，如果不在就画出来然后继续画下一个长方形继续判断路径。
是不是很麻烦， isPointInPath 只对当前路径有效,也就说我们不能把三个长方形都画完了再判断某个点是否在第一个长方形路径中，而必须是每次画完一个长方形就要判断一次，而且Canvas中路径是不能保存的，要改变某一条路径，就必须把整个Canvas重新画一遍。
所以这里我们在循环中不单单是绘制了点中的长方形，还要绘制没点的长方形。
基本原理就是上面那样，看到这里，你已经洞悉了Canvas实现点击等事件的小秘密。那我们就继续实现拖动其中的元素吧。
canvas.on(&mousemove&, function(e){
if( !moving && moveItem == null ) {
ctx.clearRect(0, 0,canvas.width(), canvas.height());
var point = getCanvasPoint(e.pageX, e.pageY);
$.each(rectList, function(n, v) {
var moveX = 0,
moveY = 0;
if(n !== moveItem ){
ctx.strokeStyle = &#000&;
moveX = point.x - startPos.x;
moveY = point.y - startPos.y;
ctx.strokeStyle = &#ff4444&;
drawRect(rectList[n][0] + moveX,rectList[n][1] + moveY,rectList[n][2],rectList[n][3]);
ctx.stroke();
依然是熟悉的味道，依然是熟悉的配方。我们还是依赖 mousemove 方法，移动端请用 touchmove 方法。
因为之前在点击的时候我们已经把是哪个长方形被选中给保存在变量 moveItem 中了，所以这里就直接判断就好了。是要拖动的元素就把长方形的x,y对应拖动的距离进行更新。同样是要把整个Canvas都绘制一遍。
另外在 mouseup 事件中保存下状态，方便下次绘画:
canvas.on(&mouseup&, function(e){
$.each(rectList, function(n){
if (n == moveItem){
var point = getCanvasPoint(e.pageX, e.pageY);
rectList[n][0] += point.x - startPos.x;
rectList[n][1] += point.y - startPos.y;
startPos = {}
moveItem = null
记住：在Canvas中不管你搞什么幺蛾子，都要按照之前的规则把所有路径绘制一遍。
上个效果图：
完整代码：
/bob-chen/canvas-demo/blob/master/basic/movebymouse.html
http://jo2.org/html5-canvas-ispointinpath/
最新教程周点击榜
微信扫一扫&&国之画&&&& &&
版权所有 京ICP备号-2
迷上了代码！HTML5 Canvas鼠标与键盘事件demo示例
作者：佚名
字体：[ ] 来源：互联网 时间：07-04 15:52:02
本文的主要母的是演示HTML5 Canvas鼠标事件，获取Canvas对象上的鼠标坐标，演示键盘事件通过键盘控制Canvas上对象移动，感兴趣的朋友可以参考下哈，希望对大家有所帮助
演示HTML5 Canvas鼠标事件，获取Canvas对象上的鼠标坐标，演示键盘事件通过键盘控制Canvas上对象移动。 Canvas对象支持所有的JavaScript的鼠标事件，包括鼠标点击(MouseClick), 鼠标按下(Mouse Down), 鼠标抬起(Mouse Up),鼠标移动( Mouse Move)对Canvas添加鼠标事件方式有两种，一种方式是通过API来完成： 代码如下: // mouse event canvas.addEventListener("mousedown",doMouseDown,false); canvas.addEventListener('mousemove', doMouseMove,false); canvas.addEventListener('mouseup', doMouseUp, false); 另外一种方式在JavaScript中称为反模式：代码如下:canvas.onmousedown = function(e){ } canvas.onmouseup = function(e){ } canvas.onmousemove = function(e){ } 获取鼠标在Canvas对象上坐标： 由于Canvas上鼠标事件中不能直接获取鼠标在Canvas的坐标，所获取的都是基于整个 屏幕的坐标。所以通过鼠标事件e.pageX与e.pageY来获取鼠标位置，然后通过 Canvas. getBoundingClientRect()来获取Canvas对象相对屏幕的相对位置，通过计算 得到鼠标在Canvas的坐标，代码如下： 代码如下: function getPointOnCanvas(canvas, x, y) { var bbox =canvas.getBoundingClientRect(); return { x: x- bbox.left *(canvas.width / bbox.width), y:y - bbox.top * (canvas.height / bbox.height) }; } 键盘事件： HTML5 Canvas本身不支持键盘事件监听与获取，常用的有两种方法来解决这个问题： 一：通过windows对象来实现Canvas键盘事件监听与处理 // key event - use window as object window.addEventListener('keydown', doKeyDown,true); 二：通过在Canvas对象上添加其它支持键盘事件的DOM元素实现键盘事件支持 代码如下: &canvas id="event_canvas"tabindex="0"&&/canvas& // key event - use DOM element asobject canvas.addEventListener('keydown', doKeyDown,true); canvas.focus(); 其中tabindex为HTML5 DOM元素，支持键盘事件。 演示，一个可以根据键盘上下左右移动的矩形块: &一个完整的鼠标与键盘事件演示代码如下： 代码如下: var tempContext = // global variable 2d context var started = var mText_canvas = var x = 0, y =0; window.add window.onload = function() { var canvas = document.getElementById("event_canvas"); console.log(canvas.parentNode.clientWidth); canvas.width = canvas.parentNode.clientW canvas.height = canvas.parentNode.clientH if (!canvas.getContext) { console.log("Canvas not supported. Please install a HTML5 compatible browser.");
} // get 2D context of canvas and draw rectangel tempContext = canvas.getContext("2d"); tempContext.fillStyle="blue"; x = canvas.width/2; y = canvas.height/2; tempContext.fillRect(x, y, 80, 40); // key event - use DOM element as object canvas.addEventListener('keydown', doKeyDown, true); canvas.focus(); // key event - use window as object window.addEventListener('keydown', doKeyDown, true); // mouse event canvas.addEventListener("mousedown", doMouseDown, false); canvas.addEventListener('mousemove', doMouseMove, false); canvas.addEventListener('mouseup', doMouseUp, false); } function getPointOnCanvas(canvas, x, y) { var bbox = canvas.getBoundingClientRect(); return { x: x - bbox.left * (canvas.width / bbox.width), y: y - bbox.top * (canvas.height / bbox.height) }; } function doKeyDown(e) { var keyID = e.keyCode ? e.keyCode :e. if(keyID === 38 || keyID === 87) { // up arrow and W clearCanvas(); y = y - 10; tempContext.fillRect(x, y, 80, 40); e.preventDefault(); } if(keyID === 39 || keyID === 68) { // right arrow and D clearCanvas(); x = x + 10; tempContext.fillRect(x, y, 80, 40); e.preventDefault(); } if(keyID === 40 || keyID === 83) { // down arrow and S clearCanvas(); y = y + 10; tempContext.fillRect(x, y, 80, 40); e.preventDefault(); } if(keyID === 37 || keyID === 65) { // left arrow and A clearCanvas(); x = x - 10; tempContext.fillRect(x, y, 80, 40); e.preventDefault(); } } function clearCanvas() { tempContext.clearRect(0, 0, 500, 500) } function doMouseDown(event) { var x = event.pageX; var y = event.pageY; var canvas = event. var loc = getPointOnCanvas(canvas, x, y); console.log("mouse down at point( x:" + loc.x + ", y:" + loc.y + ")"); tempContext.beginPath(); tempContext.moveTo(loc.x, loc.y); started = } function doMouseMove(event) { var x = event.pageX; var y = event.pageY; var canvas = event. var loc = getPointOnCanvas(canvas, x, y); if (started) { tempContext.lineTo(loc.x, loc.y); tempContext.stroke(); } } function doMouseUp(event) { console.log("mouse up now"); if (started) { doMouseMove(event); started = } } HTML部分： 代码如下: &body& &h1&HTML Canvas Event Demo - By Gloomy Fish&/h1& &pre&Press W, A, S, D keys to move&/pre& &div id="my_painter"& &canvas id="event_canvas" tabindex="0"&&/canvas& &/div& &/body&
大家感兴趣的内容
12345678910
最近更新的内容如何用canvas画点线随鼠标移动的动画？
如何用canvas画点线随鼠标移动的动画？
如图。想要用CanVAS画一个图中的点线连接结合的动态图，形状大概是圆形，且鼠标往右，图中的点能跟着往右，往左，图中的点能跟着往左。求大神赐教
Copyright & 2016 phpStudy}