<!DOCTYPE html>
<html> <head> <meta charset="UTF-8"> <title>绘制矩形</title> </head> <body> <canvas id="drawing" height="500" width="500">A drawing of something.</canvas> <script type="text/javascript"> var drawing = document.getElementById("drawing") if(drawing.getContext) { var context = drawing.getContext("2d") context.strokeStyle.lineCap = "square" //绘制红色矩形 context.fillStyle = "#ff0000"; context.strokeStyle = "black" context.fillRect(10,10,60,60); context.strokeRect(10,10,60,60); //绘制半透明的蓝色矩形 context.strokeStyle = "red" context.fillStyle = "rgba(0,0,255,0.5)"; context.fillRect(30,30,50,50); context.strokeRect(30,30,50,50); //context.fiilRect的第一个和第二个参数代表着以画布的上面为x坐标，左边为y坐标的x,y坐标的值 context.clearRect(40,40,20,20) //第一个和第二个参数表示的是坐标，第三个和第四个表示的是长宽的大小 // context.beginPath(); context.lineWidth = 10;//线条的宽度 context.lineCap = "round";//线条在最后面的位置 context.moveTo(90,60);//表示线条的末端的位置 context.lineTo(200,20);//表示线条前端的位置 context.stroke();//表示画图 } </script> </body></html>