canvas学习绘画矩形
1.掌握绘制矩形的方法:strkeRect()/fillRect()
2.掌握绘制路径的beginPath()和closePath()
beginPath()用来创建新的路径
closePath()从当前点回到起始点,封闭路径 边角无漏
context3.moveTo(100,100);
context3.lineTo(400,100);
context3.lineTo(400,400);
context3.lineTo(100,400);
//context3.lineTo(100,100);
context3.closePath();
context3.stroke();
3.rect(x,y,w,h)创建一个矩形,strokeRect(x,y,w,hx,y,w,h)绘制矩形(无填充)
strokeRect(x,y,w,h)相当于Rect(x,y,w,h)+stroke()
<script type="text/javascript">
var canvas3=document.getElementById('mycanvas3');
var context3=canvas3.getContext('2d');
context3.lineWidth=10;
context3.strokeStyle="#A52A2A";
context3.rect(200,200,100,100);
context3.stroke();
var c=canvas3.getContext('2d');
c.beginPath();
c.lineWidth=10;
c.strokeStyle='green';
c.strokeRect(100,100,100,100);
</script>
4.fillRect(x,y,w,h)绘制“被填充”的矩形,fill()绘制已定义的路径(带填充的图形)
var c=canvas3.getContext('2d');
c.beginPath();
c.lineWidth=10;
c.strokeStyle='green';
c.strokeRect(100,100,100,100);
c.beginPath();
c.fillStyle='red';
c.rect(300,100,100,100);
c.fill();
c.beginPath();
c.fillStyle='black';
c.fillRect(100,300,100,100);
c.fillRect(300,300,100,100);
5.stroke()绘制已定义的路径
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas绘制矩形</title> <style type="text/css"> canvas{background:#000fff} </style> </head> <body> <canvas id="mycanvas3" width="500" height="500"> </canvas> <script type="text/javascript"> var canvas3=document.getElementById('mycanvas3'); var context3=canvas3.getContext('2d'); context3.lineWidth=10; context3.strokeStyle="#A52A2A"; context3.moveTo(100,100); context3.lineTo(400,100); context3.lineTo(400,400); context3.lineTo(100,400); //context3.lineTo(100,100); context3.closePath(); context3.stroke(); context3.beginPath(); context3.lineWidth=5; context3.strokeStyle="green"; context3.rect(200,200,100,100); context3.stroke(); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>canvas绘制矩形</title> <style type="text/css"> canvas{background:#000fff} </style> </head> <body> <canvas id="mycanvas3" width="500" height="500"> </canvas> <script type="text/javascript"> var canvas3=document.getElementById('mycanvas3'); var context3=canvas3.getContext('2d'); context3.lineWidth=10; context3.strokeStyle="#A52A2A"; context3.rect(200,200,100,100); context3.stroke(); var c=canvas3.getContext('2d'); c.beginPath(); c.lineWidth=10; c.strokeStyle='green'; c.strokeRect(100,100,100,100); c.beginPath(); c.fillStyle='red'; c.rect(300,100,100,100); c.fill(); c.beginPath(); c.fillStyle='black'; c.fillRect(100,300,100,100); c.fillRect(300,300,100,100); </script> </body> </html>