Articles with canvas

绘制贝塞尔曲线

绘制贝塞尔曲线

只是靠直线和弧线来画图是不够的,面对一些更加复杂但是有规律的图形时,我们需要另外一个更加强而有力的工具——贝塞尔曲线。 在 canvas 里,贝塞尔曲线有二次方和三次方两种形式,区别就在于控制点的数目,二次方的只有一个控制点,而三次方的则有两个。 quadraticCurveTo(cp1x, cp1y, x, y) bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) 这里的贝塞尔曲线的用法同样的很简单的,但是却不像在 Photoshop 或者 Illustrator 里画曲线那么轻巧了,它是非常需要触觉和耐心的。所以上面强调了有规律这个关键词。 实际上是什么感觉,大家亲身体验吧,看看下面的示例。 var colors = ["ec460c", "1e951e", "2692f7", "ea62f6"]; var cp1 = 60; var cp2 = 160;…

Continue reading

绘制弧线

在 canvas 里绘制弧线也是非常简单的。 arc(x, y, radius, startAngle, endAngle, anticlockwise) x, y 是圆心坐标,radius 是圆弧的半径,startAngle,endAngle分别是弧线起点和终点的弧度,注意,是弧度,而不是度,它们之间可以通过 function radian(degrees) { return (Math.PI/180)*degrees } 来进行转换。最后 anticlockwise 用于指示弧线绘制的方向,true 时表示逆时针方向。 var canvas = document.getElementById('myCanvas'); var size = 220; canvas.width = canvas.height =…

Continue reading

绘制直线

在了解 如何绘制 canvas 里唯一的基本形状——矩形 之后,现在可以转入使用路径了。路径不仅仅是线条,只是习惯性的会从线条开始,而直线可算是最简单的线条了。 使用路径,是有套路的。 创建、绘制、关闭和填充或者勾勒形状。 beginPath() // actual drawing closePath() stroke() fill() 两点确定一条直线,在 canvas 里也不例外的。 lineTo(x, y) x, y 只是终点的坐标,起点坐标是隐含的,并且取决于前一操作。简单来说,上一操作的终点就是当前直线的起点。新建 canvas 时起点就是原点。另外还可以通过这个方法: moveTo(x, y) 来移动起始坐标。moveTo 顾名思义就是移动坐标用的,它一般用于重设起始坐标,大多数情况下路径都不是起于原点的,而且在绘制一些不连续的路径时非常有用。 var x = 60; var y =…

Continue reading

Canvas中的矩形

在canvas的世界里,只有一种基本图形——矩形,听起来很难以想象啊,复杂的图形怎么办呢?很多时候复杂问题总有简单的解法的。杀手锏就是路径,用路径和路径组合就可以绘制出相当复杂的图形,很浓重的矢量味道噢。像在 Illustrator 这类矢量设计软件里,路径就是一切的基础。是不是意味着,canvas 同样是矢量世界呢? 还是先搞定仅有的一种基本图形吧。最简单不过下面三个函数: // 绘制一个方块 fillRect(x,y,width,height) // 绘制一个矩形轮廓 strokeRect(x,y,width,height) // 清出一个透明的矩形区域 clearRect(x,y,width,height) 其中x,y是矩形区域左上角的位置。 function draw() { var canvas = document.getElementById('myCanvas');; if (canvas.getContext) { var ctx = canvas.getContext('2d'); ctx.fillRect(15, 15, 120, 120); ctx.clearRect(40, 40,…

Continue reading

开始之前

<canvas>首先是在Mac OS X Dashboard上出现的,随后是safari,接着是基于Gecko的Firefox 1.5 … 而现在更被WhatWG 接纳,成为WhatWG Web applications 1.0 specification即 HTML 5 的一部分。 canvas可以用来画图,合成图像甚至是做动画,使用canvas不难,会HTML和JavaScript就可以很快的开进了。不过基本上,我觉得最终目标是动画效果和实现交互,那应该多少需要一点知识和经验,例如数学知识,颜色知识,交互经验等等……当然还需要想象力和最重要的——耐心。 之前在Canvas的奇怪变形也说过用css来定义canvas的长宽会引起变形,那个变形在不同的浏览器里面还不一样,实在无聊了可以试试,不过,最稳还是指定canvas的width和height属性。

进驻Canvas

<canvas>这个新的HTML元素的吸引力真是让我无法抵挡。在看过一些令人惊异的效果之后,canvas随即成为了最近的研究课题之一。 首先需要一个浏览器,Firefox (1.5 以上)这类基于Gecko的浏览器、Safari、Chrome和Opera都支持它, IE不支持。 在新建的页面里面加入 <canvas id="myCanvas" width="300" height="150"></canvas> myCanvas 其实只是一个容器,内容的填充就是脚本(通常是javascript)出场的时候了。 var canvas = document.getElementById('myCanvas'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); // drawing code here } else { // canvas-unsupported code here } 我觉得既然要测试canvas,当然不会选一个不支持它的浏览器来玩,但是检查特性是否被支持是一个良好的习惯,正式使用时大可以通过代码重构将这一些框框隐藏起来。…

Continue reading

Canvas的奇怪变形

我一般用脚本创建元素的同时多数会附加css来控制大小,背景色,etc. 但在<canvas>上却表现比较怪, var canvas = new Element('canvas', {styles: {width: '150px',height : '150px'}}); 再在上面画东西的时候居然发现变形了 我记得mozilla上面说是可以改变它的大小的 分析一下,canvas最终表现和一个png图像差不多,而它的默认大小是300/150,当应用css时,相当于宽度压缩了。 那不用css怎么办呢?其实很简单 var canvas = new Element('canvas', {width: 150,height : 150}); 诶,被css惯坏了…… 注: Element指的是mootools里的那个