敝校的教务管理系统（貌似不止我们学校用呢），一到选课时间服务器各种崩不解释，有时为了选个课就要反复输入验证码，一想到千千万万的大学生把时间浪费在输入验证码上面，我就觉得，我有义务拯救一下人类。 搜了一下，看到这篇文章，3年前的文章了。我参考了前半部分，借助TamperMonkey这个插件，大概实现了想要的效果。可以在Userscript获取这个脚本，GitHub上面也有，代码写得丑，求debug，求指教。 说下思路：HTML 5中的canvas...
继续讲canvas中画曲线的方法，今天讲quadraticCurveTo。 说实话这个方法有点吓人，单从函数名称上都可以初体验。话说，我觉得有必要把这个函数名缩短。 quadratic的意思是二次，即数学中二次元方程那个二次。而ctx.quadraticCurveTo的参数如下： 代码如下: ctx.quadraticCurveTo(x1,y1,x,y); 其中x,y是终点的坐标，而x1,y1是曲线控制点的坐标？什么？你问我起点在哪里？起点在此之前用moveTo确定。 我之所以把控制点的坐标带上序号...
如果你还不知道Canvas是什么，可以看看上一篇. 在学画画的时候，线条是最基本的了，而线条的连接可以组成任何图形。在Canvas中也是如此。 在开始之前我们先拿出画布和画笔： 代码如下: var cvs = document.getElementById(cvs); //画布 var ctx = cvs.getContext(2d); // 画笔 我们画画的时候，落笔点是不固定的，随时都会变。canvas虽然不是通过手来决定落笔点，但也有一个方法,就是moveTo。moveTo的作用相当于把笔尖提离画布，然...
虽然大家都称Canvas为html5的新标签，看起来好像Canvas属于html语言的新知识，但其实Canvas画图是通过javascript来做的。所以，如果你想学习Canvas画图，你必须要有Javascript基础。 另外，画图嘛，总有一些图像方面的术语和知识点，所以如果你有过做图或美工经验，学习Canvas会更容易。 Canvas，意为画布也。而Html5中的Canvas也真的跟现实生活中的画布非常相似。所以，把他看成一块实实在在的画布可以加快理解。 画布 用canvas作...
上一篇文章讲了canvas的arc方法，这一篇讲和他有关的arcTo方法。 arc与arcTo，从名字都能看出来相似。arcTo也是画曲线的方法，而且他画出的曲线也是正圆的一段弧线。但他的参数和arc简直是不共戴天~ ctx.arcTo(x1,y1,x2,y2,radius);arcTo的参数中包括两个点，而且这两个点中并没有表示圆心的点，仅仅最后的参数是圆的半径，表示arcTo和圆有那么点关系。 网上关于arcTo的文章很少，好不容易找到一篇还是外国的；而且canvas画图木有直...
在canvas画线条这篇文章中，我讲了画直线的方法，按理这篇画曲线的文章早该发了，但由于canvas画曲线比较特殊，我还没摸透，所以要一步步尝试。 canvas里画曲线的难点之一，就在于他连曲线的函数就有4个！分别是arc,arcTo,quadraticCurveTo,bezierCurveTo.我从最简单的arc方法讲起吧。 arc的作用是画一个正规的圆弧，可以是一个完整的圆，也可以是一个圆的某一段弧线。 arc的语法如下： 代码如下: context.arc(x, y, radius, start...
一般绘图的方式有两种，即填充和描边，前面的文章已经讲了描边的方法stroke，本文就讲一下Canvas中填充图形的方法。 填充即fill(),很直白吧？而且和strokeStyle表示描边样式一样，fillStyle即表示填充样式。 ctx.fillStyle = '颜色';默认的填充样式是不透明的黑色 提问：未闭合的路径可以填充吗？ 可以。Canvas会从你当前路径的终点直接连接到起点，然后填充。如图： 但你可以发现，最后一段没有描边。 记得我们前一篇文章用4条线画...
接上一篇canvas画线条教程 上次我们讲到，canvas有时候会出现1像素的线条模糊不清且好像更宽的情况，如下图： 这样的线条显然不是我们想要的。 这篇文章的目的就是弄清楚里面的原理，以及解决它。 大家都知道屏幕上最小的显示尺寸就是1像素，虽然小于1像素的东西可能显示不出来，但计算机可不管，他会试着画一下。 其实像素终究来说也是一个单位，假如我们把画布放大到足够大，足以看清楚每个像素，会是什么情况呢？大概是这个样子...
在canvas中可以很方便的用arc方法画出圆形，本来圆形也可以看作是一个宽高相等的椭圆，但canvas中根本没有画椭圆的方法，我们要用其他方法来模拟。 我们首先要明确画一个椭圆需要那些参数，基本的几何知识告诉我们，椭圆需要圆心坐标，宽度，高度——或者还有旋转角度，不过这个可以暂时不要，旋转是比较容易的。 1,使用lineTo画椭圆 你没有看错，lineTo这样一个纯粹用来画直线的方法居然可以用来画椭圆！？但他确实存在...
到目前为止，SVG与Canvas的主要特性均已经总结完毕了。它们都是HTML5中支持的2D图形展示技术，而且均支持向量图形。现在，我们就来比对一下这两种技术，分析一下它们的长处和适用场景。首先分析一下两种技术的显著特点，看下面的表格： CanvasSVG基于像素（动态 .png）基于形状单个 HTML 元素多个图形元素，这些元素成为 DOM 的一部分仅通过脚本修改通过脚本和 CSS 修改事件模型/用户交互颗粒化 (x,y)事件模型/用户交互抽象化 (re...
canvas 与 SVG都能够使你在浏览器中画图，但它们的基本原理不同。 SVG SVG是一种在XML中描述二维图形的语言。 SVG是基于XML的，意味着在SVG DOM内每一个元素都是可用的。你可以为每一个元素增加JS事件处理器。 在SVG中，每一个图形被记作一个对象。如果一个SVG对象的属性发生改变，浏览器可以自动重新生成图形。 Canvas Canvas能够在fly上画2D图形（使用JS） Canvas能够按照像素重新生成。 在Canvas中，一旦图形完成，就会被浏览器...
上一篇文章我讲了画矩形和圆形的方法，他们都有原生的canvas绘图函数可完成。而本文讲的圆角矩形则只有通过其他方法模拟出来。 一个正常的圆角矩形，我们先假设他四个角的圆角弧度一致——因为这样比较好画。我们动用把面拆成线条的能力，很容易就能发现圆角矩形其实是由4条钩子般的曲线组成。 提到钩子，如果你看过我介绍arcTo的文章，那么可能你一下就明白了这种图形就可以用arcTo画出来。 我讲arcTo的时候提过，arcTo...
Canvas里绘制椭圆是一个很常见的需求，比较新的HTML Canvas 2D Context W3C草案里面新增了ellipse方法绘制椭圆，但是目前大多数浏览器还没有实现该方法，所以需要用arc或者arcTo方法结合scale变形来绘制椭圆。 示例代码：代码如下: var ctx = documentquerySelector('canvas')getContext('2d'); ctxlineWidth = "10"; ctxscale(1,2); ctxarc(150,150,100,0,MathPI*2,false); ctxstroke(); 有点不对，因为线条粗细不均匀了...
代码如下:try{document.createElement("Canvas").getContext("2d");document.getElementById("support").innerHTML = "OK";}catch (e){document.getElementById("support").innerHTML = e.message;} 加入Canvas代码如下://取得Canvas元素及其绘图上下文var canvas = document.getElementById("diagonal");var context = canvas.getContext("2d");//用绝对坐标来创建一条路径context.beginPath();context.moveTo(70, 140);context.l...
HTML5, 原来如此神奇。程序在google浏览器中测试通过，感兴趣的朋友可以参考本文讲解的HTML5组件Canvas实现图像灰度化的具体步骤，希望对你有所帮助新建一个html页面，在body tag之间加入 代码如下:<canvas id="myCanvas" >Gray Filter</canvas>添加一段最简单的JavaScript 脚本 代码如下:<pre name="code" class="javascript">window.onload = function() { var canvas = document.getElementById("myCanvas"); <span style="wh...