HTML5：Canvas

canvas画图已经在javascript中介绍了。此处再进行补充。

1、颜色的指定方法

颜色指定有3种：第一种是以[#rrggbb]这种与html中相同的颜色指定方法指定颜色。第二种方法为在rgb()中指定三个0~255范围的值；第三种方法是除了指定三个0~255范围的数值外，同时指定透明度（数值范围;0~1）。

 

context.fillstyle="#ff0000";  
context.fillstyle="rgb(255,0,0)";  
context.fillstyle="rgba(255,0,0,0.5)";  

 

2、stroke()和fill()方法

stroke()方法绘制路径，fill()方法填充路径。例如：制作一个当用户触摸屏幕时在触摸位置绘制一个三角形的实例程序：

 

a drawing of something <script> var drawing=document.getelementbyid("drawing"); //确定支持元素 if(drawing.getcontext){ //取得绘图上下文对象的引用，“2d”是取得2d上下文对象 var context=drawing.getcontext("2d"); //设置canvas的onmouse事件 drawing.onmousedown=function(event){ //取得触摸处的坐标 var x=event.x; var y=event.y; var r=math.random()*10+5; //路径指定 context.beginpath(); context.moveto(x,y); context.lineto(x,y+r); context.lineto(x+r,y+r); context.lineto(x,y); //绘图 context.strokestyle="red"; //指定路径线的粗细 context.linewidth=3; //绘制路径 context.stroke(); } } </script>

 

 

a drawing of something <script> var drawing=document.getelementbyid("drawing"); //确定浏览器支持元素 if(drawing.getcontext){ //取得绘图上下文对象的引用，“2d”是取得2d上下文对象 var context=drawing.getcontext("2d"); //路径绘制开始 context.beginpath(); //路径的绘制 context.moveto(0,0); context.lineto(0,100); context.lineto(100,100); //路径绘制结束 context.closepath(); context.fillstyle="rgb(200,0,0)" context.fill(); } </script>

 

3、arcto()方法

arcto()方法用于绘制圆弧，context.arcto(x1,y1,x2,y2,半径)。

 

a drawing of something <script> var drawing=document.getelementbyid("drawing"); //确定浏览器支持元素 if(drawing.getcontext){ //取得绘图上下文对象的引用，“2d”是取得2d上下文对象 var context=drawing.getcontext("2d"); //设置canvas的onmouse事件 //路径指定 context.beginpath(); //单独使用arcto()方法必须指定绘图开始的基点 context.moveto(20,20); context.arcto(290,150,20,280,20); context.lineto(20,280); //绘图 context.strokestyle="red"; //指定路径线的粗细 context.linewidth=3; //绘制路径 context.stroke(); } </script>

 

4、quadraticcurveto()和beziercurveto()方法

quadraticcurveto(cx,cy,x,y):从上一点开始绘制一条二次曲线，到(x,y)为止，并且以(cx,cy)作为控制点。

beziercurveto(c1x,c1y,c2x,c2y,x,y):从上一点开始绘制一条曲线，到（x,y）为 止，并且以(c1x,c1y)和(c2x,c2y)为控制的。

 

a drawing of something <script> var drawing=document.getelementbyid("drawing"); //确定浏览器支持元素 if(drawing.getcontext){ //取得绘图上下文对象的引用，“2d”是取得2d上下文对象 var context=drawing.getcontext("2d"); //设置canvas的onmouse事件 //路径指定 context.beginpath(); //单独使用beziercurveto()方法必须指定绘图开始的基点 context.moveto(20,20); context.beziercurveto(100,280,180,280,280,20); //绘图 context.strokestyle="red"; //指定路径线的粗细 context.linewidth=3; //绘制路径 context.stroke(); } </script>

 

 

 

a drawing of something <script> var drawing=document.getelementbyid("drawing"); //确定浏览器支持元素 if(drawing.getcontext){ //取得绘图上下文对象的引用，“2d”是取得2d上下文对象 var context=drawing.getcontext("2d"); //设置canvas的onmouse事件 //路径指定 context.beginpath(); //单独使用quadraticcurveto()方法必须指定绘图开始的基点 context.moveto(20,20); context.quadraticcurveto(40,80,130,150); //绘图 context.strokestyle="red"; //指定路径线的粗细 context.linewidth=3; //绘制路径 context.stroke(); } </script>

 

 

5、createradialgradient()方法

使用createradialgradient()方法，这个方法接收6个参数，对应着两个圆的圆心和半径。两个圆的圆心不同时的效果如下：

 

a drawing of something <script> var drawing=document.getelementbyid("drawing"); //确定浏览器支持元素 if(drawing.getcontext){ //取得绘图上下文对象的引用，“2d”是取得2d上下文对象 var context=drawing.getcontext("2d"); //设置渐变 var gradient=context.createradialgradient(30,30,20,170,170,100); gradient.addcolorstop(0,"red"); gradient.addcolorstop(0.3,"yellow"); gradient.addcolorstop(1,"blue"); //绘制渐变圆形 context.fillstyle=gradient; context.fillrect(20,20,260,260); } </script>

 

6、绘制图像

（1）、直接绘制:context.drawimage(image,dx,dy);

 

image to use:

canvas:

a drawing of something <script> var drawing=document.getelementbyid("drawing"); //确定浏览器支持元素 if(drawing.getcontext){ //取得绘图上下文对象的引用，“2d”是取得2d上下文对象 var context=drawing.getcontext("2d"); var image=document.getelementbyid("scream"); image.onload = function() { context.drawimage(image,10,10); } } </script>

 

（2）、尺寸修改：:context.drawimage(image,dx,dy,dw,dh);

 

image to use:

canvas:

a drawing of something <script> var drawing=document.getelementbyid("drawing"); //确定浏览器支持元素 if(drawing.getcontext){ //取得绘图上下文对象的引用，“2d”是取得2d上下文对象 var context=drawing.getcontext("2d"); var image=document.getelementbyid("scream"); image.onload = function() { context.drawimage(image,10,10,100,100); } } </script>

 

（3）、图像截取：:context.drawimage(image,sx,sy,sw,sh,dx,dy,dw,dh);

 

image to use:

canvas:

a drawing of something <script> var drawing=document.getelementbyid("drawing"); //确定浏览器支持元素 if(drawing.getcontext){ //取得绘图上下文对象的引用，“2d”是取得2d上下文对象 var context=drawing.getcontext("2d"); var image=document.getelementbyid("scream"); image.onload = function() { context.drawimage(image,20,20,70,100,10,10,220,250); } } </script>

 

 

7、绘制数据图表

（1）、绘制方格图

 

a drawing of something <script> var drawing=document.getelementbyid("drawing"); //确定浏览器支持元素 if(drawing.getcontext){ //取得绘图上下文对象的引用，“2d”是取得2d上下文对象 var context=drawing.getcontext("2d"); //描绘背景 var gradient=context.createlineargradient(0,0,0,300); gradient.addcolorstop(0,"#e0e0e0"); gradient.addcolorstop(1,"#ffffff"); context.fillstyle=gradient; context.fillrect(0,0,drawing.width,drawing.height); //描绘边框 var grid_cols=10; var grid_rows=10; var cell_height=drawing.height/grid_rows; var cell_width=drawing.width/grid_cols; context.linewidth=1; context.strokestyle="#a0a0a0"; //开始边框描绘 context.beginpath(); //准备画横线 for(var row=0;row=grid_rows;row++){>=grid_cols;col++){>

 

（2）、数据表

 

a drawing of something <script> //定义图表数据 var uriage=[80,92,104,110,68,50,45,90,74,68,98,103]; drawchart(uriage); //绘制折线数据图表的函数 function drawchart(data){ var drawing=document.getelementbyid("drawing"); //确定浏览器支持元素 if(drawing.getcontext){ //取得绘图上下文对象的引用，“2d”是取得2d上下文对象 var context=drawing.getcontext("2d"); //描绘背景 var gradient=context.createlineargradient(0,0,0,300); gradient.addcolorstop(0,"#e0e0e0"); gradient.addcolorstop(1,"#ffffff"); context.fillstyle=gradient; context.fillrect(0,0,drawing.width,drawing.height); //描绘边框 var grid_cols=data.length+1; var grid_rows=4; var cell_height=drawing.height/grid_rows; var cell_width=drawing.width/grid_cols; context.linewidth=1; context.strokestyle="#a0a0a0"; //开始边框描绘 context.beginpath(); //准备画横线 for(var row=0;row=grid_rows;row++){>=grid_cols;col++){>max_v) max_v=data[i]; } //为了能让最大值能容纳在图表内，计算坐标 max_v=max_v*1.1; //将数据换算为坐标 var points=[]; for(var i=0;i;i++){>;i++){>

 

8、移动与扩大/缩小

 

a drawing of something <script> var drawing=document.getelementbyid("drawing"); //确定浏览器支持元素 if(drawing.getcontext){ //取得绘图上下文对象的引用，“2d”是取得2d上下文对象 var context=drawing.getcontext("2d"); function drawrect(context,color){ context.fillstyle=color; context.fillrect(20,20,50,50); } //绘制普通的矩形 drawrect(context,"red"); //移动矩形以及扩大/缩小矩形 context.translate(30,30);//平行移动 context.scale(2.5,0.8);//长扩大2.5倍、宽缩小至0.8倍 drawrect(context,"blue");//绘制移动、扩大/缩小后的矩形 } </script>

 

9、canvas实现动画效果

（1）、圆球跳动的动画

 

a drawing of something <script> var drawing=document.getelementbyid("drawing"); //确定浏览器支持元素 if(drawing.getcontext){ //取得绘图上下文对象的引用，“2d”是取得2d上下文对象 var context=drawing.getcontext("2d"); //记录圆球的状态 var ball={x:10,y:100,dir_x:5,dir_y:5}; //动画 setinterval(drawball,100); function drawball(){ //绘制背景 context.fillstyle="#f5f5f5" context.fillrect(0,0,300,300); //绘制圆球 context.beginpath(); context.arc(ball.x,ball.y,5,0,2*math.pi); context.fillstyle="blue"; context.fill(); //让圆球动起来 ball.x+=ball.dir_x; ball.y+=ball.dir_y; if(ball.x300){ball.dir_x*=-1;} if(ball.y300){ball.dir_y*=-1;} } } </script>

 

 

（2）待机动画

 

a drawing of something <script> var drawing=document.getelementbyid("drawing"); //确定浏览器支持元素 if(drawing.getcontext){ //取得绘图上下文对象的引用，“2d”是取得2d上下文对象 var context=drawing.getcontext("2d"); //动画绘制开始 var ci=0; anim(); //定义动画函数 function anim(){ context.clearrect(0,0,300,300);//清空canvas //循环绘制36根长方形棒棒 for(var i=0;i36;i++){>

 

 

0||ball.y>0||ball.x>;i++){>