html5一个可拖动的图片大小,HTML5画布中的可拖动和可调整大小元素

是否可以使HTML5 Canvas元素内的元素可拖动和可调整大小。有没有什么办法让下面的代码动态图像可移动：HTML5画布中的可拖动和可调整大小元素

var ctx, imgArray;

function initAll() {

ctx = document.getElementById("canvas").getContext("2d");

imgArray = ["http://i46.tinypic.com/nqe1dt.jpg",

"http://i50.tinypic.com/i21phi.jpg",

"http://i49.tinypic.com/1zmfcrq.jpg",

"http://i50.tinypic.com/v8g6mo.jpg",

"http://i49.tinypic.com/21kh7ah.jpg"];

drawCanvas();

document.getElementById("checkgroup").onchange = drawCanvas;

}

function drawCanvas() {

ctx.clearRect(0, 0, 600, 400);

for(var i=0; i < imgArray.length; ++i) {

var img = new Image();

img.posX = (i < 3) ? i*200 : (i-2.5)*200;

img.posY = (i < 3) ? 0 : 200;

img.src = imgArray[i];

img.onload = function() {

ctx.drawImage(this, this.posX, this.posY, 150, 150);

}

window.onload = initAll;

2012-08-02

Hanzel

我认为，这将是相当复杂的。如果只有这样做的简单方法....... –

2012-08-02 09:54:56

html5一个可拖动的图片大小,HTML5画布中的可拖动和可调整大小元素相关推荐

html怎样把图片放进画布中,HTML5 canvas操作图片
1.canvas操作图像的能力 canvas更有意思的一项特性就是图像操作能力.可以用于动态的图像合成或者作为图形的背景,以及游戏界面(Sprites)等等.浏览器支持的任意格式的外部图片都可以使用, ...
html5怎么修改图片大小,HTML5 javascript修改canvas的大小
方法1: 设定固定的值,这种方式跟在html中设定canvas的值没有什么区别: window.onload = function(){ canvas.height = 100; canvas.wid ...
html实现选择头像,HTML5实现上传头像图片大小选择（简单实现）
HTML5仿微博图片上传后大小选择,请使用chrom或者FireFox运行.如果报SECURITY_ERR需要把文件放在服务器端.比如nginx里. 1.[代码][HTML]代码 New Docume ...
php批量添加水印图片大小,解析php中两种缩放图片的函数,为图片添加水印
有两种改变图像大小的方法.(1):ImageCopyResized() 函数在所有GD版本中有效,但其缩放图像的算法比较粗糙. (2):ImageCopyResampled(),其像素插值算法得到的图 ...
android button 图片大小设置,android 中怎么控制ImageButton 上的图片与按钮大小的匹配...
ImageButton 是ImageView的子类,ImageView中可以通过Scaletype来设置图片的缩放大小等. ImageView的Scaletype决定了图片在View上显示时的样子,如 ...
android 图片大小判断,android中如何使用一张图片适配不同尺寸的APP引导页
在我们平常开发的过程中在做引导页适配的时候,有时候会犯难,怎么样作图可以将各种不同尺寸分辨率的手机都适配好也就是不变形不拉伸,官方给的说法也只是做多套图去适配不同的分辨率,遇到全屏展示引导这种问题的时 ...
PS按照图片大小调整画布大小
1. 2. 3.白色的地方就没了:
怎么压缩图片大小，图片压缩方法
怎么压缩图片大小?工作中如果遇到一些体积较大的图片,尤其一些清晰度很高的图片,可能一张小尺寸的图片就有2-3M的大小,这个我们的使用打开造成很多的麻烦,例如因为超过限制大小而不能上传,打开的时候很大, ...
使用伪元素插入图片大小调整问题
css使用伪元素插入图片大小调整问题需求描述: 想要利用伪元素在a标签后插入图片,调整为合适大小. 效果图: 问题描述: 使用伪元素例如::after的content属性插入图片不能调整图片大小问题 ...
android thumb大小,Android 设置thumb图片大小
xml: android:thumb="@drawable/seekbar_thumb" seekbar_thumb.xml: 修改为: private int seekWidth ...

html5一个可拖动的图片大小,HTML5画布中的可拖动和可调整大小元素

html5一个可拖动的图片大小,HTML5画布中的可拖动和可调整大小元素相关推荐

最新文章

热门文章