HTML5：Canvas
导读：收集整理的这篇文章主要介绍了html5教程-HTML5：Canvas，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 canvas画图已经在Java...
收集整理的这篇文章主要介绍了html5教程-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"); //确定浏览器支持@H_512_23@元素 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
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： HTML5：Canvas
本文地址： https://pptw.com/jishu/587033.html