canvas 画图片-javascript 怎么把多幅图片画进canvas中，并且能拖动他们，给他们连线

如果您觉得我的文章有用,欢迎点赞和关注,也欢迎光临我的个人博客

canvas元素可以用来画2D图形,我们通过写js来完成任务。

首先,我们在html文件中写入:

然后在css中给canvas一个背景颜色:

此时浏览器中是这样的:

正如我们所看到的,canvas的默认值是宽300高150。我想把画布变为正方形,所以在css中加入width:300px;height:300px。接着我们在上面画圆。

却发现圆被拉伸为椭圆了。

canvas是由一张画板和一张画纸铺成的,画板相当于一个容器,我们在画纸上作画。当画纸与画板宽高不相等时,图形就会被拉伸。

1.在html标签中设置canvas属性:

2.在js中设置:

canvas不可以拖动。你也不可以直接拖动canvas里面的任何元素,包括已经载入的图片(实际上图片已经成为canvas的一部分)。先不说连线,因为我不清楚你要怎样连线。先拿一张图片来说。

思路:canvas不可以拖动,但div可以啊。考虑div和canvas。位置属性设置为absolute,否则容易出错。

注意:将div的z-index值设置大点,保证其在Canvas画面之上。

将div的大小设置成图片的大小。

图片不是在div里面,也没必要。

拖动div,拖动到新位置X1,Y1时,清除canvas的图片:(X,Y,W,H);X是上一个位置图片在canvas中的横坐标,Y是上一个位置的纵坐标,W是图片宽度,H是图片高度。

绘制新位置下的图片:(img,X,Y);img是一个图片节点。不会用drawImage请百度哈。

【【【具体代码:】】】

div拖动:

var divObj=("cover");

  var moveFlag=false;

    =function(e){

    moveFlag=true;

    var clickEvent=||e;

    var mwidth=;

    var mheight=;

    =function(e){

      var moveEvent=||e;

      if(moveFlag){

        =+"px";

        =+"px";

        =function(){

          moveFlag=false;

        }

      }

    }

  };

来解读下这段代码:首先获取div对象,设置拖拽标志moveFlage,当onmousedown时为true表示可以拖动,当onmouseup时为false表示不能拖动了。

var clickEvent=||e;

      var mwidth=;

      var mheight=;

这三行代码是为了修正光标位置。当点击时,记录下光标在div上的位置。mwidth和mheight表示光标落点相对于div左边和上边的距离。

接下来绘制图片:

首先定义全局变量X和Y,它们是为了实时更新图像的绘制坐标。

var ctx=("myCanvas").getContext("2d");

 var img=("myImg");

  function drawImg(){

    (0,0,1000,500);

    ();

    (img,X,Y);

    ();

    ();

  }

  =function(){

    setInterval(drawImg,1);

  }

获取“画笔”,获取图片对象。这里setInterval循环执行绘制图片的函数,以刷新图片的位置,setInterval的间隔值越小,拖拽起来越“流畅”。

同时别忘了clearRect,当图片移动到下一个位置时,清除上一个位置的图片,参数为Canvas画布的坐标和尺寸。

在拖拽时将修正后的光标坐标传给X、Y:

X=;

 Y=;

最后加上div和图像的活动范围:

if(<=mwidth){

  =0+"px";

  X=0;

}

if(parseInt()+ >=1000){

  =1000 - +"px";

  X=1000 - ;

}

if(<=mheight){

  =0+"px";

  Y=0;

}

if(parseInt()+>=500){

       =+"px";

       Y=;

}

这个就看个人的要求了,注意是要同时限定div和图片的活动范围。1000与500为本例的画布大小,如果是在整个页面里活动就换成innerWidth或innerHeight。

彻底隐藏div看看效果:

最后说下点击事件,这里要注意的是在拖拽的过程中onmousedown与onmouseup二者就构成了一个click过程,但我们不希望在拖拽结束后触发点击事件。

这里有个比较简单的办法,定义一个clickFlag默认为false,当onmousedown时设为true,若进行了onmousemove事件时设为false。

在最后onmouseup时判断clickFlag的值,为true时才触发点击事件。也就是说当你按下鼠标时,只有不发现移动,松开鼠标时才会触发点击事件。

<img src="......." id="img1" />

<img src="......." id="img2" />

<img id="img3" />

var img1 = ("img1"),

    img2 = ("img2"),

    img3 = ("img3");

var canvas = ("canvas"),

    context = ("2d");

 =  + ;

 = (,);

// 将 img1 加入画布

(img1,0,0,,);

// 将 img2 加入画布

(img1,,0,,);

// 将画布内容导出

var src = ();

 = src;

<p>drawImage 的使用方法可以去这里看一下</p>

<a href="" />