HTML5 Canvas:绘制矩形

HTML示例:


JS示例:

// 距离 Canvas 左上角的横坐标
var x = 10;
// 距离 Canvas 左上角的纵坐标
var y = 10;
// 绘制矩形的宽度
var width = 100;
// 绘制矩形的长度
var height = 100;
var context = document.getElementById("canvas").getContext("2d");

context.beginPath();
// 绘制的颜色
context.fillStyle = "red";
// 绘制矩形
context.fillRect(x, y, width, height);
context.closePath();

你可能感兴趣的:(HTML5 Canvas:绘制矩形)