javascript画笔,Java画笔

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

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

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

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

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

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

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

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

【【【具体代码：】】】

div拖动：

var divObj=document.getElementById("cover");

  var moveFlag=false;

    divObj.onmousedown=function(e){

    moveFlag=true;

    var clickEvent=window.event||e;

    var mwidth=clickEvent.clientX-divObj.offsetLeft;

    var mheight=clickEvent.clientY-divObj.offsetTop;

    document.onmousemove=function(e){

      var moveEvent=window.event||e;

      if(moveFlag){

        divObj.style.left=moveEvent.clientX-mwidth+"px";

        divObj.style.top=moveEvent.clientY-mheight+"px";

        divObj.onmouseup=function(){

          moveFlag=false;

        }

      }

    }

  };

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

var clickEvent=window.event||e;

      var mwidth=clickEvent.clientX-divObj.offsetLeft;

      var mheight=clickEvent.clientY-divObj.offsetTop;

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

接下来绘制图片：

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

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

 var img=document.getElementById("myImg");

  function drawImg(){

    ctx.clearRect(0,0,1000,500);

    ctx.beginPath();

    ctx.drawImage(img,X,Y);

    ctx.closePath();

    ctx.stroke();

  }

  window.onload=function(){

    setInterval(drawImg,1);

  }

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

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

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

X=moveEvent.clientX-mwidth;

 Y=moveEvent.clientY-mheight;

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

if(moveEvent.clientX=mwidth){

  divObj.style.left=0+"px";

  X=0;

}

if(parseInt(divObj.style.left)+divObj.offsetWidth =1000){

  divObj.style.left=1000 - divObj.offsetWidth+"px";

  X=1000 - divObj.offsetWidth;

}

if(moveEvent.clientY=mheight){

  divObj.style.top=0+"px";

  Y=0;

}

if(parseInt(divObj.style.top)+divObj.offsetHeight=500){

       divObj.style.top=500-divObj.offsetHeight+"px";

       Y=500-divObj.offsetHeight;

}

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

彻底隐藏div看看效果：

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

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

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

相关问答

Q1: HTML5 Canvas基本绘制线条教程

HTML5 Canvas基本绘制线条教程

怎么画线条？和现实中画画差不多：

1.移动画笔，使画笔移动至绘画的开始处

2.确定第一笔的停止点

3.规划好之后，选择画笔（包括画笔的粗细和颜色等）

4.确定绘制

因为Canvas是基于状态的绘制（很重要，后面会解释），所以前面几步都是在确定状态，最后一步才会具体绘制。

1.移动画笔(moveTo())

之前我们获得了画笔context，所以以此为例，给出改方法的使用实例——context.moveTo(100,100)。这句代码的意思是移动画笔至(100,100)这个点（单位是px）。记住，这里是以canvas画布的左上角为笛卡尔坐标系的原点，且y轴的正方向向下，x轴的正方向向右。

2.笔画停点(lineTo())

同理，context.lineTo(600,600)。这句的意思是从上一笔的停止点绘制到(600,600)这里。不过要清楚，这里的moveTo()``lineTo()都只是状态而已，是规划，是我准备要画，还没有开始画，只是一个计划而已！

3.选择画笔

这里我们暂且只设置一下画笔的颜色和粗细。

context.lineWidth = 5，这句话的意思是设置画笔(线条)的粗细为10px。

context.strokeStyle = "#AA394C"，这句话的意思是设置画笔(线条)的颜色为玫红色。

因为Canvas是基于状态的绘制，所以我们在选择画笔粗细和颜色的同时，其实也是选择了线条的粗细和颜色。

4.确定绘制

确定绘制只有两种方法，fill()和stroke()，有点绘画基础的应该知道，前者是指填充，后者是指描边。因为我们只是绘制线条，所以只要描边就可以了。调用代码context.stroke()即可。

画一个线条

不就一条线段吗！废话了这么多！那我们就开始画吧。

JavaScript Code复制内容到剪贴板你的浏览器居然不支持Canvas？！赶快换一个吧！！

运行结果：

我还标注了一个页面解析图，供大家参考。

这里我将原本

标签中的width和height去掉了，但在JavaScript代码中设置了canvas对象的width和height的属性。

小结：要设置画布的大小，只有这两种方法

1.在标签中设置；

2.在JS代码中设置canvas的'属性.

怎么样，是不是非常的酷。接下来我们要加快脚步了，绘制一个多线条组成的图形。是不是感觉自己离艺术家又进了一步呢？别看这只是简简单单的一条线段，这一画只是我们的一小步，但却是人类的一大步！

绘制折线

上面我们已经成功绘制了一条线段。那么，如果我要绘制有两个笔画甚至是很多笔画的折线怎么办呢？

聪明的小伙伴肯定已经想到了，这还不简单，复用lineTo()就可以了。下面我就献丑随便画了一条优美的折线~

JavaScript Code复制内容到剪贴板你的浏览器居然不支持Canvas？！赶快换一个吧！！

运行结果：

绘制多条折线

那同理，我们要绘制多条样式各不相同的折线怎么办呢？比如我们在这里画三条折线，分别是红色、蓝色、黑色。聪明的小伙伴肯定想到了，这还不简单，只需要平移一下再改下画笔颜色就行了。代码格式都一样的，复制就可以了。代码如下。

JavaScript Code复制内容到剪贴板你的浏览器居然不支持Canvas？！赶快换一个吧！！

运行结果：

咦？是不是很奇怪？说好的先红色，再蓝色，再黑色呢？怎么全是黑色了？其实，这里的原因是我之前一直强调的一点——Canvas是基于状态的绘制。

什么意思呢？其实这段代码每次使用stroke()时，它都会把之前设置的状态再绘制一遍。第一次stroke()时，绘制一条红色的折线；第二次stroke()时，会再重新绘制之前的那条红色的折线，但是这个时候的画笔已经被更换成蓝色的了，所以画出的折线全是蓝色的。换言之，strokeStyle属性被覆盖了。同理，第三次绘制的时候，画笔颜色是最后的黑色，所以会重新绘制三条黑色的折线。所以，这里看到的三条折线，其实绘制了3次，一共绘制了6条折线。

那么，我想绘制三条折线，难道就没有办法了吗？艺术家之魂到此为止了么？没救了么？不，还有办法。

使用beginPath()开始绘制

为了让绘制方法不重复绘制，我们可以在每次绘制之前加上beginPath()，代表下次绘制的起始之处为beginPath()之后的代码。我们在三次绘制之前分别加上context.beginPath()。

JavaScript Code复制内容到剪贴板你的浏览器居然不支持Canvas？！赶快换一个吧！！

可以看到，这里得到了我们预想的结果。因为使用了beginPath()，所以这里的绘制过程如我们所想的那样，只绘制了三次，而且每次只绘制一条折线。beginPath()是绘制设置状态的起始点，它之后代码设置的绘制状态的作用域结束于绘制方法stroke()、fill()或者closePath()，至于closePath()之后会讲到。

所以我们每次开始绘制前都务必要使用beginPath()，为了代码的完整性，建议大家在每次绘制结束后使用closePath()。 ;

Q2: 跪求，html,css,js前端怎么实现某个点按照轨迹来画图案。

这是以前写的涂鸦板一样的东西,按住鼠标左键拖拽就可以绘制指针的运动轨迹

body

center

canvas id="cavsElem" width="800" height="560" style="border: 1px solid black; "你的浏览器不支持此涂鸦板/canvas

画笔颜色：input type="color" id="context.color" /

画笔大小:input type="number"id="context.size" max="10" value="1" /

/center

script

(function(){

var canvas=document.getElementById('cavsElem');//获得画布

var context=canvas.getContext('2d');//准备画笔

var a=document.getElementById('context.color');

var b=document.getElementById('context.size');

    canvas.onmousedown=function(e){     //鼠标触发onmousedown事件时,获取起始坐标

     var x=e.clientX-canvas.getBoundingClientRect().left;

     var y=e.clientY-canvas.getBoundingClientRect().top;

     context.beginPath();

     context.moveTo(x,y);    

    canvas.onmousemove=function(event){   //触发鼠标移动事件时，获取绘制线条的坐标

     var x=event.clientX-canvas.getBoundingClientRect().left;

     var y=event.clientY-canvas.getBoundingClientRect().top;

     context.lineTo(x,y);//绘制线条

     context.strokeStyle=a.value;

context.lineWidth=b.value;

     context.stroke();

    };

    canvas.onmouseup=function(event){    //鼠标被松开时，返回null

     canvas.onmousemove=null;

    };

  };

 }());

/script

/body

Q3: javascript如何画图形？

这个问题你用baidu搜索一下，有很多的教程。。

;cl=3

1.

JAVASCRIPT经常通过用户提供的数据动态地生成条形图。总的来说这是由于条形图的简洁，它只是简单地由不确定长度的图形组成。我们使用JAVASCRIPT动态地画出每个图形，每个图形的长度和用户输入的数据有关。

我们需要的是以一个1x15的图形作为开始：

如果我想要拉长这幅图象到 50x15 ，我使用 JavaScript 这样做：

script

document.write(img src="poll.gif" width="50" height="15"')

/script

这就形成了动态图形的基础。这是一个我用JAVASCRIPT写的一个简单的脚本，它用来说明了图形创建的例子。

script

var graphtext=new Array("Jill", "Bob", "Tony") //图形项目

var graphvalue=new Array("60", "45", "95") //图形值 (使用的是百分比，例如70=70%)

var barlength=200

for (i=0;igraphtext.length;i++)

document.write (graphtext[i]+': img src="poll.gif" width="'+graphvalue[i]/100*barlength+'" height="15"br')

/script

Jill:

Bob:

Tony

代码的关键之处在于：width="'+graphvalue[i]/100*barlength+'"

这句话产生图形的宽度，这基于用户提供的数据。每个长度是输入值的百分比，然后乘以条形长度的基本长度。

2.

使用图形信息建立原始数据的图形。只给复杂图形的名称赋予一定的值（值可以是绝对值或百分比），剩下的留给脚本就行了。

图形信息允许你在同一个网页上生成不止一个图形文件，而这只需要多次的调用关键的函数。

Example:

Example 1 (using absolute values)

What is your favorite news site?

CNN

28%

MSNBC

36%

ABC News

11%

BBC News

25%

Total participants: 211

Example 2 (using percentage values)

What is your favorite news site?

CNN

28%

MSNBC

36%

ABC News

11%

BBC News

25%

因为EXAMPLE 1是用绝对值来创建的，脚本也在最后显示了总值。

指导

步骤一：下面是图形信息的两个版本。第一个要求图形值是绝对值，而第二个是相对值。

绝对方式：

What is your favorite news site?

script language="JavaScript1.2"

//JavaScript Graph-it! (Absolute)- by javascriptkit.com

//Visit JavaScript Kit () for script

//Credit must stay intact for use

var graphimage="poll.gif"

//DEFINE GRAPH VALUES [Item name, absolute value]

var graphx=new Array()

graphx[0]=["CNN",60]

graphx[1]=["MSNBC",75]

graphx[2]=["ABC News",24]

graphx[3]=["BBC News",52]

//YOU CAN DEFINE MULTIPLE GRAPHS, eg:

//var graphy=new Array()

function graphit(g,gwidth){

total=0

for (i=0;ig.length;i++)

total+=parseInt(g[i][1])

output='table border="0" cellspacing="0" cellpadding="0"'

for (i=0;ig.length;i++){

calpercentage=Math.round(g[i][1]*100/total)

calwidth=Math.round(gwidth*(calpercentage/100))

output+='trtd'+g[i][0]+' /tdtdimg src="'+graphimage+'" width="'+calwidth+'" height="10" '+calpercentage+'%/td/tr'

}

output+='/table'

document.write(output+'brTotal participants: b'+total+'/b')

}

//CALL GRAPHIT FUNCTION

//graphit(NAME OF GRAPH ARRAY, MAXIMUM WIDTH IN PIXELS)

graphit(graphx,200)

/script

p align="center"font face="arial" size="-2"This free script provided by/fontbr

font face="arial, helvetica" size="-2"a href=""JavaScript

Kit/a/font/p

相对方式：

What is your favorite news site?

script language="JavaScript1.2"

//JavaScript Graph-it! (Percentage)- by javascriptkit.com

//Visit JavaScript Kit () for script

//Credit must stay intact for use

var graphimageP="poll.gif"

//DEFINE GRAPH VALUES [Item name, Percentage value]

var graphv=new Array()

graphv[0]=["CNN","28%"]

graphv[1]=["MSNBC","36%"]

graphv[2]=["ABC News","11%"]

graphv[3]=["BBC News","25%"]

//YOU CAN DEFINE MULTIPLE GRAPHS, eg:

//var graphz=new Array()

function graphitP(g,gwidth){

outputP='table border="0" cellspacing="0" cellpadding="0"'

for (i=0;ig.length;i++){

calwidthP=gwidth*(parseInt(g[i][1])/100)

outputP+='trtd'+g[i][0]+' /tdtdimg src="'+graphimageP+'" width="'+calwidthP+'" height="10" '+g[i][1]+'/td/tr'

}

outputP+='/table'

document.write(outputP)

}

//CALL GRAPHIT FUNCTION

//graphitP(NAME OF GRAPH ARRAY, MAXIMUM WIDTH IN PIXELS)

graphitP(graphv,200)

/script

p align="center"font face="arial" size="-2"This free script provided by/fontbr

font face="arial, helvetica" size="-2"a href=""JavaScript

Kit/a/font/p

以上回答你满意么？