&&&&canvas做的点击鼠标移动，在鼠标周围随机颜色、大小、方向绘制五角星，漂亮.
&canvas做的点击鼠标移动，在鼠标周围随机颜色、大小、方向绘制五角星，漂亮.
canvas做的点击画布，鼠标移动，随鼠标移动，在鼠标周围(随机颜色、大小、方向、数量)绘制五角星，漂亮的游戏动画效果.
若举报审核通过，可奖励20下载分
被举报人：
举报的资源分：
请选择类型
资源无法下载
资源无法使用
标题与实际内容不符
含有危害国家安全内容
含有反动色情等内容
含广告内容
版权问题，侵犯个人或公司的版权
*详细原因：
VIP下载&&免积分60元/年（1200次）
您可能还需要
Q.为什么我点的下载下不了，但积分却被扣了
A. 由于下载人数众多，下载服务器做了并发的限制。若发现下载不了，请稍后再试，多次下载是不会重复扣分的。
Q.我的积分不多了，如何获取积分？
A. 获得积分，详细见。
完成任务获取积分。
论坛可用分兑换下载积分。
第一次绑定手机，将获得5个C币，C币可。
关注并绑定CSDNID，送10个下载分
下载资源意味着您已经同意遵守以下协议
资源的所有权益归上传用户所有
未经权益所有人同意，不得将资源中的内容挪作商业或盈利用途
CSDN下载频道仅提供交流平台，并不能对任何下载资源负责
下载资源中如有侵权或不适当内容，
本站不保证本站提供的资源的准确性，安全性和完整性，同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
开发技术下载排行
您当前C币：0&&&可兑换 0 下载积分
兑换下载分:&
消耗C币:0&
立即兑换&&
兑换成功你当前的下载分为 。前去下载资源
你下载资源过于频繁，请输入验证码
如何快速获得积分？
你已经下载过该资源，再次下载不需要扣除积分
canvas做的点击鼠标移动，在鼠标周围随机颜色、大小、方向绘制五角星，漂亮.
所需积分：1
剩余积分：0
扫描微信二维码精彩活动、课程更新抢先知
VIP会员，免积分下载
会员到期时间：日
剩余下载次数：1000
canvas做的点击鼠标移动，在鼠标周围随机颜色、大小、方向绘制五角星，漂亮.
剩余次数：&&&&有效期截止到：
你还不是VIP会员VIP会员享免积分 . 专属通道极速下载
VIP下载次数已满VIP会员享免积分 . 专属通道极速下载，请继续开通VIP会员
你的VIP会员已过期VIP会员享免积分 . 专属通道极速下载，请继续开通VIP会员HTML5中Canvas的使用样例（图形增加鼠标点击、拖动交互）-html5教程-网页制作-壹聚教程网HTML5中Canvas的使用样例（图形增加鼠标点击、拖动交互）
HTML5中Canvas可以制作不少的一些图形了，我们下面来看一个关于HTML5中Canvas的使用样例，这个例子就是介绍图形增加鼠标点击、拖动交互的一个例子，具体如下所示。
Canvas是一种非保留性的绘图界面，即不会记录过去执行的绘图操作，而是保持最终结果（构成图像的彩色像素）。
如果想让Canvas变得具有交互性，比如用户可以选择、拖动画布上的图形。那么我们必须记录绘制的每一个对象，才能在将来灵活的修改并重绘它们，实现交互。
1，鼠标点击选择图形对象
（1）下面样例中点击&添加圆圈&按钮可以在画布上增加位置、大小、颜色都是随机的圆圈。
（2）点击&清空画布&按钮可以清除画布上所有圆圈。
（3）鼠标点击任意圆圈，该圆圈会出现黑色边框，表示选中。
添加圆圈 清空画布
代码说明：
（1）为了能够将圆圈对象保存起来，我们定义了一个叫 Circle() 的函数类创建自定义对象。同时要让这个对象能够保持数据，要使用关键字 this 来创建属性。
（2）drawCircles() 函数用来根据当前圆圈的集合来填充画布。每次程序刷新画布时，会先使用 clearRect() 方法清除画布上的所有内容。但不用当心这样会造成画布闪烁，即画布上的圆圈一下子全部消失，然后一下子又重新出现。
因为Canvas针对这个问题进行了优化，会在所有绘图逻辑执行完毕后才清除或绘制所有内容，保证最终结果的流畅。
（3）要实现鼠标选中某个图像，就要用到碰撞检测。即计算鼠标点击的那个点是否落在某个形状里。对于圆圈而言，只要计算单击点与圆心的直线距离即可。
&!DOCTYPE html&
& &meta charset=&UTF-8&&
& &title&&/title&
&&&& canvas {
&&&&&& cursor:
&&&&&& border: 1
&&& // 这个方法用来储存每个圆圈对象
&&& function Circle(x, y, radius, color) {
&&&&& this.x =
&&&&& this.y =
&&&&& this.radius =
&&&&& this.color =
&&&&& this.isSelected =
&&& // 保存画布上所有的圆圈
&&& var circles = [];
&&& window.onload = function() {
&&&&& canvas = document.getElementById(&canvas&);
&&&&& context = canvas.getContext(&2d&);
&&&&& canvas.onmousedown = canvasC
&&& function addRandomCircle() {
&&&&& // 为圆圈计算一个随机大小和位置
&&&&& var radius = randomFromTo(10, 60);
&&&&& var x = randomFromTo(0, canvas.width);
&&&&& var y = randomFromTo(0, canvas.height);
&&&&& // 为圆圈计算一个随机颜色
&&&&& var colors = [&green&, &blue&, &red&, &yellow&, &magenta&, &orange&, &brown&, &purple&, &pink&];
&&&&& var color = colors[randomFromTo(0, 8)];
&&&&& // 创建一个新圆圈
&&&&& var circle = new Circle(x, y, radius, color);
&&&&& // 把它保存在数组中
&&&&& circles.push(circle);
&&&&& // 重新绘制画布
&&&&& drawCircles();
&&& function clearCanvas() {
&&&&& // 去除所有圆圈
&&&&& circles = [];
&&&&& // 重新绘制画布.
&&&&& drawCircles();
&&& function drawCircles() {
&&&&& // 清除画布，准备绘制
&&&&& context.clearRect(0, 0, canvas.width, canvas.height);
&&&&& // 遍历所有圆圈
&&&&& for(var i=0; i&circles. i++) {
&&&&&&& var circle = circles[i];
&&&&&&& // 绘制圆圈
&&&&&&& context.globalAlpha = 0.85;
&&&&&&& context.beginPath();
&&&&&&& context.arc(circle.x, circle.y, circle.radius, 0, Math.PI*2);
&&&&&&& context.fillStyle = circle.
&&&&&&& context.strokeStyle = &black&;
&&&&&&& if (circle.isSelected) {
&&&&&&&&& context.lineWidth = 5;
&&&&&&& else {
&&&&&&&&& context.lineWidth = 1;
&&&&&&& context.fill();
&&&&&&& context.stroke();
&&& var previousSelectedC
&&& function canvasClick(e) {
&&&&& // 取得画布上被单击的点
&&&&& var clickX = e.pageX - canvas.offsetL
&&&&& var clickY = e.pageY - canvas.offsetT
&&&&& // 查找被单击的圆圈
&&&&& for(var i=circles.length-1; i&=0; i--) {
&&&&&&& var circle = circles[i];
&&&&&&& //使用勾股定理计算这个点与圆心之间的距离
&&&&&&& var distanceFromCenter = Math.sqrt(Math.pow(circle.x - clickX, 2)
&&&&&&&&&&& + Math.pow(circle.y - clickY, 2))
&&&&&&& // 判断这个点是否在圆圈中
&&&&&&& if (distanceFromCenter &= circle.radius) {
&&&&&&&&& // 清除之前选择的圆圈
&&&&&&&&& if (previousSelectedCircle != null) previousSelectedCircle.isSelected =
&&&&&&&&& previousSelectedCircle =
&&&&&&&&&&
&&&&&&&&& //选择新圆圈
&&&&&&&&& circle.isSelected =
&&&&&&&&& //更新显示
&&&&&&&&& drawCircles();
&&&&&&&&& //停止搜索
&&& //在某个范围内生成随机数
&&& function randomFromTo(from, to) {
&&&&& return Math.floor(Math.random() * (to - from + 1) + from);
&&/script&
& &canvas id=&canvas& width=&400& height=&300&&
& &/canvas&
&&& &button onclick=&addRandomCircle()&&添加圆圈&/button&
&&& &button onclick=&clearCanvas()&&清空画布&/button&
2，鼠标拖动图形对象
下面做个功能改进，允许用户在画布上拖动圆圈。只要监听Canvas的 onMouseMove 事件，相应地修改圆圈的坐标，然后再调用 drawCircle() 函数重绘画布即可。
添加圆圈& 清空画布
&!DOCTYPE html&
& &meta charset=&UTF-8&&
& &title&&/title&
&&&& canvas {
&&&&&& cursor:
&&&&&& border: 1
&&& // 这个方法用来储存每个圆圈对象
&&& function Circle(x, y, radius, color) {
&&&&& this.x =
&&&&& this.y =
&&&&& this.radius =
&&&&& this.color =
&&&&& this.isSelected =
&&& // 保存画布上所有的圆圈
&&& var circles = [];
&&& window.onload = function() {
&&&&& canvas = document.getElementById(&canvas&);
&&&&& context = canvas.getContext(&2d&);
&&&&& canvas.onmousedown = canvasC
&&&&& canvas.onmouseup = stopD
&&&&& canvas.onmouseout = stopD
&&&&& canvas.onmousemove = dragC
&&& function addRandomCircle() {
&&&&& // 为圆圈计算一个随机大小和位置
&&&&& var radius = randomFromTo(10, 60);
&&&&& var x = randomFromTo(0, canvas.width);
&&&&& var y = randomFromTo(0, canvas.height);
&&&&& // 为圆圈计算一个随机颜色
&&&&& var colors = [&green&, &blue&, &red&, &yellow&, &magenta&, &orange&, &brown&, &purple&, &pink&];
&&&&& var color = colors[randomFromTo(0, 8)];
&&&&& // 创建一个新圆圈
&&&&& var circle = new Circle(x, y, radius, color);
&&&&& // 把它保存在数组中
&&&&& circles.push(circle);
&&&&& // 重新绘制画布
&&&&& drawCircles();
&&& function clearCanvas() {
&&&&& // 去除所有圆圈
&&&&& circles = [];
&&&&& // 重新绘制画布.
&&&&& drawCircles();
&&& function drawCircles() {
&&&&& // 清除画布，准备绘制
&&&&& context.clearRect(0, 0, canvas.width, canvas.height);
&&&&& // 遍历所有圆圈
&&&&& for(var i=0; i&circles. i++) {
&&&&&&& var circle = circles[i];
&&&&&&& // 绘制圆圈
&&&&&&& context.globalAlpha = 0.85;
&&&&&&& context.beginPath();
&&&&&&& context.arc(circle.x, circle.y, circle.radius, 0, Math.PI*2);
&&&&&&& context.fillStyle = circle.
&&&&&&& context.strokeStyle = &black&;
&&&&&&& if (circle.isSelected) {
&&&&&&&&& context.lineWidth = 5;
&&&&&&& else {
&&&&&&&&& context.lineWidth = 1;
&&&&&&& context.fill();
&&&&&&& context.stroke();
&&& var previousSelectedC
&&& function canvasClick(e) {
&&&&& // 取得画布上被单击的点
&&&&& var clickX = e.pageX - canvas.offsetL
&&&&& var clickY = e.pageY - canvas.offsetT
&&&&& // 查找被单击的圆圈
&&&&& for(var i=circles.length-1; i&=0; i--) {
&&&&&&& var circle = circles[i];
&&&&&&& //使用勾股定理计算这个点与圆心之间的距离
&&&&&&& var distanceFromCenter = Math.sqrt(Math.pow(circle.x - clickX, 2)
&&&&&&&&&&& + Math.pow(circle.y - clickY, 2))
&&&&&&& // 判断这个点是否在圆圈中
&&&&&&& if (distanceFromCenter &= circle.radius) {
&&&&&&&&& // 清除之前选择的圆圈
&&&&&&&&& if (previousSelectedCircle != null) previousSelectedCircle.isSelected =
&&&&&&&&& previousSelectedCircle =
&&&&&&&&&&
&&&&&&&&& //选择新圆圈
&&&&&&&&& circle.isSelected =
&&&&&&&&& // 使圆圈允许拖拽
&&&&&&&&& isDragging =
&&&&&&&&& //更新显示
&&&&&&&&& drawCircles();
&&&&&&&&& //停止搜索
&&& //在某个范围内生成随机数
&&& function randomFromTo(from, to) {
&&&&& return Math.floor(Math.random() * (to - from + 1) + from);
&&& var isDragging =
&&& function stopDragging() {
&&&&& isDragging =
&&& function dragCircle(e) {
&&&&& // 判断圆圈是否开始拖拽
&&&&& if (isDragging == true) {
&&&&&&& // 判断拖拽对象是否存在
&&&&&&& if (previousSelectedCircle != null) {
&&&&&&&&& // 取得鼠标位置
&&&&&&&&& var x = e.pageX - canvas.offsetL
&&&&&&&&& var y = e.pageY - canvas.offsetT
&&&&&&&&& // 将圆圈移动到鼠标位置
&&&&&&&&& previousSelectedCircle.x =
&&&&&&&&& previousSelectedCircle.y =
&&&&&&&& // 更新画布
&&&&&&&& drawCircles();
&&/script&
& &canvas id=&canvas& width=&400& height=&300&&
& &/canvas&
&&& &button onclick=&addRandomCircle()&&添加圆圈&/button&
&&& &button onclick=&clearCanvas()&&清空画布&/button&
上一页： &&&&&下一页：相关内容<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
您的访问请求被拒绝 403 Forbidden - ITeye技术社区
您的访问请求被拒绝
亲爱的会员，您的IP地址所在网段被ITeye拒绝服务，这可能是以下两种情况导致：
一、您所在的网段内有网络爬虫大量抓取ITeye网页，为保证其他人流畅的访问ITeye，该网段被ITeye拒绝
二、您通过某个代理服务器访问ITeye网站，该代理服务器被网络爬虫利用，大量抓取ITeye网页
请您点击按钮解除封锁&求教 ： 鼠标拖动矩形的边框改变矩形大小问题
[问题点数：20分]
求教 ： 鼠标拖动矩形的边框改变矩形大小问题
[问题点数：20分]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
本帖子已过去太久远了，不再提供回复功能。& & 终于开始可以写代码了，手都开始痒了。这里的代码仅仅是在chrome检测过，我可以肯定的是IE10以下浏览器是行不通，我一直在考虑，是不是使用IE禁止看我的篇博客，就是这群使用IE的人，给我加了很多工作量。
& & 一个地图的基本动作，无非就是加载数据，平移，放大与缩小。这篇博客主要是通过一张图片的方式来模拟一下。
& & 我这里认为大家都稍微了解甚至熟悉canvas的一些API，就不具体说，每一个参数代表什么意思了。
&!DOCTYPE html&
&meta charset='utf-8'&
&title&图片加载平移放大缩小示例&/title&
html,body{
border: 1px solid #000;
&canvas id="canvas" width="800" height="800"&&/canvas&
&script type="text/javascript" src="main.js"&&/script&
var canvas,
function int(){
canvas=document.getElementById('canvas');
context=canvas.getContext('2d');
&创建一个图片对象之后，图片不能马上绘制到canvas上面，因为图片还没有加载完成。所以我们需要监听图片对象加载完事件，然后再去绘制。
var img,//图片对象
imgIsLoaded//图片是否加载完成;
function loadImg(){
img=new Image();
img.onload=function(){
imgIsLoaded=
//draw image
img.src="map.jpg";
& & 绘制图像一个函数就可以搞定，但是需要记录这个图像的左上角坐标以及缩放比例。
var imgX,imgY,imgS
function drawImage(){
context.clearRect(0,0,canvas.width,canvas.height);
context.drawImage(img,0,0,img.width,img.height,imgX,imgY,img.width*imgScale,img.height*imgScale);
　html5事件最小细度在DOM上，所以我们无法对canvas上的图像做监听，只能对canvas监听。
首先监听鼠标mousedown事件，等事件发生之后，再监听鼠标mousemove事件和mouseup事件
mousemove事件发生之后，获得鼠标移动的位移，相应的图片的位置改变多少
mouseup事件发生之后，取消对mousemove以及mouseup事件监听
canvas.onmousedown=function(event){
var pos=windowToCanvas(canvas,event.clientX,event.clientY);
canvas.onmousemove=function(event){
canvas.style.cursor="move";
var pos1=windowToCanvas(canvas,event.clientX,event.clientY);
var x=pos1.x-pos.x;
var y=pos1.y-pos.y;
drawImage();
canvas.onmouseup=function(){
canvas.onmousemove=
canvas.onmouseup=
canvas.style.cursor="default";
function windowToCanvas(canvas,x,y){
var bbox = canvas.getBoundingClientRect();
x:x - bbox.left - (bbox.width - canvas.width) / 2,
y:y - bbox.top - (bbox.height - canvas.height) / 2
& & 其实缩放很简单，稍微复杂的是，如何让鼠标成为放大或者缩小的中心。如果数学几何不好，计算公式就可能看不明白了。
canvas.onmousewheel=canvas.onwheel=function(event){//chrome firefox浏览器兼容
var pos=windowToCanvas(canvas,event.clientX,event.clientY);
event.wheelDelta=event.wheelDelta?event.wheelDelta:(event.deltaY*(-40));
if(event.wheelDelta&0){
imgScale*=2;
imgX=imgX*2-pos.x;
imgY=imgY*2-pos.y;
imgScale/=2;
imgX=imgX*0.5+pos.x*0.5;
imgY=imgY*0.5+pos.y*0.5;
drawImage();
　　这个时候，基本功能就实现了，加载一张图片和加载多张图片都差不多，维护每一张图片的位置和大小，下面来整理一下代码吧。
var canvas,
var img,//图片对象
imgIsLoaded,//图片是否加载完成;
imgScale=1;
(function int(){
canvas=document.getElementById('canvas');
context=canvas.getContext('2d');
loadImg();
function loadImg(){
img=new Image();
img.onload=function(){
imgIsLoaded=
drawImage();
img.src="map.jpg";
function drawImage(){
context.clearRect(0,0,canvas.width,canvas.height);
context.drawImage(img,0,0,img.width,img.height,imgX,imgY,img.width*imgScale,img.height*imgScale);
canvas.onmousedown=function(event){
var pos=windowToCanvas(canvas,event.clientX,event.clientY);
canvas.onmousemove=function(event){
canvas.style.cursor="move";
var pos1=windowToCanvas(canvas,event.clientX,event.clientY);
var x=pos1.x-pos.x;
var y=pos1.y-pos.y;
drawImage();
canvas.onmouseup=function(){
canvas.onmousemove=
canvas.onmouseup=
canvas.style.cursor="default";
canvas.onmousewheel=canvas.onwheel=function(event){
var pos=windowToCanvas(canvas,event.clientX,event.clientY);
event.wheelDelta=event.wheelDelta?event.wheelDelta:(event.deltaY*(-40));
if(event.wheelDelta&0){
imgScale*=2;
imgX=imgX*2-pos.x;
imgY=imgY*2-pos.y;
imgScale/=2;
imgX=imgX*0.5+pos.x*0.5;
imgY=imgY*0.5+pos.y*0.5;
drawImage();
function windowToCanvas(canvas,x,y){
var bbox = canvas.getBoundingClientRect();
x:x - bbox.left - (bbox.width - canvas.width) / 2,
y:y - bbox.top - (bbox.height - canvas.height) / 2
　　如果不想复制这些代码的话，&
阅读(...) 评论()}