温馨提示×

HTML5绘画与拖放事件

发布时间:2020-07-24 05:56:19 来源:51CTO 阅读:500 作者:ZeroOne01 栏目:web开发

HTML5绘画

在html5中出现了许多新的特性,绘画功能就是其中之一。由于html5新增的这些新特性,所以也在逐渐取代Flash,毕竟Flash比较占用内存,也经常性奔溃。

html5不仅能制作2d的绘画还能做3d的绘画,但是要注意的是这两者使用的函数不一样但都基于canvas。在网络上我们可以搜索到一些使用html5制作的2D或3D的效果图,例如:

HTML5绘画与拖放事件

HTML5绘画与拖放事件

HTML5绘画与拖放事件

除了以上这些图片效果外,html5的3D绘画还可以制作自由拖动的统计表格或一些图形。



如何使用html5进行绘画:

由于我们是做后端开发的,所以在这里只简单介绍一下html5中的2D绘画,绘画的制作都是基于canvas标签的,所以先介绍一下canvas标签:

canvas是一个画布,这个画布通常是一个矩形区域,我们可以控制这画布中的每一个像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。


创建 Canvas 标签:

代码示例:

HTML5绘画与拖放事件


运行结果:

HTML5绘画与拖放事件

虽然绘画基于canvas,但是canvas本身并没有绘制能力,它仅仅是图形的容器,必须使用js脚本来完成实际的绘图任务。


通过 JavaScript 来绘制:

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成,代码示例:

HTML5绘画与拖放事件

在以上代码中,我们需要通过getContext函数来创建Context绘画对象,Context对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

getContext函数可以传递以下几个参数,webgl是创建3D的绘画对象,而2d则是创建2d的绘画对象,至于experimental-webgl则是实验性质的3D绘画对象,在进行3D绘制的实验阶段可以使用此参数:

HTML5绘画与拖放事件



接下来使用fillStyle属性和fillRect函数在画布上绘制一个红色的矩形,fillStyle是用于设置颜色的,fillRect则定义了形状、位置和尺寸,代码示例:

HTML5绘画与拖放事件


运行结果:

HTML5绘画与拖放事件



理解坐标:

上面的 fillRect 方法拥有参数 (10,10,100,100)。

意思是:在画布上绘制 100x100 的矩形,从左上角开始 (10,10)。


如下图所示,画布的 X 和 Y 坐标用于在画布上对绘画进行定位。

HTML5绘画与拖放事件


绘制线条:

通过指定从何处开始,在何处结束,来绘制一条线:

代码示例:

HTML5绘画与拖放事件


运行结果:

HTML5绘画与拖放事件


绘制圆形:

通过规定尺寸、颜色和位置,来绘制一个圆:

代码示例:

HTML5绘画与拖放事件


运行结果:

HTML5绘画与拖放事件



绘制渐变颜色:

使用指定的颜色来绘制渐变背景:

代码示例:

HTML5绘画与拖放事件


运行结果:

HTML5绘画与拖放事件



图像:

把图像放置到画布上:

代码示例:

HTML5绘画与拖放事件


运行结果:

HTML5绘画与拖放事件




使用随机数和setTimeOut实现慢慢添加小方块:

HTML5绘画与拖放事件


运行结果:

HTML5绘画与拖放事件


利用以上所介绍的知识点制作一个2D坦克大战的地图:

代码示例:

HTML5绘画与拖放事件

HTML5绘画与拖放事件

HTML5绘画与拖放事件


运行结果:

HTML5绘画与拖放事件

地图可以自己在二维数组上绘制,1表示显示墙的图片,2表示显示钢板的图片,3则是显示草地的图片。




拖放事件

拖放是一种常见的特性,即抓取对象以后拖到另一个位置。在 HTML5 中,拖放是标准的一部分,任何元素都能够实现拖放。


设置元素为可拖动:

为了使元素可拖动,需要把元素中的 draggable 属性设置为 true ,img元素是默认可拖动的,例如我把div设置为可拖动:

HTML5绘画与拖放事件


运行结果,可以看到能够将div拖动:

HTML5绘画与拖放事件



ondragstart 事件:

当元素被拖动时就会触发ondragstart 事件,然后通过事件源可以进行一些设置,或者打印消息。

代码示例:

HTML5绘画与拖放事件


运行结果:

HTML5绘画与拖放事件



ondragover事件:

ondragover 事件会在被别的元素触碰到时触发,通过这个事件的事件源对象,可以设置在何处放置被拖动的元素。

默认地,无法将元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。这要通过调用 ondragover 事件的 event.preventDefault() 方法。

在这个事件触发时也可以打印一些消息,代码示例:

HTML5绘画与拖放事件


运行结果:

HTML5绘画与拖放事件



ondrop事件:

当放置元素时,就会触发 drop 事件。


结合以上几个知识点,可以实现将img元素,来回拖放到不同的div元素中,代码示例:

HTML5绘画与拖放事件


运行结果:

HTML5绘画与拖放事件

HTML5绘画与拖放事件

HTML5绘画与拖放事件









免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

免费拨打  400 100 2938 免费拨打 400 100 2938
24小时售后技术支持 24小时售后技术支持
返回顶部 返回顶部