<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02Canvas案例-繪制表格</title>
</head>
<body>
<div id="container">
<canvas id="cavsElem">
你的瀏覽器不支持canvas，請升級瀏覽器
</canvas>
</div>
<script>
(function(){
var canvas=document.querySelector('#cavsElem');
var ctx=canvas.getContext('2d');
canvas.width=600;
canvas.height=600;
canvas.style.border='1px solid green';
var rectH=10;
var rectW=20;
ctx.lineWidth=.5;
//繪制表格
// 第一步： 繪制橫線
for(var i=0;i<canvas.width;i++){
ctx.moveTo(rectW*i,0);
//如果不設置moveTo，當前畫筆沒有位置
ctx.lineTo(rectW*i,canvas.height);
}
//第二步：繪制豎線：如果繪制的格子的寬高相等，可以將for循環放到一個里面；
for(var i=0;i<canvas.height;i++){
ctx.moveTo(0,rectH*i);
ctx.lineTo(canvas.width,rectH*i);
}
ctx.stroke();
}())
</script>
</body>
</html>
使用canvas制作簡單表格
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。