- 博客(10)
- 资源 (1)
- 问答 (1)
- 收藏
- 关注
RSS订阅转载 玩转html5 canvas
1、前言 <canvas></canvas>是html5出现的新标签，像所有的dom对象一样它有自己本身的属性、方法和事件，其中就有绘图的方法，js能够调用它来进行绘图 ，最近在研读《html5与css3权威指南》下面对其中最好玩的canvas的学习做下读书笔记与实验。 2、基本知识context:一直觉得这个翻译成“上下文”真够蛋疼的，context是一个封装了很多绘图功能的对象，获取这个对象的
2016-06-24 11:06:06
802
原创 canvas 常用方法
beginPath() 新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。 closePath() 闭合路径之后图形绘制命令又重新指向到上下文中。stroke() 用线条绘制图形轮廓。 fill() 填充路径的内容区域生成实心的图形。moveTo(x, y) 将笔触移动到指定的坐标 (x, y) lineTo(x, y) 绘制从当前位置到指定位置 (x, y) 的直线。arc(x,
2016-06-22 15:06:38
1600
转载 canvas 裁切路径 Clipping paths
裁切路径和普通的 canvas 图形差不多，不同的是它的作用是遮罩，用来隐藏没有遮罩的部分。和 globalCompositeOperation 属性作一比较，它可以实现与 source-in 和 source-atop 差不多的效果。最重要的区别是裁切路径不会在 canvas 上绘制东西，而且它永远不受新图形的影响。这些特性使得它在特定区域里绘制图形时相当好用。clip() 我们用 clip 方法
2016-06-21 18:25:31
717
转载 canvas globalCompositeOperation
globalCompositeOperation 可以在已有图形后面再画新图形，还可以用来遮盖，清除（比 clearRect 方法强劲得多）某些区域。 使用：globalCompositeOperation = type; 效果图如下： 不知为什么，source-in、source-atop 效果没出来 不知为什么，destination-in、destination-out 效果没出来
2016-06-21 16:01:26
1121
1
转载 canvas 变形记——移动、旋转、缩放、变形
canvas 有几个变形形式：移动、旋转、缩放、变形。在做变形之前先保存状态是一个良好的习惯。大多数情况下，调用 restore 方法比手动恢复原先的状态要简单得多。又，如果你是在一个循环中做位移但没有保存和恢复 canvas 的状态，很可能到最后会发现怎么有些东西不见了，那是因为它很可能已经超出 canvas 范围以外了。1、移动 Translate translate用来移动 canvas 和它
2016-06-21 14:41:51
4773
转载 canvas 状态的保存和恢复 Saving and restoring state
在了解变形之前，我先介绍一下两个在你开始绘制复杂图形就必不可少的方法：save()、restore()，save 和 restore 方法是用来保存和恢复 canvas 状态的，都没有参数。Canvas 的状态就是当前画面应用的所有样式和变形的一个快照。Canvas 状态是以堆（stack）的方式保存的，每一次调用 save 方法，当前的状态就会被推入堆中保存起来。这种状态包括：strokeStyl
2016-06-21 10:07:48
746
转载 永远不要使用 Boolean 对象
var falseObject = new Boolean(false);var result = falseObject && true;console.log(result); //truevar falseValue = false;result = falseValue && true;console.log(result); //false在这个例子中，我们使用 false 值创
2016-06-20 13:11:09
6595
原创 node.js安装过程遇到的问题
使用的node版本：0.10.29（32/64WinXP/Vista/Win7/Win8/Win10），戳我下载1、’node’ 不是内部或外部命令，也不是可运行的程序或批处理文件。网上查找资料是说npm安装出现了问题，全局模块目录没有被添加到系统环境变量。查看环境变量确实没发现npm的路径，添加上便好了（C:\software\nodejs\node_modules\npm）2、安装gulp失败再
2016-06-17 14:48:03
1609
原创 本机IIS的用法
win7系统已经默认安装了IIS（中文：Internet 信息服务），但该功能是关闭的，要使用它，就得先开启它。开启IIS：控制面板=》程序和功能=》打开或关闭windows功能，找到Internet 信息服务(IIS)，选上即可（全选了，不过第一项没被选中）。等待一段时间（一分钟内）。开启后，就可以在本机弄网站了。首先打开控制面板=》管理工具=》Internet 信息服务(IIS)管理器，双击。进
2016-06-14 12:23:33
806
原创 懒加载（lazyload）源码解读
本文使用的lazyload版本是1.9.7，戳我下载该版本先来看看懒加载元素与懒加载视口的关系。什么是视口呢？视口是指图片可加载区域，在视口范围内，懒加载元素的图片可能已经加载完或即将加载或正在加载以渲染给用户看。那么元素与视口与有怎样的关系呢？看下面1~41、元素出现在视口下方设fold为屏幕的高度、页面滚动scrollTop、threshold 之和，它与懒加载元素的顶部偏移量Y进行比较。 f
2016-06-13 18:29:43
1529
jquery.lazyload.1.9.7.js
2016-06-14
应届毕业生如何进行前端 jquery/js 架构实现
2016-07-22
TA创建的收藏夹 TA关注的收藏夹
TA关注的人