HTML5：Canvas
来源：互联网 发布：全局搜索算法 编辑：程序博客网 时间：2024/06/04 19:53
canvas画图已经在JavaScript中介绍了http://blog.csdn.net/qq_27626333/article/details/51595138。此处再进行补充。
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()方法填充路径。例如：制作一个当用户触摸屏幕时在触摸位置绘制一个三角形的实例程序：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>stroke()方法绘制路径</title> </head> <body> <canvas id="drawing" width="200" height="200" style="border:#0F0 solid 1px">A Drawing of something</canvas> <script> var drawing=document.getElementById("drawing"); //确定浏览器支持<canvas>元素 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> </body> </html> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>fill()方法填充路径</title> </head> <body> <canvas id="drawing" width="200" height="200" style="border:#0F0 solid 1px">A Drawing of something</canvas> <script> var drawing=document.getElementById("drawing"); //确定浏览器支持<canvas>元素 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> </body> </html> 
3、arcTo()方法
arcTo()方法用于绘制圆弧，context.arcTo(x1,y1,x2,y2,半径)。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>arcTo()方法</title> </head> <body> <canvas id="drawing" width="300" height="300" style="border:#0F0 solid 1px">A Drawing of something</canvas> <script> var drawing=document.getElementById("drawing"); //确定浏览器支持<canvas>元素 if(drawing.getContext){ //取得绘图上下文对象的引用，“2d”是取得2D上下文对象 var context=drawing.getContext("2d");//路径指定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> </body> </html>
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)为控制的。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>bezierCurveTo()方法</title> </head> <body> <canvas id="drawing" width="300" height="300" style="border:#0F0 solid 1px">A Drawing of something</canvas> <script> var drawing=document.getElementById("drawing"); //确定浏览器支持<canvas>元素 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> </body> </html> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>quadraticCurveTo()方法</title> </head> <body> <canvas id="drawing" width="200" height="200" style="border:#0F0 solid 1px">A Drawing of something</canvas> <script> var drawing=document.getElementById("drawing"); //确定浏览器支持<canvas>元素 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> </body> </html> 
5、createRadialGradient()方法
使用createRadialGradient()方法，这个方法接收6个参数，对应着两个圆的圆心和半径。两个圆的圆心不同时的效果如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>canvas绘图</title> </head> <body> <canvas id="drawing" width="300" height="300" style="border:#0F0 solid 1px">A Drawing of something</canvas> <script> var drawing=document.getElementById("drawing"); //确定浏览器支持<canvas>元素 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> </body> </html> 
6、绘制图像
（1）、直接绘制:context.drawImage(image,dx,dy);
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>canvas绘图</title> </head> <body> <p>Image to use:</p><img id="scream" alt="The Scream" width="220" height="250" src="img_the_scream.jpg"><p>Canvas:</p><canvas id="drawing" width="250" height="250" style="border:#0F0 solid 1px">A Drawing of something</canvas> <script> var drawing=document.getElementById("drawing"); //确定浏览器支持<canvas>元素 if(drawing.getContext){ //取得绘图上下文对象的引用，“2d”是取得2D上下文对象 var context=drawing.getContext("2d"); var image=document.getElementById("scream");image.onload = function() {context.drawImage(image,10,10);}} </script> </body> </html> 
（2）、尺寸修改：:context.drawImage(image,dx,dy,dw,dh);
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>canvas绘图</title> </head> <body> <p>Image to use:</p><img id="scream" alt="The Scream" width="220" height="250" src="img_the_scream.jpg"><p>Canvas:</p><canvas id="drawing" width="250" height="250" style="border:#0F0 solid 1px">A Drawing of something</canvas> <script> var drawing=document.getElementById("drawing"); //确定浏览器支持<canvas>元素 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> </body> </html> 
（3）、图像截取：:context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh);
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>canvas绘图</title> </head> <body> <p>Image to use:</p><img id="scream" alt="The Scream" width="220" height="250" src="img_the_scream.jpg"><p>Canvas:</p><canvas id="drawing" width="250" height="250" style="border:#0F0 solid 1px">A Drawing of something</canvas> <script> var drawing=document.getElementById("drawing"); //确定浏览器支持<canvas>元素 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> </body> </html> 
7、绘制数据图表
（1）、绘制方格图
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>canvas绘图</title> </head> <body> <canvas id="drawing" width="250" height="250" style="border:#0F0 solid 1px">A Drawing of something</canvas> <script> var drawing=document.getElementById("drawing"); //确定浏览器支持<canvas>元素 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++){var y=row*cell_height;context.moveTo(0,y);context.lineTo(drawing.width,y);}//准备画竖线for(var col=0;col<=grid_cols;col++){var x=col*cell_width;context.moveTo(x,0);context.lineTo(x,drawing.height);}//完成描述context.stroke();} </script> </body> </html> 
（2）、数据表
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>canvas绘图</title> </head> <body> <canvas id="drawing" width="300" height="300" style="border:#0F0 solid 1px">A Drawing of something</canvas> <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"); //确定浏览器支持<canvas>元素 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++){var y=row*cell_height;context.moveTo(0,y);context.lineTo(drawing.width,y);}//准备画竖线for(var col=0;col<=grid_cols;col++){var x=col*cell_width;context.moveTo(x,0);context.lineTo(x,drawing.height);}//完成描述context.stroke();context.closePath();//获取数据中最大的值var max_v=0;for(var i=0;i<data.length;i++){if(data[i]>max_v)max_v=data[i];}//为了能让最大值能容纳在图表内，计算坐标max_v=max_v*1.1;//将数据换算为坐标var points=[];for(var i=0;i<data.length;i++){var v=data[i];var px=cell_width*(i+1);var py=drawing.height-drawing.height*(v/max_v);points.push({"x":px,"y":py});}//描绘折线图context.beginPath();context.moveTo(points[0].x,points[0].y);for(var i=1;i<points.length;i++){context.lineTo(points[i].x,points[i].y);}context.lineWidth=2;context.strokeStyle="#ee0000";context.stroke();//绘制坐标图形（坐标对应一红色圆圈）for(var i in points){var p=points[i];context.beginPath();context.arc(p.x,p.y,6,0,2*Math.PI);context.fillStyle="#ee0000";context.fill();}}}</script> </body> </html> 
8、移动与扩大/缩小
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>canvas绘图</title> </head> <body> <canvas id="drawing" width="300" height="300" style="border:#0F0 solid 1px">A Drawing of something</canvas> <script>var drawing=document.getElementById("drawing"); //确定浏览器支持<canvas>元素 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> </body> </html>
9、canvas实现动画效果
（1）、圆球跳动的动画
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>canvas绘图</title> </head> <body> <canvas id="drawing" width="300" height="300" style="border:#0F0 solid 1px">A Drawing of something</canvas> <script>var drawing=document.getElementById("drawing"); //确定浏览器支持<canvas>元素 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.x<0||ball.x>300){ball.dir_x*=-1;}if(ball.y<0||ball.y>300){ball.dir_y*=-1;} }}</script> </body> </html>
（2）待机动画
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>canvas绘图</title> </head> <body> <canvas id="drawing" width="300" height="300" style="border:#0F0 solid 1px">A Drawing of something</canvas> <script>var drawing=document.getElementById("drawing"); //确定浏览器支持<canvas>元素 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;i<36;i++){context.save();//旋转var r=(i*10)*Math.PI/180;//度转换为弧度context.translate(150,150);//移动中心店context.rotate(r);//绘制细长方形if(i==ci){context.globalAlpha=1.0;//设置透明度}else{context.globalAlpha=0.3;}context.beginPath();context.fillStyle="green";context.rect(0,0,50,6);context.fill();context.restore();}ci=(ci+1)%36;//每隔20微秒调用函数本身，实现动画效果。setTimeout(anim,20);}}</script> </body> </html> 
1 0
- html5 canvas
- html5-canvas
- HTML5 canvas
- html5 canvas
- HTML5 Canvas
- HTML5 Canvas
- html5 canvas
- HTML5 Canvas
- HTML5--Canvas
- HTML5 Canvas
- HTML5 canvas
- HTML5-canvas
- HTML5 Canvas
- html5 canvas
- html5-canvas
- html5---canvas
- html5 canvas
- HTML5 Canvas
- 医学图像处理笔记(6)-基于能量的分割
- 读《那些年啊，那些事——一个程序员的奋斗史》有感
- 我就试试代码
- okhttp源码解析（3）
- c++实践参考：圆
- HTML5：Canvas
- 找工作 操作系统
- 26、过滤器
- 6. datasource - mysql【从零开始学Spring Boot】
- 互斥锁的实现
- Spring定时任务的几种实现
- 总结
- Codeforces Round #356 (Div. 2)
- ubuntu 14.04下 下载Android源码
