Комментарий: сегодня я выучил холст HTML5 и обнаружил, что координаты и размер заполнения были неверными. После долгого обучения я обнаружил, что ширина и высота холста должны быть вставлены в тег холста.
Заполните (100 100 100 100) первые 2 100 -х годов относятся к координатам, а последние 2 100 -х годов относятся к ширине и высоте.Сегодня я выучил холст HTML5 и обнаружил, что координаты и размер заполнения были неверными. После долгого обучения я обнаружил, что ширина и высота холста должны быть вставлены в тег холста. В депрессии в течение долгого времени.
Метод ошибки 1:
<! Doctype html>
<html lang = "en">
<голова>
<meta charset = "utf-8">
<title> документ </title>
<style>
#mycanvas {
Ширина: 200px;
Высота: 200px;
Фон: желтый;
}
</style>
</head>
<тело>
<Canvas>/Canvas>
<Скрипт>
var c = document.getElementById ('myCanvas');
var ctx = c.getContext ("2d");
ctx.fillstyle = '#f36';
ctx.fillrect (100, 100, 100, 100);
</script>
</body>
</html>
Неправильный путь 2:
<! Doctype html>
<html lang = "en">
<голова>
<meta charset = "utf-8">
<title> документ </title>
</head>
<тело>
<Canvas> </canvas>
<Скрипт>
var c = document.getElementById ('myCanvas');
var ctx = c.getContext ("2d");
ctx.fillstyle = '#f36';
ctx.fillrect (100, 100, 100, 100);
</script>
</body>
</html>
Покажите результаты:
Правильный способ:
<! Doctype html>
<html lang = "en">
<голова>
<meta charset = "utf-8">
<title> документ </title>
</head>
<тело>
<Canvas> </canvas>
<Скрипт>
var c = document.getElementById ('myCanvas');
var ctx = c.getContext ("2d");
ctx.fillstyle = '#f36';
ctx.fillrect (100, 100, 100, 100);
</script>
</body>
</html>