绘制矩形的路径时，可以进行化简操作。 <!DOCTYPEhtml> <htmllang=“en”> <head> <metacharset=“UTF-8”> <metahttp-equiv=“X-UA-Compatible”content=“IE=edge”> <metaname=“viewport”content=“width=device-width, initial-scale=1.0”> <title>Document</title> <style> * { margin: 0; padding: 0; } canvas { border: 1pxsolidred; } </style> </head> <body> <canvaswidth=“800”height=“600”id=“myCanvas”> 对不起，您的浏览器版本过低，请升级浏览器！ </canvas> <script> // 获取元素 varmyCanvas = document.getElementById(“myCanvas”); // 需要新建一个类似PS中的画布，获取 canvas 的渲染上下文获得 varctx = myCanvas.getContext(“2d”); // 后续所有的操作都是在上下文进行 // 绘制路径 // ctx.beginPath(); // ctx.moveTo(100, 100); // ctx.lineTo(200, 100); // ctx.lineTo(200, 200); // ctx.lineTo(100, 200); // ctx.closePath(); // 图形的样式 ctx.lineWidth = 10; ctx.strokeStyle = “red”; ctx.fillStyle = “pink”; // 绘制矩形 ctx.fillRect(100, 100, 200, 200) ctx.strokeRect(400, 400, 100, 100) // 清除矩形区域 // ctx.clearRect(200, 200, 400, 400) ctx.clearRect(0, 0, 800, 600) // 描边或填充 // ctx.stroke(); // ctx.fill(); </script> </body> </html>
