写在前面 上一节我们认识了Phaser.js，也说到了Phaser比较适合开发2D的小游戏，那么接下来的几篇文章会以开发一个移动端的小游戏为例，来介绍如何上手Phaser.js。这一节的主要内容是用Phaser.js搭建游戏的骨架。 游戏相关的一些概念 画布 一般来说，做游戏的话基于Canvas会比 ...
分类：
Web程序 时间：
2020-05-15 20:14:56
阅读次数：
75
效果展示理论基础——“常见的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
发布视频时候，经常需要上传同时上传视频的缩略图，近日，应产品经理的的要求，需要做一个发布视频动态的功能，我第一反应就想到了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
