背景:一直都对canvas挺有有兴趣的,之前刚刚看了<HTML5 CANVAS基础教程>,写了篇读书笔记. 起因:老婆发来一张最近比较热的漫画图(友谊的小船说翻就翻什么的).这种漫画,经常PS一下,换个对白,就可以有许多个版本.想起canvas里面有对图片和文字编辑的功能,于是,想着可不可以用canvas实现自己编辑漫画的对白的功能.于是,画了一天的时间,修修改改,弄了个H5的页面出来. 功能说明:自己编辑对白,加入漫画背景当中去,生成一张新的漫画图片 优点:1.编辑完成后可以自动生成图片,可…
手把手教你使用 js 实现一个 Canvas 编辑器 拖拽 缩放,等比缩放 导出 image 模版 撤销,重做 OOP,封装,继承,多态 发布库 CI/CD (gitlab/github) ... https://caniuse.com/?search=canvas Canvas API toDataURL() https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL refs https://ove…
前言 一年多没更新博客了,原因是疫情期间<骑马与砍杀2>发售,然后去写游戏MOD去了. 用C#大概写了7个月的游戏MOD,每天晚上肝到很晚,然后期间又因为介绍这个游戏MOD,学习了PR,然后做起了B站的UP主. 再到后面有了些别的想法和公司业务调整,也懒得写博客,不知不觉一年多也就过去了. 收获还是有的: 比如在断更这个MOD时,不论是在中文站还是3DM的MOD站,这个MOD的下载量都是排第一的,而且甩第二名相当远.如果有玩<骑砍2>MOD的朋友,应该猜出来我是谁了. 又比如在B站…
5. 附加属性实践:自定义Canvas 附加属性在UWP中是一个十分重要的组成部分,很多功能都依赖于附加属性实现,典型的例子是常用的Grid和Canvas.通常附加属性有三个使用场景:插入属性.触发行为.当做缓存.可以参考以下提供的MyCanvas示例理解这三点. 5.1 插入属性 这里实现的MyCanvas继承自Panel,是一个十分简单的类(作为示例并没有十分严格的验证等代码,所以只有几十行代码),它实现了和Canvas类似的布局并且提供了Left和Right两个附加属性.使用方式如下: <…
Update:回复量有点大,楼主工作期间可能无暇向童鞋们发送源码,为了不让童鞋们久等,现公布源码地址.  链接: http://pan.baidu.com/s/1sjpYW4d 密码: zhp9 请注意,源码中有Blend模型,如不能成功导入模型,请安装Blender.  再次向点推荐的童鞋们表示感谢! 在一年多前知道了Unity这款游戏引擎.在得知她极大地简化游戏开发的难度并可以使用我最熟悉的C#开发后,便毅然决然地开始学习Unity3D.说来惭愧,期间,由于个人原因,学习断断续续,直到现在才…
1. Eric Raymond有一篇著名文章<大教堂和集市>(The Cathedral and the Bazaar). 他说,世界上的建筑可以分两种:一种是集市,天天开放在那里,从无到有,从小到大:还有一种是大教堂,几代人呕心沥血,几十年才能建成,投入使用. 当你新建一座建筑时,你可以采用集市的模式,也可以采用大教堂的模式.一般来说,集市的特点是开放式建设.成本低.周期短.品质平庸:大教堂的特点是封闭式建设.成本高.周期长.品质优异. Eric Raymond就问了一个问题,有没有可能用修…
周末好,今天给大家带来一款接地气的环形进度条组件vue-awesome-progress.近日被设计小姐姐要求实现这么一个环形进度条效果,大体由四部分组成,分别是底色圆环,进度弧,环内文字,进度圆点.设计稿截图如下: 我的第一反应还是找现成的组件,市面上很多组件都实现了前3点,独独没找到能画进度圆点的组件,不然稍加定制也能复用.既然没有现成的组件,只有自己用vue + canvas撸一个了. 效果图 先放个效果图,然后再说下具体实现过程,各位看官且听我慢慢道来. 安装与使用 源码地址,欢迎sta…
1. 由于canvas画布在网页中, 所以需要在html中添加canvas标签: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <!-- 创建一个宽300px, 高300px的画布环境 --> <c…
该demo放于tomcat下运行,否则出现跨域错误 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body style="height: 100%; margin: 0"> <div style="text-align: center;"> <canvas id=" st…
Most designers on dribbble have a personal portfolio website that usually consists of a name and a bit about themselves – maybe even some work. When it comes to updating this static page you usually put it off in favour of the booming community of dr…