http://bbs.csdn.net/topics/391493648 canvas实例分享 2016-3-16
http://bbs.csdn.net/topics/390582151 html5 canvas 实现液体效果 2016-5-11
CANVAS学习笔记，小函数整理：
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> <style type="text/css"> </style> </head> <body> <h3>canvas学习笔记、小函数整理</h3> <div style="position:relative;500px;height:400px;margin:0px;padding:0px;border:1px solid #999;"> <div style="position:absolute;padding:10px;background:rgba(128,128,128,0.5);bottom:0px;z-index:1">这里写字啦。。。。。。。</div> <canvas id="canvas" width="500" height="400" style="position:absolute;margin:5px;z-index:0"></canvas> </div> 或 <canvas id="canvas2" width="500" height="400" style="border:1px solid #999;padding:5px;"></canvas> <script type="text/javascript"> $(function(){ //画方形 function fang_fill(id,color,x,y,width,height) { var canvas = document.getElementById(id) if (canvas == null){return false;} var context = canvas.getContext("2d"); context.fillStyle = color; //"rgba(255,0,0,0.2)"; context.fillRect(x,y,width,height); } //画方形框 function fang_border(id,color,x,y,width,height,borderWidth) { var canvas = document.getElementById(id) if (canvas == null){return false;} var context = canvas.getContext("2d"); context.lineWidth = 1; context.strokeStyle = color; context.strokeRect(x,y,width,height); } //画圆形 function circle_fill(id,color,x,y,r) { var canvas = document.getElementById(id) if (canvas == null){return false;} var context = canvas.getContext('2d'); context.beginPath(); context.arc(x,y,r,0,Math.PI * 2, true); context.closePath(); context.fillStyle = color; context.fill(); } //画扇形（未写好） function fan_fill(id,color,x,y,r,jiao) { var canvas = document.getElementById(id) if (canvas == null){return false;} var context = canvas.getContext('2d'); context.beginPath(); context.lineTo(x,y); context.arc(x,y,r,0,Math.PI * jiao, true); context.lineTo(x,y); context.closePath(); context.fillStyle = color; context.fill(); } //画五星 function drawStar(id,color,x,y,r) { var canvas = document.getElementById(id) if (canvas == null){return false;} var context = canvas.getContext('2d'); context.lineWidth = 5; context.beginPath(); var dit = Math.PI * 4 / 5; var sin = Math.sin(0) * r + y; var cos = Math.cos(0) * r + x; console.log(0+":"+0); context.moveTo(cos, sin); for (var i = 0; i < 5; i++) { var tempDit = dit * i; sin = Math.sin(tempDit) * r + y; cos = Math.cos(tempDit) * r + x; context.lineTo(cos, sin); console.log(sin+":"+sin+":"+tempDit); } context.closePath(); context.strokeStyle = "red"; context.fillStyle = color; context.fill(); } //画渐变(y方向) function gradient_y(id,color1,color2,x,y,width,height){ var canvas = document.getElementById(id) if (canvas == null){return false;} var context = canvas.getContext('2d'); var g1 = context.createLinearGradient(x,y,x,(y+height)); g1.addColorStop(0,color1); g1.addColorStop(1,color2); context.fillStyle = g1; context.fillRect(x,y,width,height); } //画渐变(x方向) function gradient_x(id,color1,color2,x,y,width,height){ var canvas = document.getElementById(id) if (canvas == null){return false;} var context = canvas.getContext('2d'); var g1 = context.createLinearGradient(x,y,(x+width),y); g1.addColorStop(0,color1); g1.addColorStop(1,color2); context.fillStyle = g1; context.scale(0.5, 0.5); context.rotate(Math.PI / 4); context.translate(100, 100); context.fillRect(x,y,width,height); } //填充文字 function font_fill(id,txt,x,y){ var canvas = document.getElementById(id) if (canvas == null){return false;} var context = canvas.getContext("2d"); context.fillStyle = "#00f"; context.font = "40px 微软雅黑"; //context.textBaseline = 'top'; context.fillText(txt,x,y); } //填充文字边框 function font_border(id,txt,x,y){ var canvas = document.getElementById(id) if (canvas == null){return false;} var context = canvas.getContext("2d"); context.font = "100px 微软雅黑"; length = context.measureText(txt); context.strokeText(txt,x,y); } //保存和恢复状态 （抄的） function draw18(id) { var canvas = document.getElementById(id) if (canvas == null){return false;} var context = canvas.getContext("2d"); context.fillStyle = "red"; context.save(); //保存了当前context的状态 context.fillStyle = "black"; context.fillRect(0, 0, 100, 100); context.restore();//恢复到刚刚保存的状态 context.fillRect(0,120,100,100); } //保存文件 canvas.toDataURL(MIME) （抄的） function draw19(id) { var canvas = document.getElementById(id) if (canvas == null){return false;} var context = canvas.getContext("2d"); context.fillStyle = "rgb(0,0,225)"; context.fillRect(0, 0, canvas.width, canvas.height); context.fillStyle = "rgb(255,255,0)"; context.fillRect(10, 20, 50, 50); //把图像保存到新的窗口 var w=window.open(canvas.toDataURL("image/jpeg"),"smallwin","width=400,height=350"); } //function example(id,color1,color2,x,y,width,height){// //context.scale(0.5, 0.5); //缩放 //context.rotate(Math.PI / 4); //旋转 //context.translate(100, 100); //平移 //context.fillRect(x,y,width,height); //} //例子代码： //fang_fill("canvas","#f90",10,10,100,100); //fang_border("canvas","#f90",8,8,104,104); //circle_fill("canvas","#a9f",150,150,100); //fan_fill("canvas","#a9f",150,150,100,1/2); //drawStar("canvas","#f00",100,100,50); //gradient_y("canvas","#600","#f00",100,50,200,40); //gradient_y("canvas","#999","#eee",100,100,200,40); //gradient_x("canvas","#ff0","#f00",100,150,400,40); font_fill("canvas","啊啊啊啊啊啊啊啊",0,100); font_border("canvas","呃呃呃呃",120,130); }); </script> </body> </html>
划线：
//画线 function line_stroke(id,color,x,y,end_x,end_y) { var canvas = document.getElementById(id) if (canvas == null){return false;} var context = canvas.getContext("2d"); context.beginPath();//画一条新的线段 context.strokeStyle = color; context.moveTo(x,y); context.lineTo(end_x,end_y); context.stroke(); } line_stroke("canvas","#f90",10,10,100,100);