canvas.save() // 保存之前的绘图canvas.beginPath() // 开始绘制canvas.setFillStyle('transparent') // 填充边缘// arc对应参数含义// canvas.arc('圆心x轴坐标', '圆心Y轴坐标', '圆的半径', '起始弧度', '终止弧度', '弧度是否逆时针方向:boolean')//left - 矩形x轴位置 | top - 矩形Y轴位置 | width - 矩形宽度 | height - 矩形高度canvas.arc(left + width - radius, top + height - radius, radius, 0, Math.PI * 0.5) // 右下角canvas.lineTo(left + radius, top + height) // 下边线canvas.arc(left + radius, top + height - radius, radius, Math.PI * 0.5, Math.PI) // 左下角canvas.lineTo(left, top + radius) // 左边线canvas.arc(left + radius, top + radius, radius, Math.PI, Math.PI*1.5) // 左上角canvas.lineTo(left + width - radius, top)// 上边线canvas.arc(left + width - radius, top + radius, radius, Math.PI * 1.5, Math.PI * 2) // 右上角canvas.lineTo(left + width, top + height - radius) // 右边线canvas.closePath() // 连接之前绘制的线段canvas.setStrokeStyle('rgba(134, 157, 156, 0.5)') // 设置边框颜色 支持rgba 和 十六进制 格式canvas.stroke() // 绘制矩形// 如果需要在矩形内放入数据,并且数据有可能超出矩形,建议添加下面方法 防止内容溢出canvas.clip() // 剪切边框内的内容canvas.restore() // 恢复之前的绘图```
700字范文,内容丰富有趣,生活中的好帮手!