canvas学习笔记
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <canvas id="canvas" style="border:1px solid #ccc;display: block;margin:20px auto">当前浏览器不支持canvas</canvas> </body> <script> window.onload=function(){ var canvas=document.getElementById("canvas"); canvas.width=1024;//画布的宽度 canvas.height=768; var context=canvas.getContext("2d"); //对于不支持canvas浏览器的处理方法 在canvas标签中间添加文字说明，或者用如下的if else操作 /* if(canvas.getContext("2d")){ var context=canvas.getContext("2d"); }else{ alert("当前浏览器不支持canvas") }*/ context.beginPath();//路径开始 beginPath()和closePath()不一定成对出现 context.moveTo(100,100);//绘制起点 context.lineTo(700,700);//绘制终点 context.lineTo(100,700); context.lineTo(100,100); context.lineWidth=5;//线条宽度 context.strokeStyle="#c00011";//绘制样式 context.stroke();//绘制操作 /* context.fillStyle="rgb(can,100,30)"; context.fill();//填充*/ context.closePath();//路径结束 context.beginPath(); context.moveTo(200,100); context.lineTo(700,600); context.strokeStyle="#000"; context.stroke(); context.closePath(); } </script> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <canvas id="canvas" width="1024" height="768" style="border:1px solid #ccc;margin:20px auto;"></canvas> </body> <script> window.onload=function(){ var canvas=document.getElementById("canvas"); var context=canvas.getContext("2d"); context.lineWidth=5; context.strokeStyle="#005588"; context.beginPath(); context.arc(300,300,200,0,1.5*Math.PI,true);//画圆 300,300为圆心 200为半径 从0一直画到1.5π,true为逆时针绘制，默认为false为顺时针 context.closePath();//closePath()有个作用就是对于结尾处没有连接的路径，会自动链接 如果不需要自动连接，可以只写beginPath()不写closePath() context.stroke(); } </script> </html>
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <canvas id="canvas" style="border:1px solid #000;display: block;margin:50px auto;"></canvas> </body> <script> var point=[ { p:[{x:0,y:0},{x:0,y:600},{x:300,y:300},{x:0,y:0}],color:"#c2c2cb" }, { p:[{x:0,y:0},{x:600,y:0},{x:300,y:300},{x:0,y:0}],color:"#c868a8" }, { p:[{x:150,y:450},{x:300,y:600},{x:0,y:600},{x:150,y:450}],color:"#c3b217" }, { p:[{x:300,y:600},{x:600,y:300},{x:600,y:600},{x:300,y:600}],color:"#c01110" }, { p:[{x:150,y:450},{x:300,y:600},{x:450,y:450},{x:300,y:300},{x:150,y:450}],color:"green" }, { p:[{x:450,y:150},{x:450,y:450},{x:300,y:300},{x:450,y:150}],color:"blue" }, { p:[{x:450,y:150},{x:450,y:450},{x:600,y:300},{x:600,y:0},{x:450,y:150}],color:"yellow" } ]; window.onload=function(){ var canvas=document.getElementById("canvas"); canvas.width=1024; canvas.height=768; var context=canvas.getContext("2d"); context.beginPath(); context.moveTo(0,0); context.lineTo(600,0); context.lineTo(600,600); context.lineTo(0,600); context.lineTo(0,0); context.strokeStyle="#ccc"; context.stroke(); context.closePath(); for(var i=0;i<point.length;i++){ draw(point[i],context); } function draw(piece,ctx){ ctx.beginPath(); ctx.moveTo(piece.p[0].x,piece.p[0].y); for(var i=1;i<piece.p.length;i++){ ctx.lineTo(piece.p[i].x,piece.p[i].y); } ctx.fillStyle=piece.color; ctx.fill(); ctx.closePath(); } } </script> </html>
