本文实例讲述了js+canvas绘制矩形的方法。分享给大家供大家参考,具体如下:
运行效果截图如下:
具体代码如下:
/p>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
canvas绘制矩形function draw(id) {
var canvas = document.getElementById("canvas");
if (canvas) {
var context = canvas.getContext("2d");
context.fillStyle = "#DDDDDD";
context.fillRect(0, 0, 400, 400);
context.strokeStyle = "black";
context.fillStyle = "gray";
context.lineWidth = 5;
context.fillRect(0,0,200,300);
context.strokeRect(0,0,200,200);
} else {
return;
}
}
function drawBorder(id) {
var canvas = document.getElementById("canvas2");
if (canvas) {
var context = canvas.getContext("2d");
context.fillStyle = "red";
context.strokeStyle = "black";
context.lineWidth = 5;
context.fillRect(0,0, 300, 200);
context.strokeRect(0,0,300,200);
} else {
return;
}
}
window.onload = function () {
draw("canvas");
drawBorder("canvas2");
}
希望本文所述对大家JavaScript程序设计有所帮助。