canvas学习之路--记录(一)
前言:canvas作为html5出现的新标签,以前接触过一些,也写过一些小的demo,但没有实际去在项目中使用过,直到前段时间,我要写一个前端小游戏,由于当时时间匆忙就没使用canvas,整个项目全部是用html标签来充当游戏当中的元素,结构就是在一些特定手机上相当之卡,个人优化过之后,稍有好转,但依旧不满意,无奈项目紧急,只能事权轻重,先行将项目上线,不过只要有时间,还是将canvas搞懂,以后这种全用canvas写为好...下面进入本菜鸡学习canvas之路吧.(此为作者跟着html5与css3权威指南所学记录).
一、绘制矩形
1.首先要取得canvas元素: 可以用document.getElementById等方法取得canvas对象,后面需要调用这个对象提供的方法来进行图形绘制.
2.取得上下文: 进行图形绘制时,需要用到图形上下文,图形上下文是一个封装了很多绘图功能的对象,需要使用canvas对象的getContext方法来获得图形上下文. 其中将此方法的参数设为'2d';
3.填充与绘制边框: 用canvas绘制图形的时候,有两种方式--填充(fill)与绘制边框(stroke).填充是指填满图形内部,绘制边框是指不填满图形内部,只绘制图形的外框.
4.设定绘图样式: 在进行图形绘制的时候,首先要设定好绘图的样式(style),然后调用有关方法进行图形的绘制.所谓绘图的样式,主要是针对图形的颜色而言的,但是并不限于图形的颜色.
fillStyle属性--填充的样式,在该属性中填入填充的颜色值
strokeStyle--图形边框的样式,在该属性中填入边框的颜色值
5.指定线宽: 使用图形上下文对象的lineWidth属性设置图形边框的宽度,在绘制图形的时候,任何直线都可以通过lineWidth属性来指定直线的宽度
6.指定颜色值: 绘图时填充的颜色或边框的颜色分别通过fillStyle属性和strokeStyle属性来指定,颜色值可使用颜色名(如:red),或十六进制颜色值(如:#f00),或rgb、rgba函数来指定颜色
7.绘制矩形: 分别使用fillRect方法与strokeRect方法来填充矩形会绘制矩形边框,这两个方法的定义如下所示
context.fillRect(x,y,width,height)
context.strokeRect(x,y,width,height)
这里的context指的是图形上下文对象,这两个方法使用同样的参数,x是指矩形起点的横坐标,y是指矩形七点的纵坐标,坐标原点为canvas画布的最左上角,width是指矩形的长度,height是指矩形的高度
绘制图形代码如下:
function draw (obj) { var $myCanvas = document.getElementById(obj); //canvas对象 if ($myCanvas == null) return false; var $ctx = $myCanvas.getContext('2d'); //获取canvas对象图形上下文 $ctx.fillStyle = '#f00'; $ctx.fillRect(50,50,100,100); $ctx.strokeStyle = '#ff0'; $ctx.lineWidth = 10; $ctx.strokeRect(50,50,100,100); }
此外,还有一个clearRect方法,该方法将擦除掉矩形区域内的图形,使矩形区域内的图形全部变成透明,如:context.clearRect(x,y,width,height),方法与上面的类似.
二、使用路径
获取到图形上下文之后,执行如下步骤
开始创建路径-->创建图形的路径-->路径创建完成之后,关闭路径-->设定绘制样式,调用绘制方法,绘制路径.
就是先用路径勾勒图形轮廓,然后设置颜色,进行绘制
1.开始创建路径
使用图形上下文对象的beginPath方法,如context.beginPath();
该方法不适用参数,通过调用该方法开始路径的创建(注:每次开始创建时都要调用beginPath函数)
2.创建圆形路径
创建圆形路径时,需要使用图形上下文对象的arc方法. 如:context.arc(x,y,radius,startAngle,endAngle,anticlockwise).
该方法使用六个参数,x为绘制圆形的圆点横坐标,y为绘制圆形的圆点纵坐标,radius为圆形半径,strartAngle为开始角度,endAngle为结束角度,anticlockwise为是否按照顺时针方向进行绘制
arc方法不仅可以用来绘制圆形,也可以用来绘制圆弧,因此必须指定开始角度和结束角度.aniticlockwise参数是一个布尔值,值为true时,按顺时针绘制,值为false时,按逆时针进行绘制.
3.关闭路径
路径创建完成后,使用图形上下文对象的closePath方法将路径关闭.如:context.closePath();
将路径关闭之后,仅仅是路径创建工作完成了,这时还没有真正绘制任何图形.
4.设定绘制样式,进行图形绘制.
如:context.fillStyle = 'rgba(255,0,0,0.25)'; context.fill();
使用创建好的路径绘制图形: 指定绘制样式(fillStyle,strokeStyle)-->使用fill(或stroke)方法进行'填充图形'(或绘制图形边框),因为路径已经决定了图形的大小,所以就不需要在该方法中是哟红参数来指定图形的大小了.
注意:如果在绘制路径的时候,不执行创建路径语句和关闭路径语句,则以前绘制的路径会一直存在,这时,如果再使用fill()或则stroke()时,会重复绘制先前的图形,进行重叠,如果绘制样式中有透明度设置,则最先绘制的图形颜色会最深
function draw (obj) { var $myCanvas = document.getElementById(obj); if ($myCanvas == null) return false; var $ctx = $myCanvas.getContext('2d'); $ctx.fillStyle = 'rgba(0,0,0,0.3)'; $ctx.fillRect(0,0,400,300); $ctx.strokeStyle = 'rgb(0,0,0)'; $ctx.lineWidth = 1; $ctx.strokeRect(0,0,400,300); $ctx.beginPath(); $ctx.arc(0,0,150,0,2*Math.PI,true); $ctx.closePath(); $ctx.fillStyle = 'rgba(255,0,0,0.5)'; $ctx.fill(); }
三、moveTo与lineTo
绘制直线时,一般会用到moveTo和lineTo两种方法,功能如下:
moveTo
moveTo方法的作用是将光标移动到指定款坐标点,绘制直线的时候以这个坐标点为起点,如:moveTo(x,y),该方法使用两个参数--x表示指定坐标点的横坐标,y表示指定坐标点的纵坐标
lineTo
lineTo方法在moveTo方法中指定的直线起点与参数中指定的直线终点之间绘制一条直线,如lineTo(x,y),使用方法和moveTo(x,y)的方法一样,使用该方法之后,光标自动移动到lineTo方法的参数所指定的直线终点
因此,在创建路径时,需要使用moveTo方法将光标移动到指定的直线起点,然后使用lineTo方法在直线起点和直线终点之间创建路径,然后将光标移动到直线终点,在下一次使用lineTo方法的时候,会以当前光标所在坐标点为直线起点,并在下一次用lineTo方法指定的直线终点之间创建路径,它会不断重复这个过程,来完成复杂图形的路径绘制.
如下:
function draw (obj) { var $myCanvas = document.getElementById(obj); if ($myCanvas == null) return false; var $ctx = $myCanvas.getContext('2d'); $ctx.fillStyle = '#eef'; $ctx.fillRect(0,0,400,300); var n = 0, dx = 150, dy = 150, s = 100; $ctx.beginPath(); $ctx.fillStyle = 'rgb(100,250,100)'; $ctx.strokeStyle = 'rgb(0,0,100)'; var x = Math.sin(0), y = Math.cos(0), dig = Math.PI / 15 * 11; for (var i = 0; i < 30; i++) { var x = Math.sin(i * dig), y = Math.cos(i * dig); $ctx.lineTo(dx + x * s, dy + y * s); } $ctx.closePath(); $ctx.fill(); $ctx.stroke(); }
除此之外,还有使用bezierCurveTo绘制曲线(有兴趣可以自己去研究,本人太菜,加上感觉用不上这么高大上的东西,就不做笔记了)
四、绘制渐变图形
1.绘制线性渐变
前面使用的fillStyle方法在填充时不但可以指定填充的颜色,同时,使用该方法也可以用来指定填充的对象.
这里,可以来看一下渐变,首先是最简单的两点之间的线性渐变.
绘制线性渐变时,需要用到LinearGradient对象.使用图形上下文对象的createLinearGradient方法创建该对象.如:context.createLinearGradient(xStart,yStart,xEnd,yEnd);
该方法有四个参数,xStart-->渐变起点的横坐标,yStart-->渐变起点的纵坐标,xEnd-->渐变终点的横坐标,yEnd-->渐变终点的纵坐标.
通过该方法,创建了一个使用两个坐标点的LinearGradient对象,而渐变的颜色则使用addColorStop方法进行设定,该方法的如:context.addColorStop(offset,color);
该方法可以追加渐变的颜色.该方法使用两个参数--offset和color.
offset为所设定的颜色离开渐变起始点的偏移量,改参数的值是一个范围在0到1之间的浮点值,渐变起点的偏移量为0,渐变结束点的偏移量为1.color为绘制时使用的颜色.
例:
function draw (obj) { var $myCanvas = document.getElementById(obj); if ($myCanvas == null) return false; var $ctx = $myCanvas.getContext('2d'); var g1 = $ctx.createLinearGradient(0,0,0,300); g1.addColorStop(0,'#ff0'); g1.addColorStop(1,'#0ff'); $ctx.fillStyle = g1; $ctx.fillRect(0,0,400,300); $ctx.fill(); var g2 = $ctx.createLinearGradient(0,0,300,0); g2.addColorStop(0,'rgba(255,0,0,0.5)'); g2.addColorStop(1,'rgba(0,0,255,0.5)'); $ctx.fillStyle = g2; for (var i = 1; i <= 10; i++) { $ctx.beginPath(); $ctx.arc(i * 20,i*20,i*10,0,Math.PI*2,true); $ctx.closePath(); $ctx.fill(); } }
2.绘制径向渐变
使用图形上下文对象的createRadialGradient方法绘制径向渐变,如:context.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd);
该方法有两个函数:xStart-->渐变开始圆的圆心横坐标,yStart-->渐变开始圆的圆心纵坐标,radiusStart-->渐变开始圆的半径,xEnd-->渐变结束圆的圆心横坐标,yEnd-->渐变结束圆的圆心纵坐标,radiusEnd-->渐变结束圆的半径
在这个方法中,分别指定了两个圆的大小和半径,从第一个圆的圆心处向外进行扩散渐变,一直扩散到第二个圆的外轮廓处.
设定渐变颜色的方法则与线性渐变相同
function draw (obj) { var $myCanvas = document.getElementById(obj); if ($myCanvas == null) return false; var $ctx = $myCanvas.getContext('2d'); var g1 = $ctx.createRadialGradient(400,0,0,400,0,400); g1.addColorStop(0,'#ff0'); g1.addColorStop(1,'#0ff'); $ctx.fillStyle = g1; $ctx.fillRect(0,0,400,300); $ctx.fill(); }
五、绘制变形图形
默认情况下,canvas画布的最左上角对应坐标原点(0,0).如果对这个坐标使用变换处理,就可以实现图形的变形处理了,对坐标的变换处理,有三种方式:平移、扩大、旋转
平移:
使用图形上下文对象的translate方法移动坐标轴原点,如context.translate(x,y); ----x表示将坐标轴原点向右移动多少个单位,默认情况下为像素,y表示将坐标轴原点向下移动多少单位.
扩大:
使用图形上下文对象的scale方法将图形放大,如:context.scale(x,y); ----x表示水平方向的放大倍数,y表示垂直方向的放大倍数.(注:当需要将图形缩小的时候,可以将其参数值设置为0-1之间的小数即可)
旋转:
使用图形上下文对象的rotate方法将图形进行旋转,如:context.rotate(angle); ----angle表示旋转角度,旋转中心是坐标轴的原点,以顺时针方向进行旋转(注:如需逆时针进行旋转,将angle设定为负数即可)
代码示例:
function draw (obj) { var $myCanvas = document.getElementById(obj); if ($myCanvas == null) return false; var $ctx = $myCanvas.getContext('2d'); $ctx.fillStyle = '#eef'; $ctx.fillRect(0,0,400,300); $ctx.translate(200,50); $ctx.fillStyle = 'rgba(255,0,0,0.25)'; for (var i = 0; i < 50; i++) { $ctx.translate(25,25); $ctx.scale(0.95,0.95); $ctx.rotate(Math.PI/10); $ctx.fillRect(0,0,100,50); } }
坐标变换与路径的结合使用:必须先另写一个创建路径的函数,然后再坐标变换的同时调用该函数
代码示例:
function draw (obj) { var $myCanvas = document.getElementById(obj); if ($myCanvas == null) return false; var $ctx = $myCanvas.getContext('2d'); $ctx.fillStyle = '#eef'; $ctx.fillRect(0,0,400,300); $ctx.translate(200,50); for (var i = 0; i < 50; i++) { $ctx.translate(25,25); $ctx.scale(0.95,0.95); $ctx.rotate(Math.PI/10); create5Star($ctx); $ctx.fill(); } } function create5Star (context) { var n = 0, dx = 100, dy = 0, s = 50; context.beginPath(); context.fillStyle = 'rgba(255,0,0,0.5)'; var x = Math.sin(0), y = Math.cos(0), dig = Math.PI/5*4; for (var i = 0; i < 5; i++) { var x = Math.sin(i*dig), y = Math.cos(i*dig); context.lineTo(dx+x*s,dy+y*s); } context.closePath(); }
接下来还有矩阵变换,其中首先涉及到变换矩阵,这个矩阵是专门用来实现图形变形的,它与坐标系一起配合使用,以达到变形的目的,当图形上下文被创建完毕时,事实上也创建了一个默认的变换矩阵,如果不对这个变换矩阵进行修改,那么接下来绘制的图形将以画布的最左上角为坐标原点绘制图形,绘制出来的图形也不经过缩放、变形的处理,如果对这个变换矩阵进行修改,那么情况则完全不一样了.
使用图形上下文对象的transform方法修改变换矩阵,如:context.transform(m11,m12,m21,m22,dx,dy);这里面的m11,m12,m21,m22四个参数涉及到矩阵乘法的,这里不过多介绍(实际上是差不多都丢给老师了)
实际上上面提到的translate,scale,rotate可以对transform进行代替.(太难了,有点研究不透了,结束!)
