更多资料可以看mozilla的Canvas tutorial,内有中文版本,可惜翻译不全,而且从Appling Styles and Colors开始就没内容,还是继续英文版……(唉)
摄氏零度以后...倒是有翻译了一部分的版本,翻到moveTo()、lineTo()——http://jiachen.blogbus.com/logs/29567413.html
看了一下已有的例子,canvas可以用的地方很多
Painter —— http://caimansys.com/painter/index.html 一个画图工具,简单了点,如果可以发展起来,也会很强,不过首先要解决的是带宽问题
3D多面体 —— http://www.polyhedra.org/poly/
模拟水波纹 —— http://timelessname.com/canvas/experiment01/
Clifford Attractor —— http://timelessname.com/canvas/experiment02/
3D walker —— http://www.abrahamjoffe.com.au/ben/canvascape/
首先是语法介绍
- <canvas id="sample" height="150" width="150">
- </canvas>
getContext从目标canvas获得用来绘图的上下文,目前只能用2d这个参数
用法:
- var ctx = document.getElementById("id").getContext("2d");
<canvas>内部有自己的坐标系,一切坐标,宽/高度都是基于这个坐标系
各类方法:
Rectangles 矩形:
fillRect(x, y, width, height); //绘制一个实心矩形
strokeRect(x, y, width, height); //绘制一个空心矩形
clearRect(x, y, width, height); //清除指定区域
Path 路径:
beginpath(); //打开路径
closePath(); //关闭路径
打开伴随关闭,某些方法会自动关闭路径(如fill()),则可以不用closePath()
moveTo(x, y); //移动绘制点到指定坐标
lineTo(x, y); //在当前坐标到指定坐标之间绘制直线,非封闭图形需使用stroke()描绘线条
比较常用的两个方法,moveTO()用于定位,如果lineTo绘制出来的是非封闭图形,必须使用stroke()描绘线条,否则会出错
arc(x, y, radius, startAngle, endAngle, anticlockwise);
绘制弧线或圆形 x、y-圆心,radius-半径,startAngle-初始角度,endAngle-结束角度,anticlockwise-true为逆时针、false为顺时针(注,较早的Firefox beta中为clockwise)
angles(角度)在arc之中是以弧度为基准,不是度数(Angles in the arc function are measured in radians, not degrees.),转换可用此表达式:
var radians = (Math.PI/180)*degrees
quadraticCurveTo(cp1x, cp1y, x, y); //绘制二次曲线
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y); //绘制贝赛尔曲线
cp1、cp2两组参数是用来控制角度的点的坐标
quadraticCurveTo()只用一个点来控制,而bezierCurveTo()则需要两个,不过曲线会比较容易控制。我不太懂图像知识,看下例子就可以了解:
quadraticCurveTo example、bezierCurveTo example
rect(x, y, width, height); //绘制矩形
fill(); //填充路径绘制的区域,自动关闭路径
stroke(); //绘制线条,需要手动关闭路径
Path所有方法都需要fill()或stroke()来绘制,否则是没东西显示的,类似OOP的new
fillRect(),strokeRect()实质是用rect()描绘区域之后分别用fill()和stroke()绘制,而rect则是多个lineTo()的集合
styles and colors 样式和颜色:
fillStyle = color //设置填充颜色
strokeStyle = color //设置线条颜色
赋值方式:
- // 全部皆是将fillStyle设置为橙色
- ctx.fillStyle = "orange";
- ctx.fillStyle = "#FFA500";
- ctx.fillStyle = "rgb(255,165,0)";
- ctx.fillStyle = "rgba(255,165,0,1)";
globalAlpha = transparency value
//设置透明度
在改变之前所绘制的内容仍会保持原来的透明度,改变之后绘制的所有内容会使用该值,直到被改变,所以要表现比较华丽的透明效果就要多注意
lineWidth = value //线宽
lineCap = type //线条的顶端样式,根据设置线条总长度可能会增加,mozilla给出例子的值有butt、round、square(不确定是否有其他值)
lineJoin = type //线条间接合出的样式,mozilla给出例子的值有round、bevel、miter(不确定是否有其他值)
miterLimit = value //如果lineJoin设置为miter,这个属性才有作用,不太好解释,直接看官方demo,直观点:A canvas miterLimit example
以上只是一些简单的样式和颜色设置,测试过CSS对canvas有效的部分不算很好,比如直接设置color是改变不了线条颜色,background-color、border等倒可以使用
Image & Patterns 图像和图案:
drawImage(image, x, y); //在canvas中绘制图像,image为image或canvas对象,x、y是放置的坐标
drawImage(image, x, y, width, height); //重载方法之一,后面两个参数可以控制图像显示的大小
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight); //重载方法之一,在目标对象(<canvas>)的dx、dy坐标开始的dWidth、dHeight的区域中绘制从image对象的sx、sy坐标开始裁剪出sWidht、sHeight大小的图
createPattern(image, type); //创建图案
image可以是image对象或其他的canvas元素;type是显示的方式,有四种值:repeat, repeat-x, repeat-y and no-repeat
类似Photoshop的笔刷,用指定图形对象填充,使用方式:
- var ptrn = ctx.createPattern(img,'repeat');
- ctx.fillStyle = ptrn;
- ctx.fillRect(0,0,150,150);
图像处理的方法主要就是这4个,实现效果差不多,createPattern()简单得多,图像可定义的效果也比较少;drawImage()有三个重载方法,也够用了,配合循环也可以实现createPattern()的效果
Gradient 渐变处理:
createLinearGradient(x1, y1, x2, y2); //x、y是创建相关区域的开始和结束坐标
createRadialGradient(x1, y1, r1, x2, y2, r2); //x、y、r是两个圆的圆心坐标和半径,着色区域就是第一个圆和第二个圆的非交集部分
两者都是创建渐变区域,前者是线状,后者是放射状
addColorStop(position, color); //position的值在0.0~1.0之间,表示的是该颜色的开始地点,color的值是CSS颜色值
- var lineargradient = ctx.createLinearGradient(0,0,150,150);
- lineargradient.addColorStop(0,'white');
- lineargradient.addColorStop(1,'black');
- var radgrad = ctx.createRadialGradient(45,45,10,52,50,30);
- radgrad.addColorStop(0, '#A7D30C');
- radgrad.addColorStop(0.9, '#019F62');
- radgrad.addColorStop(1, 'rgba(1,159,98,0)');
Shadow 阴影:
呃……Firefox 3.1(Gecko 1.9.1)声称会支持的东西,safari以后再测试,简单mark一下就好
shadowOffsetX = float
shadowOffsetY = float
shadowBlur = float
shadowColor = color
OffsetX、Y是设置影子的位置,且不受当前变换矩阵的影响(these values aren't affected by the current transformation matrix)。负值使阴影向上或左,正值则向下或右,为0则使用默认值。
Blur指定模糊效果,该值不等于像素值且不受变换矩阵的影响(this value doesn't correspond to a number of pixels and is not affected by the current transformation matrix)。默认为0。
Color使用标准的CSS颜色值,默认是完全透明的黑色(by default, it is fully-transparent black.)。
官方例子:
- function draw() {
- var ctx = document.getElementById('canvas').getContext('2d');
- ctx.shadowOffsetX = 2;
- ctx.shadowOffsetY = 2;
- ctx.shadowBlur = 2;
- ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
- ctx.font = "20px Times New Roman";
- ctx.fillStyle = "Black";
- ctx.fillText("Sample String", 5, 30);
- }
------------------------------------------------
暂且到这里吧,后面还有Transformations(变换?)和Base animations(基础动画),有空再一一更新。
有部分专业名词不太熟悉,有错请见谅。
用<canvas>需要掌握层次关系,后画的会覆盖前画的(如果有相交),而且没有图层概念,个人觉得比较重要的是lineTo(),arc()和两个曲线方法