随笔分类 - html5
摘要：软件版本： HBuilder : 9.0.2.201803061935 逍遥安卓：5.2.2 webview相当于一个浏览器的tab，通过在webview中修改，模拟器端会实时刷新效果。从而达到调试手机app开发的效果。一般调试的有样式和数据请求。 注意调试的时候，当模拟器端切换webview的时候
阅读全文
摘要：以前排版排的比较少，没有设计图的那种，我们后端一般都是用框架或者仿照样式，最近公司需要定制一个企业站，要还原设计稿。我在排版中大量用到了垂直居中与水平居中。 1，传统的水平居中（固定宽度居中），如一个div，宽1200 2，水平与垂直居中，网上有很多种方式，我现在用的是这种方式 这个方法使用绝对定位
阅读全文
摘要：最近在公司，需要开发一款智能家居APP，用到MUI框架，首先就是环境搭建，写好的APP页面，怎么跑在模拟器上运行？ 我的开发环境: HBuilder版本：9.0.2.201803061935 逍遥安卓：5.2.2 逍遥安卓需要开启USB调试模式，一般在模拟器的"设置"那里 最早用的是海马玩模拟器，这
阅读全文
摘要：利用canvas，实现一个下雪的效果，我们先预览下效果： 我们先分析下这个效果： 1，随机产生雪花 2，雪花的产生不是同时产生，而是有先后顺序的 3，雪花怎么表示 4，怎么源源不断的下雪 5，雪花有大有小 搞清楚上面几个问题之后，这个效果基本上就实现了， 首先，由于这个是全屏效果，我采用动态创建ca
阅读全文
摘要：在canvas中，要画出1px的线条，默认情况下是不行的 上述代码中，context是canvas的上下文，在这段代码中，我画了2条线，上面那条线并不是1px，下面的那条线才是1px 上面你可能还看不清楚，那条黑线到底是不是1px，你可以把他们放到画图软件或者photoshop中，放大，然后打开坐标
阅读全文
摘要：这个绘图工具，我还没有做完，不过已经实现了总架构，以及常见的简易图形绘制功能： 1，可以绘制直线，圆，矩形，正多边形【已完成】 2，填充颜色和描边颜色的选择【已完成】 3，描边和填充功能的选择【已完成】 后续版本： 橡皮擦，坐标系，线形设置，箭头，其他流程图形，裁剪与调整图形。。。。。 终极目标：
阅读全文
摘要：综合利用前面所学，实现一个绚丽的小球动画，这个实例用到的知识点，在我的博客全部都有，可以去这里查看所有的canvas教程 <head> <meta charset='utf-8' /> <title>canvas炫彩小球 - By ghostwu</title> <style> #canvas {
阅读全文
摘要：备注：本文后面的代码，如果加载了ball.js，那么请使用这篇文章[js高手之路] html5 canvas动画教程 - 匀速运动的ball.js代码. 边界反弹： 当小球碰到canvas的四个方向的时候，保持位置不变，把速度变成相反的方向 原理跟之前写的文章[js高手之路]html5 canvas
阅读全文
摘要：备注：本文后面的代码，如果加载了ball.js，那么请使用这篇文章[js高手之路] html5 canvas动画教程 - 匀速运动的ball.js代码. 本文，我们要做点有意思的效果，首先，来一个简单的边界判断，所谓边界判断：就是把物体的运动限定在一个范围内.我们先来一个简单的实例，在canvas上
阅读全文
摘要：上节，我们讲了匀速运动，本节分享的运动就更有意思了： 加速运动 重力加速度 抛物线运动 摩擦力 加速运动: 加速度分解与合成 抛物线运动： 重力弹跳: 抛物线与重力弹跳运动 摩擦力运动
阅读全文
摘要：匀速运动：指的是物体在一条直线上运动，并且物体在任何相等时间间隔内通过的位移都是相等的。其实就是匀速直线运动，它的特点是加速度为0，从定义可知，在任何相等的时间间隔内，速度大小和方向是相同的。 上述实例让一个半径20px的小球 从x=0, y=canvas高度的一半，以每帧2px的速度向右匀速运动.
阅读全文
摘要：效果图： 这个实例主要注意: 1，剩余时间的计算 2，每个时间数字的绘制 时间主要有0-9和一个冒号组成，用数组来表示( 0: 就是不画圆，1：就是画一个蓝色的圆 ) num.js文件： 1 var digital = 2 [ 3 [ 4 [0,0,1,1,1,0,0], 5 [0,1,1,0,1,
阅读全文
摘要：七巧板长什么样？ 用canvas把他画出来，其实就是把这7个区域的图形，每个点的坐标找出来，再用moveTo, lineTo连线，设置不同的颜色即可。 tangram存储了每个形状的顶点坐标与填充颜色，p就是每个区域的顶点组成的数组，数组中每个点用一个json对象存储.，一个有7个形状，tangra
阅读全文
摘要：有了前面的canvas基础之后，现在开始就精彩了，后面写的canvas教程都是属于综合应用，前面已经写了常用的canvas基础知识,参考链接如下： [js高手之路] html5 canvas系列教程 - 认识canvas以及基本使用方法 [js高手之路] html5 canvas系列教程 - 掌握画
阅读全文
摘要：在requestAnimationFrame出现之前，我们一般都用setTimeout和setInterval，那么html5为什么新增一个requestAnimationFrame，他的出现是为了解决什么问题？ 优势与特点： 1)requestAnimationFrame会把每一帧中的所有DOM操
阅读全文
摘要：接着上文[js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)继续. 一、线形渐变 线形渐变指的是一条直线上发生的渐变。 用法： var linear = cxt.createLinearGradient( x1, y1, x2, y2 ); line
阅读全文
摘要：接着上文[js高手之路] html5 canvas系列教程 - 状态详解(save与restore)，相信大家都应该玩过美颜功能，而我们今天要讲的就是canvas强大的像素处理能力，通过像素处理，实现反色，黑白，亮度，复古，蒙版，透明等美颜效果. getImageData：获取一张图片的像素数据 c
阅读全文
摘要：本文内容与路径([js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解)是canvas中比较重要的概念。掌握理解他们是做出复杂canvas动画必要的基础之一. 再谈clip函数，这个函数在这篇文章[js高手之路] html5 canvas系
阅读全文
摘要：接着上文[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)继续，本文介绍的内容是canvas开发，特别是游戏中，比较常用的内容：图片处理。在游戏中的资源大多数都是加载图片.
阅读全文
摘要：接着上文线条样式[js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)继续. canvas提供两种输出文本的方式： strokeText：描边文本 fillText：填充文本 fillStyle配合fillTe
阅读全文