转载《学习HTML5 canvas遇到的问题》_H5之家 - 中国HTML5教程资源分享第一站

1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Document</title> 7 <style> 8 canvas { 9 display: block; 10 margin: 0 auto; 11 border: 1px solid #666; 12 } 13 </style> 14 </head> 15 16 <body> 17 <canvas></canvas> 18 <script> 19 var myCanvas = document.getElementById("myCanvas"); 20 var ctx = myCanvas.getContext(‘2d‘); toRad(d) { 23 return d * Math.PI / 180; 24 } circleRect(x, y, width, height, r, color) { ctx.save(); 29 ctx.beginPath(); ctx.moveTo(x + r, y); 32 ctx.lineTo(x + width - r, y); 33 34 ctx.moveTo(x + r, y + height); 35 ctx.lineTo(x + width - r, y + height); 36 37 ctx.moveTo(x, y + r); 38 ctx.lineTo(x, y + height - r); 39 40 ctx.moveTo(x + width, y + r); 41 ctx.lineTo(x + width, y + height - r); 42 43 ctx.moveTo(x + r, y); 44 ctx.arcTo(x, y, x, y + r, r); 45 46 ctx.moveTo(x + width - r, y); 47 ctx.arcTo(x + width, y, x + width, y + r, r); 48 49 ctx.moveTo(x, y + height - r); 50 ctx.arcTo(x, y + height, x + r, y + height, r); 51 52 ctx.moveTo(x + width - r, y + height); 53 ctx.arcTo(x + width, y + height, x + width, y + height - r, r); ctx.strokeStyle = color || ‘#000‘; 56 ctx.stroke(); ctx.restore(); 59 } 60 61 circleRect(100, 100, 200, 200, 50, ‘red‘); 62 circleRect(300, 300, 100, 100, 25); 63 </script> 64 </body> 65 66 </html>