Прямоугольный метод Канаваса
График прямоугольника на графической поверхности HTML 5 с помощью rect или fillRect имеет множество параметров.
Игра в кирпичную стену
API Canvas предлагает лишь несколько простых форм, но многое можно сделать, например, с такой простой фигурой, как прямоугольник, а также с методом рисования круга, и несколько строк JavaScript, есть все необходимые элементы для создания игры кирпичной стены. Ниже вы найдете ссылку на очень простой исходный код, который показывает, как.
Поскольку атрибуты цвета и толщины обводки заданы так же, как и для линий, мы объясним функции, характерные для прямоугольника, пустые или сплошные.
Метод rect с четырьмя параметрами
rect(x, y, w, h)
Аргументами являются координаты верхней левой точки, горизонтальная длина, вертикальная длина.
Пример :
Полный код
<canvas id="canvas1" width="400" height="120">
Requiert un navigateur récent: Internet Explorer 9, Chrome, Firefox, Safari.
</canvas>
<script type="text/javascript">
function rectangle()
{
var canvas = document.getElementById("canvas1");
var context = canvas.getContext("2d");
context.beginPath();
context.strokeStyle="blue";
context.lineWidth="2";
context.rect(10,10,200,100);
context.stroke();
}
window.onload=rectangle;
</script> Прямоугольник заполнен элементом fill
Метод fill () позволяет заполнить любую фигуру. Цвет задается атрибутом fillStyle, а цвет контура, в данном случае границы прямоугольника задаются атрибутом strokeStyle .
Кодекс
<script type="text/javascript">
function rectangle1() {
var canvas = document.getElementById("canvas2");
var context = canvas.getContext("2d");
context.beginPath();
context.strokeStyle="blue";
context.lineWidth="2";
context.rect(10,10,200,100);
context.fillStyle="yellow";
context.fill();
context.stroke();
}
rectangle1();
</script> Но функция fillRect проще
Метод контекстного заполнения является общим методом, который применяется к любой замкнутой фигуре, будь то прямые линии, кривые или геометрические фигуры.
Метод fillRect специально рисует полный прямоугольник. Разница в том, что у него нет контура границы, в отличие от другого случая.
Пример полного прямоугольника с rectFill :
Кодекс
function rectangle3() {
var canvas = document.getElementById("canvas3");
var context = canvas.getContext("2d");
context.fillStyle="yellow";
context.fillRect(10,10,200,100);
}
rectangle3();Код упрощен...
В следующей главе мы увидим, как нарисовать прямоугольник по закругленным углам, но сначала надо научиться рисовать дуги.
Вы также можете знать...