![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
canvas
羽筠
这个作者很懒,什么都没留下…
展开
-
H5中使用CANVAS实现手写签名test
H5中使用CANVAS实现手写签名功能测试demo原创 2023-05-05 11:24:52 · 366 阅读 · 0 评论 -
CANVAS中使用跨域图片toDataURL转base64图片时报错处理
CANVAS中使用跨域图片转base64图片时报错处理:function getBase64(imgUrl) { window.URL = window.URL || window.webkitURL; var xhr = new XMLHttpRequest(); xhr.open("get", imgUrl, true); // 至关重要 xhr.responseType = ...转载 2020-08-30 17:02:07 · 615 阅读 · 0 评论 -
web手势库AlloyFinger运用( 控制CANVAS中图片移动、缩放、旋转) - 可编辑图片指定区域位置
对 web手势库AlloyFinger运用( 控制CANVAS中图片移动、缩放、旋转) 的优化修改,上传的可编辑的图片在指定区域中,计算图片信息以最合适的大小及位置显示// 上传的图片画入指定区域位置设置:// bmp.x = stage.width / 2;// bmp.y = stage.height / 2;// bmp.x = '海报图中显示区域的起始:X' + '海报图中...原创 2020-03-01 18:22:21 · 72789 阅读 · 0 评论 -
循环展示图片(画中画效果)CANVAS2.0版
循环展示图片(画中画效果)CANVAS2.0版之前设计的一版在测试当中有点问题,PC端测试是没有问题的,但在手机上访问时,切屏时就出现闪屏(本就出现的大图没有出现,是之前的小图突然变大,一闪而过,然后再显示正常的大图)问题,总结原因,应该还是在移动端加载慢的问题这一版做了优化,第一屏时加载三张图片,把下一屏的图预加载出来,到下一屏的时候,只需再预加载下一屏的一张图即可,经过测试,的确不会出原创 2017-07-07 11:12:31 · 2250 阅读 · 0 评论 -
安卓微信中播放视频终于可以不再自动全屏啦
最新的设置安卓视频不全屏播放(不知道是否全部安卓机型都支持)的方法前两天做了一个石头剪刀布的视频游戏项目,测试过程中找到了更加简便的方法,分享下,如下设置HTML代码:<video id="videoID" controls src="XXX" poster="XXX.jpg" preload="auto" x-webkit-airplay="true" x5-playsinline=&qu原创 2017-05-27 14:08:24 · 27718 阅读 · 9 评论 -
使用jquery.qrcode生成二维码
1、HTML部分设置代码:<div id="code"></div>2、包含jquery.qrcode.js(https://github.com/jeromeetienne/jquery-qrcode/blob/master/jquery.qrcode.min.js)<script type="text/javascript" src="jquery.qrcode....原创 2018-03-06 17:05:39 · 469 阅读 · 0 评论 -
ajax结合php处理图片
1、处理保存 base64编码 的图片,并返回保存的图片URL(可用来处理保存CANVAS转成的图片的)2、处理图片,并返回 base64编码 的图片(一般解决JS跨域的问题)demo代码(测试请用服务器环境:localhost):<!DOCTYPE><html><head><meta http-equiv="Content-Type" ...原创 2018-07-31 17:29:18 · 1112 阅读 · 0 评论 -
canvas单、多行文本通过配置参数循环写入
canvas单、多行文本通过配置参数循环写入demo:<!DOCTYPE html><html><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/><原创 2018-10-19 10:56:38 · 1150 阅读 · 0 评论 -
canvas粒子线条插件使用
canvas粒子线条插件使用demo:<!doctype html><html><head><meta charset="utf-8"><title>particlesJs test</title><style>*{ margin:0; padding:0;}&原创 2019-02-21 15:18:51 · 843 阅读 · 0 评论 -
微信小程序刮刮乐
网上找了个插件,scratch.js下载地址:https://github.com/FrontendMing/scratch-in-wx-miniprogram个人对scratch.js做了一些修改,设置清除面积达到一定值时(if (clearNum > .2) ),使刮卡刮干净,并触发(结果交互)方法;测试时 调试基础库(project.config.json 文件中参数:"lib...原创 2019-07-08 14:45:18 · 27247 阅读 · 1 评论 -
涂抹CANVAS,判断清除完毕执行操作
涂抹CANVAS,判断清除完毕执行操作clearCanvas.js代码如下:function clearCanvas(imgSrc,Bl,callback){ var ctx = null; var mouseX = null; var mouseY = null; var _width = 0; var _height = 0; function touchStartEven原创 2017-07-24 21:04:22 · 193820 阅读 · 0 评论 -
循环展示图片(画中画效果)
循环展示图片(画中画效果),页面展示效果就是每次显示两张叠加起来的图片,上面的一张图在下面的图的里面,画面不断的缩小,当下面的一张图缩放到窗口大小时它自己切换成上面的图片,叠加在另一张新加载的图片(下面的图)的上面最先设计的一版是用JS定时器不断控制HTML中两张图片的大小、定位信息的,为了使其看上去有不间断的变化效果,加上了CSS3过渡的效果,此功能实现的所有HTML/CSS/JS都直接原创 2017-07-06 16:50:41 · 3346 阅读 · 0 评论 -
CSS3 Filter兼容性表
CSS3魔法堂:CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解CSS3 Filter兼容性表SVG effect for HTML兼容性表转载 2016-06-16 10:27:27 · 6774 阅读 · 0 评论 -
引用canvas生成的图片
引用canvas生成的图片,AJAX请求获得PHP页面生成的canvas新图原创 2016-05-03 17:48:26 · 2418 阅读 · 0 评论 -
CANVAS实现图片模糊(处理库StackBlur.js)
之前解决一些浏览器不支持CSS滤镜模糊图片,用的方法是SVG,但用SVG模糊滤镜,图片大小不好控制,每次都是边测试边调整宽高但现在要做一个页面的要求是,一张图片,根据访问者来显示其状态,没有与此条动态交互的用户看到的图片是模糊的,点赞或评论后才可以见到不模糊的图片,所以就想到用CANVAS绘制图片叠在图片上,控制其显示与隐藏即可CANVAS模糊用到了处理库StackBlur.js。这个原创 2016-06-14 14:57:27 · 5787 阅读 · 0 评论 -
Canvas文本换行处理
自己改了下方法,如下:调用:var my_cvs = document.getElementById("my_cvs");var ctx_2d = my_cvs.getContext("2d");writeTextOnCanvas(ctx_2d,30,24,'文字内容文字内容文字内容文字内容',182,607);函数:转载 2016-08-10 17:18:35 · 7918 阅读 · 0 评论 -
CANVAS移动、缩放、旋转画入的图片
自己做的一个CANVAS移动、缩放、旋转画入的图片demo:CANVAS touch测试*{ margin:0px; padding:0px; -webkit-tap-highlight-color:rgba(0,0,0,0); box-sizing:border-box;}html{ min-width:320px; max-width:640px; marg原创 2016-08-16 14:49:33 · 13366 阅读 · 0 评论 -
canvas刮刮卡
canvas刮刮卡实例,我修改前功能已经完成只是移动端开发时,用比例(rem)单位时,测试时所刮位置有些偏,我自己相应改了一下还有就是刮到一定程度时提示刮奖的结果,之前设置的是一个不定数值(设置不同色,数值都是变动的),要时时监控设置,我改了一下,改成可以设置成刮到指定百分比时提示刮奖结果,可灵活设置,设置如:(//刮了90%的数值gnumBIG = (w * h / 16) *原创 2016-08-22 17:44:23 · 610 阅读 · 0 评论 -
web手势库AlloyFinger运用( 控制CANVAS中图片移动、缩放、旋转)
web手势库AlloyFinger(alloy_finger.js),针对多点触控设备编程的Web手势组件,快速帮助你的web程序增加手势支持非常灵活,省去了自己写相应操作的代码,就能控制元素移动、缩放、旋转了http://alloyteam.github.io/AlloyFinger/example/canvas/此网址的案例就是控制CANVAS中多张图片操作的,此案例实现不仅引用了al原创 2016-09-06 17:16:00 · 12922 阅读 · 8 评论 -
使用canvas 绘制一个有限度的斐波那契数列的曲线
昨天看到“前端面试中的常见的算法问题”的一篇文章,感觉有点挑战,所以才要实现使用canvas 绘制一个有限度的斐波那契数列的曲线,刚开始真是想破脑袋也实现不了,被下图中交接的线条搞得很懵,先只能手动一条一条的画出弧线,但一直认为肯定有规律可循的,脑子真是不太好啊,好在最后理清思路,找到规律,根据规律定义好所有重要的点,再按点循环画出线条,呵呵,记录一下斐波那契数列,又称黄金分割数列,指原创 2016-12-01 17:56:26 · 3077 阅读 · 0 评论 -
html2canvas浏览器截屏
html2canvas实现浏览器截屏,根据DOM元素样式截图通过html2canvas方法调用插件,该方法接受两个参数,第一个为要生成截图的DOM元素,第二个参数为插件的配置demo: html2canvas浏览器截屏*{ margin:0; padding:0;}body{ text-align:center; padding-top:50px;}#box{ d原创 2016-11-22 14:30:11 · 1318 阅读 · 0 评论 -
HTML5之canvas剪切图片
有时UI设计效果图,设定图片某个角不可见,但上传的图片又不全是PNG透明图,那么Canvas就能帮忙解决困扰啦,自己根据需求做的一个实例,实现这样的效果原创 2015-12-17 13:58:46 · 2515 阅读 · 1 评论