canvas 2d 常见接口
2022-06-28 本文已影响0人
苍老师的眼泪
// 清空画布
wrapper_canvas_context.fillStyle = "rgb(255, 255, 255)"; // 填充颜色
wrapper_canvas_context.fillRect (0, 0, wrapper_canvas_width, wrapper_canvas_height); // 绘制矩形:x偏移量,y偏移量,矩形x,矩形y
// 文字相关
wrapper_canvas_context.fillStyle = "#000000" // 填充颜色
wrapper_canvas_context.font = "bold 24px serif"; // 字体(粗细 大小 字体)
var title_text = '个人信息授权书'
var title_width = wrapper_canvas_context.measureText(title_text).width // 文字宽度
wrapper_canvas_context.fillText(title_text, (wrapper_canvas_width - title_width) / 2, 40) // 参数分别是:文字内容,x偏移量,y偏移量
// 画一条线
wrapper_canvas_context.strokeStyle = 'black'; // 线体的颜色
wrapper_canvas_context.lineWidth = 1; // 线体的粗细
wrapper_canvas_context.beginPath() // 开始划线
wrapper_canvas_context.moveTo(start_text_width + 6, paragraph_start_height + 4) // 移动至划线起始点
wrapper_canvas_context.lineTo(start_text_width - 4 + company_text_width, paragraph_start_height + 4) // 从起始点划至哪里
wrapper_canvas_context.stroke() // 划线
// 虚线框
wrapper_canvas_context.strokeStyle = 'red'; // 框框的颜色
wrapper_canvas_context.setLineDash([4, 4]) // 框的样式 [实线长度, 间隙长度]
wrapper_canvas_context.lineDashOffset = 0 // 框的样式偏移量
wrapper_canvas_context.strokeRect(10, current_painted_height, wrapper_canvas_width - 20, 160) // 画框