发布视频时候，经常需要上传同时上传视频的缩略图，近日，应产品经理的的要求，需要做一个发布视频动态的功能，我第一反应就想到了H5的标签vidio和canvas，在这里记录下我完成该功能的过程：首先，整体思路是创建一个vidio，然后创建一个canvas和一个画笔，调用画笔的drawImage方法，将v ...
分类：
其他好文 时间：
2020-05-10 23:31:59
阅读次数：
111
遇到问题：找到图片img元素后，将参数传给context.drawImage(image,10,10)后图片并没有在画布上展示。 解决方案：在外层嵌套document.images[0].onload=function(){}。 代码如下： document.images[0].onload=fun ...
分类：
其他好文 时间：
2020-05-10 19:35:34
阅读次数：
126
描述 HTML5 <canvas> 标签用于绘制图像（通过脚本，通常是 JavaScript）。 不过，<canvas> 元素本身并没有绘制能力（它仅仅是图形的容器） - 您必须使用脚本来完成实际的绘图任务。 getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。 ...
分类：
Web程序 时间：
2020-05-10 17:04:03
阅读次数：
81
spacetree组织架构图 说明 jquery插件皆可用于react,使用方法:react中使用jquery插件 效果图 定制化内容的效果图 插件说明 很好的canvas的组织架构图，从上到下按层级展示汇报关系, 支持定制化内容，和异步加载子节点(下面会讲到)。 相关api请参考： 官网 或是ex ...
分类：
其他好文 时间：
2020-05-10 15:25:23
阅读次数：
160
在最近的项目中笔者需要做一个新需求：在canvas中实现自定义的路径动画。这里所谓的自定义路径不单单包括一条直线，也许是多条直线的运动组合，甚至还包含了贝塞尔曲线，因此，这个动画也许是下面这个样子的： 那么如何才能在canvas中实现这种动画效果呢？其实很简单，对于路径的处理svg非常在行，因此在c ...
分类：
其他好文 时间：
2020-05-10 10:54:10
阅读次数：
75
最近在做一个项目，需要在前端对图片切片并上传到七牛云 技术要点 canvas.toBlob(blob=>{}); //可将canvas保存成二进制文件 formData.append('file', blob, 'filename'); //将二进制文件添加到FormData中 ajax.send( ...
分类：
其他好文 时间：
2020-05-09 23:08:15
阅读次数：
107
SVG 思考：位图和矢量图的区别？css canvas和svg又有什么区别？ 位图的质量是根据分辨率判定的，分辨率越大，图像画面越清晰；矢量图没有分辨率的概念。位图放大后会越来越不清晰，像马赛克一样；矢量图则不会。 canvas类似于位图，放大后会不清晰，依赖于分辨率。可以引入jpg，png这类格式 ...
分类：
其他好文 时间：
2020-05-09 01:17:43
阅读次数：
68
之前在做「双十一攻略页」的时候就发现这个细节，但是当时没有太在意，今天又遇到了。 createjs 的代码： var stage = new createjs.Stage(canvas); var container = new createjs.Container(); var rect = ne ...
分类：
其他好文 时间：
2020-05-08 17:55:27
阅读次数：
70
首先要指出的是：DisplayObject 实例的属性<x, y> 与 graphics.draw*(x, y, ...) 的参数<x, y>没有关系。 在原生的 Canvas 中有 <x, y> 的概念，例如：ctx.rect(x, y, width, height)。于是我天真地以为 Displ ...
分类：
其他好文 时间：
2020-05-08 13:35:04
阅读次数：
83
无法实现动态字体引入 这个属于小程序设计问题，因为无法动态创建 css，所以也就无法引入动态生成的 css。一种解决办法是使用后端生成图片，然后页面引入图片。例如使用 node-canvas 模块，比较麻烦就是要在服务器上配置好字体。 小程序后续可能会引入载入自定义字体方案来解决这个问题。 canv ...
分类：
微信 时间：
2020-05-08 13:26:38
阅读次数：
80
