Комментарий: Есть две формы, одна - ход (заполнить), а другая - заполнение (ход). Конкретный код реализации выглядит следующим образом. Заинтересованные друзья могут ссылаться на это. Я надеюсь, что это будет полезно для всех.
Во -первых, поместите элемент холста на странице HTML, где элемент холста должен иметь три идентификатора атрибута, ширина и высота.<Canvas> </canvas>
Получить объект Canvas и получить контекст var cxt = document.getElementbyId ('demo'). GetContext (2d); где параметр 2D является детерминированным.
Когда вы начинаете рисовать, есть две формы, одна - ход, а другая - ход.
код JavaScript:
<script language = "javascript">
var cxt = document.getElementbyId ('demo'). getContext ("2d");
cxt.beginpath ();
cxt.fillstyle = "#f00";/*Установить цвет заполнения*/
cxt.fillRect (0,0,200 100);/* Нарисуйте прямоугольник, первые два параметра определяют исходную позицию, последние два - ширина и высота прямоугольника соответственно*/
cxt.beginpath ();
cxt.strokestyle = "#000";/*Установить границу*/
cxt.linewidth = 3;/*Ширина границы*/
cxt.strokerect (0,120 200 100);
cxt.beginpath ();
cxt.moveto (0,350);
cxt.lineto (100 250);
cxt.lineto (200 300);
cxt.closepath ();/*Необязательный шаг, закрыть нарисованный путь*/
cxt.Stroke ();
</script>
Изображение воспроизведения: