canvas绘制表格

  • 2019-01-04 10:59:50
  • 7,582 次阅读
  • 稿源:天马行空

canvas是HTML5提供的一种新标签,它是一个矩形域的画布,其本身不具备绘图功能,需要借助js控制canvas中的每一个像素,在上面绘图。canvas 有多种绘制路径、矩形、圆形、字符以及添加图像的方法。下面看看如何绘制下面的表格。
(1)绘制的表格图:

table
(2)绘制表格的代码:
<canvas id=”demo”></canvas>
<script>
var canvas = document.getElementById(“demo”);
canvas.width = 500;
canvas.height = 500;
canvas.style.border = “2px solid #f00”;
var ctx = canvas.getContext(“2d”);
// 得到单元格的宽度和高度
var w = 50;
var h = 50;
for (var x = 1;x < canvas.width / w;x++)
{
ctx.beginPath();
ctx.moveTo(w * x,0);
ctx.lineTo(w * x,canvas.height);
ctx.stroke();
}
for (var y =1;y < canvas.height / h;y++)
{
ctx.beginPath();
ctx.moveTo(0,h * y);
ctx.lineTo(canvas.width,h * y);
ctx.stroke();
}
</script>

喜欢 2

文章评论 (0)

表情

大眼 可爱 大笑 坏笑 害羞 发怒 折磨 快哭了 大哭 白眼 晕 流汗 困 腼腆 惊讶 憨笑 色 得意 骷髅 囧 睡觉 眨眼 亲亲 疑问 闭嘴 难过 淡定 抗议 鄙视 猪头