rect.png
pug
extends _defaultPage
block link
link(rel="stylesheet", href="./css/style.css")
block body
canvas#canvas(style="border: 1px solid #aaaaaa; display: block; margin: 50px auto;" width="800" height="600") 你的浏览器居然不支持Canvas?!赶紧换一个吧
block script
script
|seajs.use('./js/main.js')
main.es6
let canvas = document.getElementById('canvas');
let t = canvas.getContext('2d');
canvas.width = 800;
canvas.height = 600;
t.beginPath();
t.rect(0,0,800,600);
t.fillStyle="#e0dcd3";
t.closePath();
t.fill();
for(let i=0;i<20;i++){
drawWhiteRect(t,300+5*i,200+5*i,200-10*i,200-10*i);
drawWhiteBlack(t,302.5+5*i,202.5+5*i,195-10*i,195-10*i);
}
function drawWhiteRect(txc,x,y,w,h) {
txc.beginPath();
txc.moveTo(x, y);
txc.lineTo(w + x, y);
txc.lineTo(w + x, h + y);
txc.lineTo(x, y + h);
txc.closePath();
txc.fillStyle = "white";
txc.fill();
}
function drawWhiteBlack(txc,x,y,w,h) {
txc.beginPath();
txc.moveTo(x, y);
txc.lineTo(w + x, y);
txc.lineTo(w + x, h + y);
txc.lineTo(x, y + h);
txc.closePath();
txc.fillStyle = "black";
txc.fill();
}
function drawRect(txc, x, y, width, height, borderWidth, borderColor, fillColor) {
txc.beginPath();
txc.moveTo(x, y);
txc.lineTo(width + x, y);
txc.lineTo(width + x, height + y);
txc.lineTo(x, y + height);
txc.closePath();
txc.lineWidth = borderWidth;
txc.strokeStyle = borderColor;
txc.fillStyle = fillColor;
txc.fill();
txc.stroke();
}
