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)   // 画框



上一篇下一篇

猜你喜欢

热点阅读