1. 共享单一绘图区域的坐标轴 有时候，我们想将多张图形放在同一个绘图区域，不想在每个绘图区域只绘制一幅图形。这时候，就可以借助共享坐标轴的方法实现在一个绘图区域绘制多幅图形的目的。 同样可以用 方法共享y轴 2. 共享不同子区绘图区域的坐标轴 函数有两个命名关键字参数 和`sharey`，有四种取 ...
分类：
编程语言 时间：
2020-05-15 00:21:09
阅读次数：
283
效果展示理论基础——“常见的canvas优化——模糊问题、旋转效果” 用离屏canvas画基础部分 1、封装画线函数 function drawLine(ctx,x1,y1,x2,y2,color){ ctx.save(); ctx.beginPath(); ctx.strokeStyle = co ...
分类：
其他好文 时间：
2020-05-15 00:00:56
阅读次数：
89
canvas常见优化方案——模糊问题、旋转效果、离屏、自定义图片尺寸 实践demo——“canvas离屏、旋转效果实践——旋转的雪花” 2017-12-18 16:27:35更新关于模糊问题 前几天研究html2Canvas的时候刚好赶上作者发布新版本，发现新版本截屏出来的效果比我对旧版本处理后(画 ...
分类：
其他好文 时间：
2020-05-14 23:56:28
阅读次数：
120
前端性能优化列表： 1. JS 减少 DOM 操作 预加载 懒加载 tree shaking 防抖，节流 变量缓存 for遍历优先 接口数据懒请求 2. CSS 减少类的层级 硬件加速（3d canvas webgl） 雪碧图 避免使用滤镜 3. html 减少无效标签 4. 整体 减少 http ...
分类：
其他好文 时间：
2020-05-14 13:19:22
阅读次数：
68
一、功能模块 先看下现在做完的效果： 线上体验：https://wj704.github.io/five_...主要功能模块为：1.人机对战功能2.悔棋功能3.撤销悔棋功能 二、代码详解 2.1 人机对战功能实现 从效果图可以看到，棋盘的横竖可以放的位置为15*15，通过canvas画棋盘： //绘 ...
分类：
Web程序 时间：
2020-05-13 20:36:28
阅读次数：
81
最新版本 V 3.2.5 新增了图片弹幕类型，修改了demo展示页面，调整了部分代码，具体请参看git里的CHANGELOG.md和README.md 文章里主要讲实现方法和设计思想，所以有部分接口依旧是老版本接口，最新的接口请去git里面查看 前言 说实话，从第二版到现在又过了半年，本来以为可能不 ...
分类：
Web程序 时间：
2020-05-13 00:20:56
阅读次数：
102
一、前言 上节通过一个简单的旋转环对自定义view作了一个基本的认识，本文将大致讲解下实现的思路以及对该view的一些可能的改进。 二、思路 主要通过重写 view 中的 onDraw() 方法，利用 canvas 类中的 drawArc() 方法绘制圆弧，其中第一个参数 rectF 是一个浮点矩形 ...
分类：
移动开发 时间：
2020-05-12 17:23:48
阅读次数：
88
CPU VS GPU 关于绘图和动画有两种处理的方式：CPU（中央处理器）和GPU（图形处理器）。但是由于历史原因，我们可以说CPU所做的工作都在软件层面，而GPU在硬件层面 对于图像处理，通常用硬件会更快，因为GPU使用图像对高度并行浮点运算做了优化,我们想尽可能把屏幕渲染的工作交给硬件去处理。问 ...
分类：
移动开发 时间：
2020-05-12 16:54:06
阅读次数：
77
发布视频时候，经常需要上传同时上传视频的缩略图，近日，应产品经理的的要求，需要做一个发布视频动态的功能，我第一反应就想到了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
