Поиск…
параметры
| атрибут | Описание |
|---|---|
| рост | Определяет высоту холста |
| ширина | Задает ширину холста |
замечания
- Этот тег несовместим с версиями Internet Explorer менее 9. Проверьте caniuse.com на совместимость с браузером.
-
canvas- это только контейнер для графики, а фактический рисунок графики выполняется с помощью JavaScript.
Основной пример
Элемент canvas был введен в HTML5 для рисования графики.
<canvas id="myCanvas">
Cannot display graphic. Canvas is not supported by your browser (IE<9)
</canvas>
Вышеупомянутый элемент создаст прозрачный элемент HTML <canvas> размером 300 × 150 пикселей.
Вы можете использовать элемент canvas для рисования потрясающих материалов, таких как фигуры, графики, манипуляции изображениями, создания привлекательных игр и т. Д. С помощью JavaScript .
Двумерная поверхность слоя canvas называется CanvasRenderingContext2D ; или из HTMLCanvasElement с использованием .getContext("2d") :
var ctx = document.getElementById("myCanvas").getContext("2d");
// now we can refer to the canvas's 2D layer context using `ctx`
ctx.fillStyle = "#f00";
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); // x, y, width, height
ctx.fillStyle = "#000";
ctx.fillText("My red canvas with some black text", 24, 32); // text, x, y
Рисование двух прямоугольников на
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Draw two rectangles on the canvas</title>
<style>
canvas{
border:1px solid gray;
}
</style>
<script async>
window.onload = init; // call init() once the window is completely loaded
function init(){
// #1 - get reference to <canvas> element
var canvas = document.querySelector('canvas');
// #2 - get reference to the drawing context and drawing API
var ctx = canvas.getContext('2d');
// #3 - all fill operations are now in red
ctx.fillStyle = 'red';
// #4 - fill a 100x100 rectangle at x=0,y=0
ctx.fillRect(0,0,100,100);
// #5 - all fill operations are now in green
ctx.fillStyle = 'green';
// #6 - fill a 50x50 rectangle at x=25,y=25
ctx.fillRect(25,25,50,50);
}
</script>
</head>
<body>
<canvas width=300 height=200>Your browser does not support canvas.</canvas>
</body>
</html>
Этот пример выглядит следующим образом:
Modified text is an extract of the original Stack Overflow Documentation
Лицензировано согласно CC BY-SA 3.0
Не связан с Stack Overflow