关于canvas 的基础知识就不多说了,可以进这个网址学习 http://www.w3school.com.cn/html5/html_5_canvas.asp 对于canvas 和 SVG 其实一开始个人是比较倾向于SVG多一点,不过后来工作需要,又学习了下canvas, 这两个之间主要不同是 canvas是在JavaScript中绘制,SVG则是在 XML 绘制 其实canvas 主要的工作就是绘制图像,图表之类的工作,对于一些可操作的特效个人还是更喜欢用canvas + div 来实现: 

引言 在上一篇日志“canvas 图片拖拽旋转之一”中,对坐标转换有了比较深入的了解,但是仅仅利用坐标转换实现的拖拽旋转,会改变canvas坐标系的状态,从而影响画布上其他元素的绘制.因此,这个时候需要用到一对canvas方法,在变换坐标系前保存canvas状态,在变换并绘制完成之后,恢复canvas状态,即save()和restore(). [备注] 这篇文章只是记录分享下解决问题的过程,找我要demo的,或者问我什么东西怎么做的,就不要加我了.你可以加一个canvas相关的交流群,或者如果需

引言 对canvas中绘制的图片进行旋转操作,需要使用ctx.translate变换坐标系,将图片旋转的基点设为坐标系的原点,然后ctx.rotate旋转. 这个时候,因为canvas坐标系发生了旋转,而视觉感受上的坐标以及鼠标事件中的坐标都是旋转之前的屏幕坐标系.再根据鼠标的移动去控制canvas中的图片时,就会出现问题. 用A坐标系中的偏移来控制B坐标系中的图形,就需要进行一个坐标转换,即通过一种转换关系,将A坐标系中的点在B坐标系中表示出来,然后根据B坐标系中的偏移来控制B坐标系中的图形.

前言 如今的H5运营活动中,有很多都是让用户拍照或者上传图片,然后对照片加滤镜.加贴纸.评颜值之类的.尤其是一些拍照软件公司的运营活动几乎全部都是这样的. 博主也做过不少,为了省事就封装了一个简单的图片拖拽.裁剪的插件.其实网上也有很多类似的插件,只不过有的功能冗余体积大,有的甚至还依赖jquery.索性自己搞一个轻量的,只是不支持缩放功能. DEMO(手机上看效果比较好,PC上没有兼容处理),原码 实现 这里简略说下实现过程,只截取部分代码片段,有兴趣的可以看下原码,反正也很简单. 图片上传

1.什么是canvas 在网页上使用canvas元素时,会创建一块矩形区域,默认矩形区域宽度300px,高度150px.. 页面中加入canvas元素后,可以通过javascript自由控制.可以在其中添加图片.线条以及文字,也可以在里头绘图,还可        以加入高级动画. 使用canvas编程,首先要获得其上下文(context).接着在上下文中执行动作,最后将动作应用到上下文中. 2.canvas坐标      坐标原点为左上角,x轴沿水平方向向右,y轴沿垂直方向向下. 3.替代内容

效果描述: 图片代表物品,图片在有宽高的div上方显示,把图片拖放到设置好的div里面,并且在div里面显示图片的信息:价格,物品名,数量.如果拖放有重复,只是在div里面让物品的数量加1,最后计算出所有拖放物品的价格之和,并且显示在div里面,利用appendChild的的剪贴行,保证在计算价格的时候总是在所计算价格的物品的下一行. 下面是代码: HTML+CSS布局 <ul id="ul1"> <li draggable="true">

一.前言 这两天恰好有一位同事问我怎样做一个图片预览功能.作为现代人的我们首先想到的当然是HTML5啦,其实HTML5做图片预览已经是一个老生常谈的问题了.我在这里就简单说说其中相关的一些东西,当然会附上我们的源码.在 HTML5 之前我们做图片预览主流做法有两种,第一种是通过 Flash 插件来做预览,第二种是 Ajax 实现的假预览,也就是说选择图片文件后,图片其实已经异步上传到服务器,服务器处理后返回图片路径,前端得到响应结果做出处理从而使图片显示在界面上.而有了 HTML5 之后就可以强

前言 昨天利用css2的clip属性实现了网页进度条觉得还不错,但是很多情况下,我们在那些时候用进度条呢,一般网页加载的时候如果有需要可以用,那么问题就来了,怎么才算整个加载完毕呢,是页面主要模块加载完毕,还是window.onload之后算呢,对这些方面,我真不敢随意回答,因业务需求而定,本文想要说的是在图片上传的时候用到的进度条. 效果展示 详细参考请移步至html5demo HTML5 新增的拖拽相关事件说明 1.ondragover 效果图演示是所看见的可以将文件不仅仅是图片拖拽到该di

朋友圈实现原理 我们使用 Android Device Monitor 来分析朋友圈发布图片的界面实现原理.如果需要分析其他应用的界面实现也是采用这种方法哦. 打开 Android Device Monitor,选择DDMS,连接上真机,区域2 就会显示出当前手机正在运行的应用,再点击 区域1,然后新窗口就会显示出当前页面分析的结果,点击 区域3 中的相应控件,区域4 中就会选中对应的控件.区域4 中以菜单的层级关系显示出各控件的关系. 区域4中各参数意义: eg:(0)FrameLayout[

富文本编辑器(图片拖拽缩放) 需求: 根据业务要求,需要能够上传图片,且上传的图片能在移动端中占满屏幕宽度,故需要能等比缩放上传的图片,还需要能拖拽.缩放.改变图片大小.尝试多个第三方富文本编辑器,很难找到一个完美符合自己要求的编辑器.经过多次尝试,最终选择了wangEditor富文本编辑器. 最初使用的是vue2Editor富文本编辑器,vue2Editor本身是不支持图片拖拽的,但是提供了可配置图片拖拽的方法,需要借助Qill.js来实现图片拖拽.虽然满足了业务需求,但是在移动端展示的效果不

最近开发一个活动需要在手机上给上传的头像加上边框.装饰,需要拖拽.手势缩放边框下的头像图片,因为是vue项目,开始尝试了vue-drag-resize这个组件,对图片拖拽支持很完美,但是无法手势缩放,果断放弃,最后选用了腾讯的AlloyTeam团队的开源的手势库AlloyFinger,闲话少说直接上代码 1.下载 npm install alloyfinger 2.main.js全局配置 import AlloyFinger from 'alloyfinger' import AlloyFing

本文将介绍一个非常有意思的功能,使用纯 CSS 利用 resize 实现强大的图片切换预览功能.类似于这样: 思路 首先,要实现这样一个效果如果不要求可以拖拽,其实有非常多的办法. 将两张图片叠加在一起 改变上层图片的宽度,或者使用 mask, 改变 mask 的透明度区间变化 两种方式都简单示意一下. 假设我们的结构如下,分别使用 background 展示两张图片: <div class="g-outer"> <div class="g-inner&qu

前言 需要用到图形绘制,没有找到完整的图形绘制实现,所以自己实现了一个 - - 一.实现的功能 1.基于oop思想构建,支持坐标点.线条(由坐标点组成,包含方向).多边形(由多个坐标点组成).圆形(包含圆心坐标点和半径)等实体 2.原生JavaScript实现,不依赖任何第三方js库和插件 3.多图形绘制(支持画笔.线条.箭头.三角形.矩形.平行四边形.梯形以及多边形和圆形绘制) 4.拖拽式绘制(鼠标移动过程中不断进行canvas重绘) 5.图片绘制(作为背景图片时重绘会发生闪烁现象,暂时有点问

前言 需要用到图形绘制,没有找到完整的图形绘制实现,所以自己实现了一个 - - 演示地址:查看演示DEMO 新版本支持IE5+(你没看错,就是某软的IE浏览器)以上任意浏览器的Canvas绘图:http://blog.csdn.net/eguid_1/article/details/79310269 一.实现的功能 1.基于oop思想构建,支持坐标点.线条(由坐标点组成,包含方向).多边形(由多个坐标点组成).圆形(包含圆心坐标点和半径)等实体 2.原生JavaScript实现,不依赖任何第三方

米娜桑,哦哈哟~ 个人制作,该文章主要讲解最近基于uni-app框架编写的集图文拖拽等多方位编辑.油墨电子签名.开放式海报于一体的小程序的制作思路和实现代码. 目录 1.完整源码链接 2.实现思路 3.核心代码 3-1.图文多方位编辑 3-2.油墨电子签名 3-3.开放式海报 3-4.小结 4.效果展示和体验 1.完整源码链接: 完整代码:https://github.com/TensionMax/mini-ps 其中演示的文字编辑.图片编辑.油墨电子签名.开放式海报可单独食用,含文档说明. 2

最近浏览了张鑫旭大神的基于HTML5 drag/drop模块拖动插入排序删除完整实例,感觉受益匪浅.于是将最做的demo记录下来. 首先浏览一下事件,这些事件比较好记,只要记住用在谁的身上就好了,无非是被推拽的元素和目标元素. 被拖拽元素上触发的事件: 1.ondragstart - 用户开始拖动元素时触发 2.ondrag - 元素正在拖动时触发 3.ondragend - 用户完成元素拖动后触发 目标元素上触发的事件: 1.ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发

最近做项目的时候遇到上传施工平面布置图,查看,因为图片比较大,一般的显示器分辨率无法显示全,然后还需要放大看清楚图片里面的文字内容,所以需要用到图片的拖拽与缩放功能.这里整理下具体操作. 首先新建一个窗体,拖一个panel控件到窗体中,然后在拖一个pictureobx控件到panel中,然后在添加个上传图片的按钮: 具体代码: using System; using System.Collections.Generic; using System.ComponentModel; using Sy

如下图所示: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #div1{width:200px;height:200px;background:red;} </style> <script type="te

代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <canvas id="canvas"> 您的浏览器不支持canvas! </canvas> <script> var ca

前些日子为老婆做了一个web管理商品的工具,因为商品的图片比较多并且还需要剪裁图,为了上传图片方便加了一个拖拽.粘贴上传的功能. 我已经把代码整理出来放到GitHub上了,有兴趣的朋友可以下来玩玩. GitHub: https://github.com/oliverliye/ximageuploader

源码: <!DOCTYPE html><html><head> <meta charset="utf-8"/> <title>html5拖拽效果</title> <style> #d1 { width: 400px; height: 400px; border: solid black 1px; float: left;; } #d2 { width: 400px; height: 400px; bor