标签：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo 1</title> </head> <body> <canvas id="wapper" width="200" height="200"></canvas> <script> var wapper = document.getElementById(‘wapper‘), _2d = wapper.getContext(‘2d‘);/*2d的绘制对象*/ _2d.lineWidth = 10;/*设置线条宽度*/ _2d.strokeStyle = ‘red‘;/*设置线条颜色*/ _2d.beginPath();/*创建新的路径*/ _2d.moveTo(10,10);/*将画笔光标移动到画布坐标10，10*/ _2d.lineTo(150,50);/*画一条线到150，50*/ _2d.stroke();/*绘制定义的路径*/ </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>lineCap</title> </head> <body> <canvas id="wapper" width="200" height="200"></canvas> <script> var wapper = document.getElementById(‘wapper‘), _2d = wapper.getContext(‘2d‘);/*2d的绘制对象*/ _2d.lineWidth = 20;/*设置线条宽度*/ _2d.strokeStyle = ‘red‘;/*设置线条颜色*/ _2d.beginPath(); _2d.lineCap = ‘butt‘;/*默认。向线条的每个末端添加平直的边缘。*/ _2d.moveTo(10,10); _2d.lineTo(150,10); _2d.stroke(); _2d.beginPath(); _2d.lineCap = ‘round‘;/*向线条的每个末端添加圆形线帽。*/ _2d.moveTo(20,50); _2d.lineTo(150,50); _2d.stroke(); _2d.beginPath(); _2d.lineCap = ‘square‘;/*向线条的每个末端添加正方形线帽。*/ _2d.moveTo(20,90); _2d.lineTo(150,90); _2d.stroke(); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>strokeRect</title> </head> <body> <canvas id="wapper" width="500" height="500"></canvas> <script> var wapper = document.getElementById(‘wapper‘), _2d = wapper.getContext(‘2d‘);/*2d的绘制对象*/ /*边框*/ _2d.beginPath(); _2d.lineWidth = 5;/*设置线条宽度*/ _2d.strokeStyle = ‘red‘;/*设置线条颜色*/ _2d.strokeRect(10,10,200,50);/*strokeRect(起点x，起点y，矩形长，矩形宽)*/ /*实心*/ _2d.beginPath(); _2d.fillStyle = ‘red‘;/*设置颜色*/ _2d.fillRect(10,100,100,50);/*fillRect(起点x，起点y，矩形长，矩形宽)*/ </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>arc</title> </head> <body> <canvas id="wapper" width="500" height="500"></canvas> <script> var wapper = document.getElementById(‘wapper‘), _2d = wapper.getContext(‘2d‘);/*2d的绘制对象*/ /*边框*/ _2d.beginPath(); _2d.lineWidth = 2; _2d.arc(100,100,50,0,360);/*arc(圆中心x，圆中心y，圆半径，起始弧度，终止弧度，是否逆时针)*/ _2d.stroke(); /*实心*/ _2d.beginPath(); _2d.fillStyle = ‘red‘;/*设置颜色*/ _2d.arc(300,100,50,0,100*Math.PI/180,true);/*arc(圆中心x，圆中心y，圆半径，起始弧度，终止弧度，是否逆时针)*/ _2d.fill(); </script> </body> </html>
123
123
标签：
原文地址：http://www.cnblogs.com/dtdxrk/p/4440883.html
