canvas画图已经在JavaScript中介绍了。此处再进行补充。
1、颜色的指定方法
颜色指定有3种：第一种是以[ # RRGGBB]这种与 HTML 中相同的颜色指定方法指定颜色。第二种方法为在rgb()中指定三个0~255范围的值；第三种方法是除了指定三个0~255范围的数值外，同时指定透明度（数值范围;0~1）。
&nbs p;
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.be gin Path(); context.moveTo(x,y); context.l inet o(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、createRadialGra die nt()方法
使用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("scre am "); 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.createLine arg radient(0,0,0,300); gradient.addColorStop(0,"#e0e0e0"); gradient.addColorStop(1,"#ffffff"); context.fillStyle=gradient; context.fillRect(0,0,drawing.width,drawing.h ei ght); //描绘边框 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
（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 max_v) max_v=data[i]; } //为了能让最大值能容纳在图表内，计算坐标 max_v=max_v*1.1; //将数据 换算 为坐标 var points=[]; for(var i=0;i 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 坐标图 形（坐标对应一 红色 圆圈） 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>
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.x 300){ball.dir_x*=-1;} if(ball.y 300){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;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.re Store (); } ci=(ci+1)%36; //每隔20微秒调用函数本身，实现动画效果。 setTimeout(anim,20); } } </script>
canvas画图已经在JavaScript中介绍了。此处再进行补充。
1、颜色的指定方法
颜色指定有3种：第一种是以[#RRGGBB]这种与HT ML 中相同的颜色指定方法指定颜色。第二种方法为在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
（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 max_v) max_v=data[i]; } //为了能让最大值能容纳在图表内，计算坐标 max_v=max_v*1.1; //将数据换算为坐标 var points=[]; for(var i=0;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.x 300){ball.dir_x*=-1;} if(ball.y 300){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;i
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-HTML5：Canvas 全部内容，希望文章能够帮你解决 html5教程-HTML5：Canvas 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-HTML5：Canvas的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did219190