摘要：
/*common*//** * canvas图片压缩 * @param {[Object]} opt [配置参数] * @param {[Function]} cbk [回调函数] * @return {[Void]} * example: * var opt = { 'type' : 1,//为1为预览，建议不为1或后期进行改进 'file' : "#loadFile"//文件上传控件},_compress = require('app/compress');_compress(opt,function (result) { 阅读全文
摘要：
本来没准备今天发博客的，在一个前端群中，一位老大哥风自由提出了一个简单却很奇特的问题：有一个字符串是这样的：var s = '<html lang="en" class="js no-touch discourse-no-touch">'+ '<head><meta name="csrf-token" content="Oul7WqVh4FBVse2yGeY8ZkqoN5/9/2ImxohJvUYEJYc="/></head><body& 阅读全文
摘要：
居然有好几个月没有更新博客了。。。我堕落了。。。大家好，通过上一次的学习我们简单了解了非常重要的几个特性：坐标原点位移与状态保存。这两个特性对于canvas的使用有着非常多的帮助，在以后的学习中我们要渐渐接触更多与之有关的使用。同样的，在以后的使用中大家也会反复的使用这两个功能。所以希望大家可以多多练习，以熟练掌握它们。今天我们来学习新的方法，首先是rotate方法，这个方法的作用是以中心为原点旋转canvas。在上次的学习中我们曾经对translate的使用进行了分析，曾经提起过以中心为原点的旋转问题，下面我们就准备来学习这个方法了。rotate(angle)这个方法只接受一个参数：旋转的角 阅读全文
摘要：
JS实现round方法（原生） 阅读全文
摘要：
冒险上一次首页吧，毕竟不是自己的东西，希望不要被喷。。。大家好，经过前几次的学习，相信大家对canvas标签的使用已经有了一个大概的思路，也学习到了基本的用法。那么我们今天来学习一点对图像处理的基本方法：变形。啥叫变形呢？好比你是一个胖子，把你拉高了挤瘦了弄成一个瘦子，这就叫变形。也就是说，变形就是对图像的形状进行变化，但不对其内容进行改变的过程。在了解变形之前，我先介绍一下两个在你开始绘制复杂图形就必不可少的方法。save()restore()save和restore方法是用来保存和恢复canvas状态的，都没有参数。Canvas的状态就是当前画面应用的所有样式和变形的一个快照。啥意思？其实 阅读全文
摘要：
前几天看到了一道题目，要求以O(n)复杂度下实现数组的去除重复项。算法不好的自己首先想到的是蛮力法，简单想想后发现时间复杂度是O(n²)，完全不符合题目要求。之后想到了哈希字典的方式，在JS下简单模拟了一下，代码如下： 1 var a=["A", 2, 3, 1, 4, 7, 2, 2, "s", 1], 2 b=[], 3 c=[], 4 m=0; 5 for(var i=0; i<a.length; i++){ 6 if(!b[a[i]]){ 7 c[m++]=a[i]; 8 b[a[i]... 阅读全文
摘要：
前两天工作之中遇到了个小问题，后台希望将色值传递的时候以十六位的形式传递，但是因为不同浏览器之间的差异性，导致传递的色值有时是rgb形式的，因此在参考了网上的代码之后改了一个方法用以转换。首先是转换的思路，rgb是以三原色进行表述的，将其中的三个数字分别转换为两位16进制的数字后相拼接，之后在前面加上#便成为了16位的表述方法。如何提取三原色中的三个数字，方法不止一种，我采用的是以match进行全局查找，通过正则获取连续的数字。而10进制与16进制的转换则是利用了数组查询的方式，先将10进制的数字与16相除，将商与余数分别进行数组查询，然后进行拼接。具体的代码如下：function RGBTo 阅读全文
摘要：
大家好，我又回来了。。。不知道大家记得不记得，我们曾经用双重循环做过一个图案的拼接，以达到一个平铺的效果。不知道你有没有考虑过一件事情，就是平铺能不能实现的更简单一点。比如在CSS的background属性中，就有repeat属性和来实现这个效果，那么，在canvas里可以吗？可以。。。其实，有一个更加简单的方法：createPattern。createPattern(image,type)该方法接受两个参数。Image可以是一个 mage 象的引用，或者另一个canvas对象。Type必须是下面的字符串值之一：repeat，repeat-x，repeat-y和no-repeat。图案的应用跟 阅读全文
摘要：
欢迎回来，上次我们具体的分析了canvas中对于线段的绘制，今天我们要接触的是渐变。首先，什么是渐变。你看到过彩虹么？对了，彩虹的颜色过渡不是一段是红色一段是黄色对吗？它是一点一点的变化的颜色，由红色一点一点变到黄色的。彩虹的颜色就是一个渐变，也就是说这种色彩逐渐变化的过渡效果就是一个渐变效果。就好像一般的绘图软件一样，我们可以用线性或者径向的渐变来填充或描边。我们用下面的方法新建一个canvasGradient对象，并且赋给图形的fillStyle或strokeStyle属性。createLinearGradient(x1,y1,x2,y2)createRadialGradient(x1,y 阅读全文
摘要：
上次我们一起学习了canvas对于颜色与透明的调整，今天我们来学习一下线型、渐变、图案与阴影的相关知识。首先是线型，在canvas对象中我们可以用一系列的属性来控制线的样式。lineWidth = valuelineCap = typelineJoin = typemiterLimit = value我觉得用例子来讲解要比单纯的介绍好得多，这也是我一贯的风格。让我们先上代码：function draw() { var ctx = document.getElementById('canvas').getContext('2d'); for (var i = 0; 阅读全文