标签：
1：绘制画布 和在画布上绘制矩形
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="canvas.js"></script> </head> <body onload="draw(‘canvas‘)"> <canvas id="canvas" width="500" height="350"></canvas> </body> </html>
function draw(id){ var canvas = document.getElementById(id); var context = canvas.getContext(‘2d‘);/*取得上下文*/ context.fillStyle = "green"; /*绘制填充的颜色*/ context.strokeStyle = "#f60";/* 设置边框颜色*/ context.lineWidth = 5; /*设置画笔宽度*/ context.fillRect(0,0,400,300); context.strokeRect(50,50,180,120); context.strokeRect(100,100,180,120); }
2：绘制圆形
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>canvas绘制圆形</title> <script type="text/javascript" src="canvas.js"></script> </head> <body onload="draw(‘canvas‘)"> <canvas id="canvas" width="400" height="400"></canvas> </body> </html>
/** * Created by Administrator on 2015/3/29. */ function draw(id){ var canvas = document.getElementById(id); var context = canvas.getContext(‘2d‘); context.fillStyle = "#f1f2f3"; context.fillRect(0,0,400,400); /* context.beginPath(); context.arc(10,10,10,0,Math.PI*2,true);*//*代表从10 10 坐标绘制 从0度开始到360度*//* *//*true 代表顺时针*//* context.closePath(); *//*关闭上下文对象*//* context.fillStyle= "rgba(255,0,0,0,0.25)"; context.fill();*/ for(var i=0 ;i<10;i++) { context.beginPath(); context.arc(10+i*25,10+i*25,10+i*10,10,0,Math.PI*2,true);/*代表从10 10 坐标绘制 从0度开始到360度 *true 代表顺时针*/ context.closePath(); /*关闭上下文对象*/ context.fillStyle= "rgba(255,0,0,0.25)"; context.fill(); } }
3：绘制文字
/** * Created by Administrator on 2015/3/29. */ function draw(id) { var canvas = document.getElementById(id); var context = canvas.getContext(‘2d‘); context.fillStyle =‘green‘; context.fillRect(0,0,800,300); context.fillStyle=‘#fff‘; context.strokeStyle =‘#fff‘; context.font = "bold 100px ‘微软雅黑‘,‘宋体‘"; context.fillText(‘God is a girl！‘,50,150); context.strokeText(‘God is a girl！‘,61,160); window.location = canvas.toDataURL(‘image/png‘); }
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="canvas.js"></script> </head> <body onload="draw(‘canvas‘)"> <canvas id="canvas" width="800" height="300"></canvas> </body> </html>
4：绘制动画
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="canves.js"></script> </head> <body onload="draw(‘canves‘)"> <canvas id="canves" width="400" height="400"> </canvas> </body> </html>
/** * Created by Administrator on 2015/3/29. */ var i; function draw(id){ var canves = document.getElementById(id); context = canves.getContext(‘2d‘); setInterval(painting,100); i=0; } function painting(){ /* context.fillStyle= ‘green‘; context.fillRect(i,0,10,10); i=i+20;*/ context.fillStyle ="green"; context.fillRect(0,0,400,400); context.fillStyle="red"; context.clearRect(i,0,10,10); i=i+10; }
标签：
原文地址：http://www.cnblogs.com/lipeng0824/p/4376122.html
