canvas绘制出货单

先上效果图这里以a4纸为例

首先创建一个canvas 定义宽、高

<canvas id="canvas" width="740" height="1100"></canvas>

然后获取到canvas 获取到绘图环境

const canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');

画出货单上的线

for (let i = 0; i < n; i++) {for (let y in list) {if (y !== 0) {const poi = list[y] - (list[y] - list[y - 1]) / 2;writeTxt(tlist[i][y - 1], '12px', [poi, startHei + txtHei + 30 * i])}ctx.moveTo(list[y], startHei);ctx.lineTo(list[y], startHei + 30 * (i + 1));}if (isTrue) {const mtY = startHei + 30 * n;if (i == 0) {ctx.moveTo(8, startHei + 30 * i);ctx.lineTo(726, startHei + 30 * i);}ctx.moveTo(8, mtY);ctx.lineTo(726, mtY);}ctx.moveTo(8, startHei + 30 * i);ctx.lineTo(lineWidth, startHei + 30 * i);}

这里我封装了一个函数 n 为所需要画的横线的数量 list 为每个竖线的位置数组当不是第一个竖线的时候绘制文字然后画线当绘制的为商品列表的话算出最后一条线位置并绘制上

好了废话这么多还是直接上全部代码吧

ctx.font = `${s} bold 黑体`;ctx.fillStyle = c;ctx.textAlign = a;ctx.textBaseline = 'middle';ctx.fillText(t, p[0], p[1]);

设置文字大小颜色位置等完成绘制
有积分的传送门小收一积分

当然没有的下面就是全部代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Canvas</title>
</head>
<style>* {margin: 0;padding: 0;}html,body {width: 100%;height: auto;}
</style><body><canvas id="canvas" width="740" height="1100"></canvas><script>const canvas = document.getElementById('canvas');let ctx = canvas.getContext('2d');/*** @writeTxt: canvas 写入字内容* @param {str} t 所需要写入的文字* @param {str} s 写入文字的样式* @param {arr} p 写入文字的位置* @param {arr} a 写入文字对齐方式 默认 居中* @param {obj} c 写入文字颜色 默认 #000 */const writeTxt = (t, s, p, a = 'center', c = '#000') => {if (!t) {return;}ctx.font = `${s} bold 黑体`;ctx.fillStyle = c;ctx.textAlign = a;ctx.textBaseline = 'middle';ctx.fillText(t, p[0], p[1]);}/*** @drawTable: 画表格 */const drawTable = () => {const headArr = [8, 104, 212, 290, 554, 626, 726]const headTxtArr = [['姓名', ' ', '姓名', ' ', '姓名', ' '],['姓名', ' ', '姓名', '', '姓名', ' ']]const titleArr = [8, 212, 290, 360, 416, 484, 626, 726];const titleTxtArr = [['商品名称', '商品名称', '商品名称', '商品名称', '商品名称', '商品名称', '商品名称']]const goodsTxtArr = [['商品名称', '商品名称', '商品名称', '商品名称', '商品名称', '商品名称', ''],['商品名称', '商品名称', '商品名称', '商品名称', '商品名称', '商品名称', ''],['商品名称', '商品名称', '商品名称', '商品名称', '商品名称', '商品名称', ''],['商品名称', '商品名称', '商品名称', '商品名称', '商品名称', '商品名称', ''],['商品名称', '商品名称', '商品名称', '商品名称', '商品名称', '商品名称', ''],['商品名称', '商品名称', '商品名称', '商品名称', '商品名称', '商品名称', '']]drawLine(headArr, headTxtArr, 62, 726, 2)drawLine(titleArr, titleTxtArr, 123, 726, 1, 16)drawLine(titleArr, goodsTxtArr, 154, 626, goodsTxtArr.length, 16, true)}/*** @drawLine: 画table线* @param list {arr} 表格竖线x轴位置* @param tlist {arr} 表格需要填写文字 无文字 填 ''* @param startHei {num} 开始画线的高度* @param lineWidth {num} 横线的长度* @param n {num} 行数* @param txtHei {num} 文字位置调整* @param isTrue {boolean} 是否为物资列表*/const drawLine = (list, tlist, startHei, lineWidth, n, txtHei = 14, isTrue = false) => {for (let i = 0; i < n; i++) {for (let y in list) {if (y !== 0) {const poi = list[y] - (list[y] - list[y - 1]) / 2;writeTxt(tlist[i][y - 1], '12px', [poi, startHei + txtHei + 30 * i])}ctx.moveTo(list[y], startHei);ctx.lineTo(list[y], startHei + 30 * (i + 1));}if (isTrue) {const mtY = startHei + 30 * n;if (i == 0) {ctx.moveTo(8, startHei + 30 * i);ctx.lineTo(726, startHei + 30 * i);}ctx.moveTo(8, mtY);ctx.lineTo(726, mtY);}ctx.moveTo(8, startHei + 30 * i);ctx.lineTo(lineWidth, startHei + 30 * i);}if (isTrue) {const mtY = startHei + 30 * n;ctx.moveTo(8, mtY);ctx.lineTo(726, mtY);}ctx.strokeStyle = '#5a5a59';ctx.stroke();}writeTxt('出货单', '20px', [370, 20])writeTxt('公司代码:1232313131', '12px', [12, 48], 'left')writeTxt('时间:2020-01-02', '12px', [698, 48], 'right')drawTable()</script>
</body></html>

canvas绘制出货单相关推荐

node+koa+canvas绘制出货单，收据，票据
在生成票据需求中,我们会想到前端生成或者后端生成返回图片地址访问两个方法,前端生成则不需要调用接口,而后端是在完成整个流程时就进行生成然后把上传的地址保存数据库先看效果下面我们就使用node +k ...
canvas绘制的文字如何换行
<html><head><title>canvas绘制的文字如何换行</title><style type="text/css" ...
HTML5 canvas绘制雪花飘落
Canvas是HTML5新增的组件,它就像一块幕布,可以用JavaScript在上面绘制各种图表.动画等.没有Canvas的年代,绘图只能借助Flash插件实现,页面不得不用JavaScript和Fl ...
canvas绘制时钟
听了慕课网Sliav Zhou 的课程canvas绘制时钟,记录下来的代码,每句做了注解便于以后学习,原先每次边听别的课边敲码,错误百出,明明原封不动复制的代码,就会出错,还找不到原因,今天可能运气好 ...
canvas绘制圆形
canvas绘制圆形的思路: 1.创建路径 XXX.beginpath(); 2.创建圆形的路径: 3.关闭路径:XXX.closepath(); 路径不关闭也能绘制出图形 4.设定绘制样式. 创建圆 ...
java canvas 画图片_[Java教程][HTML5] Canvas绘制简单图片
[Java教程][HTML5] Canvas绘制简单图片 0 2016-05-13 13:00:04 获取Image对象,new出来定义Image对象的src属性,参数:图片路径定义Image对象 ...
html5 canvas绘制圆形进度实例
2019独角兽企业重金招聘Python工程师标准>>> html5 canvas绘制圆形进度实例 <canvas id="test" width=200 h ...
【Android 应用开发】Canvas 绘制文字 ( 文字尺寸测量 | 基线绘制 )
文章目录 I . 文字尺寸测量 II . 基线绘制 I . 文字尺寸测量 1 . 精准绘制需求 : Canvas 绘制文字时 , 有时需要精准的控制文字的绘制 , 如绘制到指定的区域 , 居中 , 或 ...
小猿圈html5教程之canvas绘制线段方法
HTML5现在是时下较火的编程语言之一,但是对于怎么学习很多朋友都是不了解的,不知道从何处下手,针对以上内容小猿圈web前端讲师每天会分享一个web前端知识,希望对你的前端学习有一定的帮助,今天分享的 ...
微信小程序canvas绘制环形图（含动画）
页面版效果图思路 1.使用一个canvas绘制(带动画): 2.通过画弧线,设置线宽,来实现圆环效果: 3.计算每段圆弧的起始角度和终止角度,用递归做动画: 绘制完第一段圆弧块–>再绘制下一 ...

canvas绘制出货单

canvas绘制出货单相关推荐

最新文章

热门文章